Lee-Bom
commented
4 years ago 7-3 클래스 상속 7-3-1 기본 구현 프로토타입 체인을 활용해 클래스 상속 구현, 클래스와 비슷한 형태로 구현 클래스에 있는 값이 인스턴스의 동작에 영향을 줘서는 안됨 구체적인 데이터를 지니지 않고 오직 인스턴스가 사용할 메서드만을 지니는 틀로 작용하게끔!
var Rectangle = function (width, height) {
this.width = width;
this.height = height;
};
Rectangle.prototype.getArea = function () {
return this.width * this.height;
};
var rect = new Rectangle(3, 4);
console.log(rect.getArea()); //12
var Square = function (width) {
this.width = width;
};
Square.prototype.getArea = function () {
return this.width * this.width;
};
var sq = new Square(5);
console.log(sq.getArea()); //25
▼ Square에서 getArea를 Rectangle와 동일하게 적용하도록 변경
var Square = function (width) {
this.width = width;
this.height = width;
};
//getArea 메서드는 동일한 작용을 하므로 상위 클래스(Rectangle)에서만 정의
//하위 클래스(Square)에선 해당 메서드 상속하면서 height대신 width 넣어주면 됨
Square.prototype.getArea = function () {
return this.width * this.height;
};
▼
var Square = function (width) {
Rectangle.call(this, width, width);
};
Square.prototype = new Rectangle();7-3-2 클래스가 구체적인 데이터를 지니지 않게 하는 방법
- 일단 만들고 나서 프로퍼티들을 일일이 지우고 더는 새로운 프로퍼티를 추가할수 없게 하기
- subClass의 prototype에 직접 superClass의 인스턴스 할당하는 대신, 아무런 프로퍼티를 생성하지 않는 빈 생성자 함수(Bridge)를 하나 더 만들어 그 prototype이 superClass의 prototype을 바라보게 한 후, subClass의 prototype에는 Bridge의 인스턴스를 할당
var Rectangle = function (width, height) { this.width = width; this.height = height; }; Rectangle.prototype.getArea = function () { return this.width * this.height; }; var Square = function (width) { Rectangle.call(this, width, width); }; var Bridge = function () {}; //빈 함수 추가 Bridge.prototype = Rectangle.prototype; //빈 함수가 Rectangle.prototype 참조 Square.prototype = new Bridge(); //Square에 Bridge 할당하면 Bridge자리에 Rectangle인 셈 object.freeze(Square.prototype); - ES5에서 도입된 object.create를 이용한 방법
subClass의 prototype의 proto가 superClass의 prototype을 바라보되, superClass의 인스턴스가 되지 않음
//(...생략) Square.prototype = object.create(Rectangle.prototype); //Square: subClass, Rectangle: superClass Object.freeze(Square.prototype); //(...생략)
7-3-3 constructor 복구하기
- 세 가지 방법 모두 subClass 인스턴스의 constructor는 여전이 superClass를 가리키는 상태
- subClass의 인스턴스가 프로토타입 체인상 가장 먼저 등장하는 superClass.prototype의 constructor에서 가리키는 대상, 즉 superClass가 출력되는 것
- subClass.prototype.constructor가 원래의 subClass를 바라보도록 해주는 것
// 인스턴스 생성 후 프로퍼티 제거 var extendClass1 = function (SuperClass, SubClass, subMethods) { SubClass.prototype = new SuperClass(); for (var prop in SubClass.prototype) P{ if (SubClass.prototype.hasOwnProperty(prop)) { delete SubClass.prototype[prop]; } } SubClass.prototype.constructor = SubClass; if (subMethods) { for(var method in subMethods) { SubClass.prototype[method] = subMethods[method]; } } Object.freeze(SubClass.prototype); retrun SubClass; };//빈 함수 활용 var extendClass2 = (function () { var Bridge = function () P{; return function (SuperClass, SubClass, subMethods) { Bridge.prototype = SuperClass.prototype; SubClass.prototype = new Bridge(); SubClass.prototype.constructor = SubClass; Bridge.prototype.constructor = SuperClass; //SubClass.prototype이 SuperClass 바라보도록! if (subMethods) { for (var method in subMethods) { SubClass.prototype[method] = subMethods[method]; } } Object.freeze(SubClass.prototype); return SubClass; }; })// Object.create 활용 var extendClass3 = function (SuperClass, SubClass, subMethods){ SubClass.prototype = Object.create(SuperClass.prototype); SubClass.prototype.constructor = SubClass; if (subMethods) { for (var method in subMethods) { SubClass.prototype[method] = subMethods[method[; } } Object.freeze(SubClass.prototype); return SubClass; };7-3-4 상위 클래스에서의 접근 수단 제공 어렵게 느껴진다면 건너뛰어도 무방^^!(저자가 구현한 것) 하위 클래스에서 상위 클래스의 프로토타입 메서드에 접근하기 위한 별도의 수단인 super 흉내내기
// 생략 SubClass.prototype.super = function (propName) { var self = this; if (!propName) return function () { SuperClass.apply(self, arguments); } var prop = SuperClass.prototype[propName]; if (typeof prop !== 'function') return prop; return function () { return prop.apply(self, arguments); } }; - SuperClass 생성자 함수에 접근하고자 할 때: this.super()
- SuperClass 프로토타입 메서드에 접근하조가 할 때: this.super(propName)
OHKuenYoung
eunzy38
study 완료 후 체크 부탁드립니다.