자바스크립트 상속!! 후......ㅠ

자바스크립트 클래스 상속(생성자함수)

한참 스터디 중인 자바스크립트에서 클래스를 상속하는 방법에 대해서 정리해 보겠습니다.
배우는중이라 틀린 부분이 있다면 댓글로 알려주시면 감사하겠습니다.^^

자바스크립트책을 조금 읽어보신 분들은 자바스크립트에는 클래스가 없다는 것을 알고계실 겁니다. 자바스크립트에는 생성자함수만 있는데 부모 생성자함수를 자식 생성자함수가 상속받아서 사용하기위해서 두가지 방법이 있습니다.  방법은 아래와 같습니다. ( 더 있을 수 도 있습니다.ㅋ )

첫번째 방법, 자식 생성자함수로 생성한 객체의 __proto__프로퍼티가 가르키는 생성자함수의 prototype 객체에 부모 생성자함수(함수가아닌 new를 통해 생성되는 인스턴스 객체)를 할당하는 방법입니다.
( 부모 생성자함수의 this가 참조하는 멤버들과 __proto__프로퍼티가 가르키는 prototype객체를 할당 )

1 2 3 4

var Parent = function () { this.name = "adam"; }; var Child = function () {}; // 상속 구현 Child.prototype = new Parent();

위와 같은 방법으로 상속을 구현하면 Parent의 this로 참조되는 멤버들이 Child에 복사가 아닌 참조가 일어납니다. 따라서 hasOwnProperty를 돌려보면 Child에서 해당프로퍼티가 없기 때문에 아래와 같은 결과를 확인하실 수 있습니다.

1 2 3 4 5 6

var p = new Parent(); var c = new Child(); p.name; // adam c.name; // adam p.hasOwnProperty(\'name\'); // true c.hasOwnProperty(\'name\'); // false

이런 패턴의 경우 부모 생성자함수의 this가 참조하는 멤버들을 사용할 수 있고 prototype 체인 추적이 가능하지만 부모 생성자함수로 인자를 넘길 방법이 없다는 단점이 있습니다.

위 문제를 해결하기 위해서 두번째 상속방법인 apply,call 등을 사용하여 scope 바인딩으로 생성자를 빌려올 수 있으며, 생성자 빌려오기를 통해 다중 상속구현이 가능합니다.

1 2 3 4

var Child = function () {     Parent.apply ( this, arguments );     God.apply ( this, arguments ); };

이경우에는 부모의 생성자함수에 파라미터 전달이 가능하지만 부모 생성자함수의 prototype에 접근이 불가능하기 때문에 아래와 같이 작성하여 해결할 수 있습니다.

1 2 3 4

var Child = function () {     Parent.apply ( this, arguments ); }; Child.prototype = new Parent();

위와같이 작성하면 자식객체는 부모가 가진 프로퍼티의 복사본을 가지고 prototype 참조를 물려받으면서 파라미터 전달도 가능하지만 부모 생성자함수가 자식 생성자함수에서 한번, prototype에 할당시 한번으로 두번 호출된다는 단점이 있습니다.

(*Child.prototype객체가 부모 생성자함수의 prototype만 참조하도록 하면 자식객체에서 부모객체로 prototype체인 추적이 가능합니다.)

1 2 3 4

var Child = function () {     Parent.apply ( this, arguments ); }; Child.prototype = Parent.prototype;

위와같이 작성하면 자식 생성자함수의 prototype 객체는 부모 생성자함수의 this로 참조되는 멤버와 부모 생성자함수의 prototype에 접근할 수 있게됩니다. 하지만 여기에도 단점이 있는데 상속체인의 어딘가에서 prototype을 수정할 경우 prototype체인상의 모든 객체에 영향을 미칩니다. 해당 문제는 아래와 같은 방법으로 해결할 수 있습니다.

1 2 3 4

var F = function(){}; F.prototype = Parent.prototype; Child.prototype = new F(); // 부모를 상속받은 인스턴스 생성으로 참조연결 끊어줌. // 인스턴스 생성은 새로운 메모리를 차지하므로 참조가아닌 새로운 인스턴스의 멤버호출로 부모객체의 멤버를 참조가 아닌 호출하는 것이다.

임시생성자 ’F’ 를 만들어 부모와 자식객체의 prototype간의 링크를 끊어주는 것 입니다.  이제 상속 구현은 다 되었습니다.

추가로 Child.prototype.constructor를 Child로 선언해 줍니다. 아래와 같이 Child로 인스턴스를 생성할경우 인스턴스의 constructor는 Child일거라고 예상되지만 실제로는 Object를 반환하였습니다. 따라서 Child.prototype.constructor를 Child로 선언해줍니다. (생활코딩의 김중훈님께서 알려주셨습니다.)

1 2 3 4

var c = new Child(); c.constructor // Object Child.prototype.constructor = Child; c.constructor // Child

여기서 더 나아가 상속을 위한 재사용 함수 inherit를 정의하면 아래와 같습니다.

1 2 3 4 5 6 7

var inherit = function( Parent, Child ){     var F = function(){};     F.prototype = new Parent;     Child.prototype = new F();     Child.uper = Parent.prototype;     Child.prototype.constructor = Child;       };

하지만 위의 방법은 상속을할 때마다 임시생성자  F가 계속해서 생성되기 때문에 최초에 한 번만 만들어두고 임시생성자의 프로토타입을 새로 할당해주는 방법으로 작성할 수 있다. 함수를 반환하는 크로저를 사용하여 이를 구현할 수 있습니다.

1 2 3 4 5 6 7 8 9 10 11 12

var inherit = (function(){     var F = function(){};     return function( Parent, Child ){       F.prototype = new Parent;       // F.prototype = Parent.prototype;       // 이경우는 Child에서 apply, call을 사용해 scope 바인딩을 해줘야       // 부모의 프로퍼티에 접근이 가능하다.       Child.prototype = new F();       Child.uper = Parent.prototype;       Child.prototype.constructor = Child;     }   })();

점점 더 어려워지네요ㅋ 열공하세요~ ㅋ

퍼옴 : http://superjang.com/archives/2535