Javascript 상속-함수를 사용한 방식

Javascript에서 상속을 구현하기 위한 여러 방법들이 있다.

이 책에서는 

의사 클래스 방식,

객체를 기술하는 객체,

프로토타입 방식,

마지막 - 함수를 사용한 방식 총 네가지를 소개한다.

Private형의 속성을 지원할 수 있는 함수를 사용한 방식을 갈무리해 두기로 한다.

---

먼저 객체를 생성하는 함수를 만드는 것으로 시작할 것입니다. 이 함수는 new 연산자를 사용하지 않을 것이기 때문에 이름을 소문자로 시작할 거싱ㅂ니다. 이 ㅎ마수는 다음의 4단계로 작업을 진행합니다.

1. 새로운 객체르 ㄹ생성합니다. 객체를 만드는데는 다양한 방법이 있습니다. 객체 리터럴로 만들 수도 있고,  new 연산자를 사용할 수도 있고, Object create메소드를 사용할 수 도 있으며, 객체를 반환하는 함수를 호출할 수도 있습니다.

2. 필요한 private 변수와 메소드를 정의합니다. 이것들은 단지 함수 ㅇ나의 일반적인 변수입니다.

3. that에 새로운 객체를 할당하고 메소드를 추가합니다. 이때 축다ㅚ는 메소드들은 함수의 매개변수와 2번째 단계에서 정의한 변수들을 접근할 수 있는 권한을 ㄱ자습니다.

4. 새로운 객체 that을 반환합니다.

다음은 이러한 함수를 위한 수도코드 템플릿입니다.

var constructor    =     function (spec, my) {

var that, a1, a2, a3;

my    =    my ||{};

//공유할 변수와 함수를 my에 추가.

my.private1 = a1;

my.private2 = a2;

my.private3 = a3;

that = {};

//앞서 정의한 변수들에 접근할 권한이 있는 메소드들을 that에 추가.

that.privatefunc = function(){

my.private1++;

my.private2++:

my.private3++;

}

return that;

}

spec 객체는 constructor가 인스턴스를 만드는데 필요한 모든 정보가 있습니다. ( 인자로 받음)

spec의 내용들은 private 변수에 복사되거나 다른 함수에 의해서 처리도리 수 있습니다. 또ㅓㅓ한 메소드에서 필요한 정보를 스펙에서 으ㅓㄷ을 수도 있습니다.

my 객체는 상속 연결상에서 생성자와 공유하게 되는 비밀들은 담는 컨테이너입니다. my객체를 사용하는 것은 선택사항입니다. my객체가 전달되지 않으면 내부에서 이 객체가 만들어집니다.

다음은 private변수와 메소드를 정의하는 것입니다. 방법은 간단합니다. 단지 constructor 내부에서 변수와 함수를 정의하면  이것들이 private변수와 함수가 됩니다. 내부 함수는 spec, my,. that과 함께 정의된 모든 변수들을 다 접근할 수 있습니다.

my.member = value;

이제 새로운 객체를 만들과 that에 에 할당합니다. 새로운 객체는 다양한 방법으로 만들 수 있습니다. 객체 리터럴로 만들 수도 있고, new 연산자를 사용하는 의사 클래스 생성자로 만들 수도 있으며, protype 객체에  Object.create메소드를 사용할 수도 있습니다. 또한 별도의 함수형 생성자에 spec, m,y 개겣를 넘겨 만들수도 있습니다.(물론 스펙과 마이객체는 컨스트럭터에 ㄴ머어온 것 그대로 넘길 수 있습니ㅏ다. 마이 객체는 별도의 생성자와 마이에 넣은 것들을 공유하게 합니다. 여기에서 사용되는 별되의 생서앚도 마이객체에 자신만ㄷ의 비밀을 담아 컨스트럭터에 전달할 수 있습니다.

다음은 객체의 인터페이스를 담당하게 될 메소드 들을 that에 추가하는 것입니다.

var methodical = function(){};

that.methodical = methodical;

이렇게 두단계를 거쳐 methodical 을 정의하면 좋은 점은 메쏘디컬을 호출하기 원하는 다른 메소드가 that.methodical()로 호출하는 대신 배로  methodical()로 호출할 수 있다는 것입니다. 또한 that. methodical이 대체되어 변경이 된다 하더라도 private인  methodical은 이러한 변경에 영항을 받지 않기 때문에 methodical을 호출하는 메소드는 계속해서 같은 작업을 수행할 수 있게 됩니다.

마지막으로 thatdmf반환합니다.

이제 앞서 살펴본 mammal 예제에 이 패턴을 적용해 보겠습니다. 여기서는 my가 필요 없기 때문에 my는 없애고 스펙 객체만 사용할 것입니다.

var mammal = function(spec){

var that={};

that.get_name = function(){

return spec.name;

}

that.says = function(){

return spec.saying  || '';

}

return that;

};

var myMammal = mammal({name:'Herb'});

함수형 패턴에서는 Cat 생성자가 Mammal 생성자를 호출하고  Mammal 생성자가 객체 생성을 위해 필요한 대부분의 작업을 하기 때문에 이러한 작업이 필요 없습니다. Cat은 다만 자신에게 추가되는 부분만 신경
쓰면 됩니다.

var cat() = function ( spec){

spec.saying = spec.saying || 'meow' ;

var that = mammal(spec);

that.purr = function(n){

var i, s;

s = s++;

return s;

};

that.get_name = function(){

return that.says() + ' ' + spec.name + ' ' + that.says( );

return that;

};

};

var myCat = cat({name: 'Jack'});

함수형 패턴은 또한 super메소드를 다룰 수 있는 방법을 제공합니다. 이제 메소드 이름을 받아서 해당 메소드를 실행하는 함수를 반환하는 superior라느 ㄴ메소드를 만들어 보겠습니다. superior 메소드가 반환하는 함수는 속성이 변경되더라도 원래 함수를 호출합니다.

Object.method('superior', funciton ( name ) {

var that = this,

method = that[name];

return function(){

return method.apply(that, arguments);

};

});

이제 cat과 같으면서 추가적으로  super메소드를 호출하는 메소드인 get_name을 가진  coolcat을 통해 시험해 보겠습니다. 이를 위해서는 준비가 필요한데, super_get_nmae이라는 변수를 선언하고 여기에 superior 메소드를 호출한 결과를 할당하는 것입니다.

var coolcat = function(spec){

var that = cat (spec);

var super_get_name = that.superior('get_name');  // 억지로 이렇게 가져와야되는구나.

that.get_name = function(n){

return 'like ' + super_get_name () + 'baby ';

};

return that;

};

var myCoolCat = coolcat({name: "MJ"});

var name = myCoolCat.get_name();

함수형 패턴은 유연성이 매우 좋다. 이 패턴은 작업량이 적고, 캡슐화와 정보은닉 그리고 super메소드에 접근할 수 있는 방법까지 제공합니다.

---

이 패턴의 JS 프로그래밍을 통해 좀 더 안전한(캡슐화)된 프로그래밍을 할 수 있을것으로 보인다.

이벤트나 툴 작성할때 참고하도록 하자.