You Don't know Js
Prototype: 상속 그리고 객체링크
Foo.prototype
Bar.prototype
b1
a1
a2
프로토타입 기반으로 어떻게 상속을 구현???
5.3 프로토타입 에서 상속을 어떻게 구현할 수 있을까?
1. Object.create()로 연결
2. Object.setPrototypeOf 로 [[prototype]] 값 수정 ES6
Object.create(param) 새 객체를 만들며 [[Prototype]] => param을 가르키는 객체를 만듭니다
기본적으로 프로토타입의 객체의 프로토타입은
Object를 가르키고 있을 텐데
이를 연결시켜서 값을 위와 같이 프로토타입 객체를 가르키도록 수정
Object.setPrototypeOf(Bar.prototype, Foo.prototype)Bar.prototype = Object.create(Foo.prototype)책의 예제를 살펴보면 P129
P.O
Function
Instance
constructor
prototype
[[prototype]]
P130 맨 아래 이렇게 연결 하면 안되나?
Bar.prototype = Foo.prototype
//에 바로 연결하면 안되나?
//이렇게 되면 ref만 참조할 뿐
Bar.prototype = new Foo();
//이렇게 있는 방법은 생성자 함수를 호출할 때 부수효과가 있을 수 있으므로 Error :D 1. 같은 방식을 공유하기 때문에 같은 이름을 쓰는
메소드 오버라이드 혹은 무거워질 수 있다
2. foo생성자함수에서 다른 일 처리를 한다면 +
인스턴스를 가르키므로 인스터스 프로퍼티도 가지게 된다
P132
수미상관
1. Object.create()로 연결하거나
2. Object.setPrototypeOf()로 연결하거나
5.3.1 클래스 관계 조사
객체 지향 언어에서는 클래스-인스턴스와 관계를
조사하는 것을 인트로 스펙션(리플렉션) 이라 한다.
어떻게 계통을 확인 할 수 있을까?
P 132 a Instanceof F
//object instanceof constructor
function Foo(){
//
}
Foo.prototype.blah = ...;
a instanceof Foo //인스턴스- 생성자함수
[[Prototype]]
P.O
Function
I.O
constructor
prototype
[[prototype]]
.prototype이 붙은 것만 확인 할 수 있다.
P 132 a Instanceof F
//object instanceof constructor
var superProto = {
// some super properties
}
var subProto = Object.create(superProto);
subProto.someProp = 5;
var sub = Object.create(subProto);
console.log(superProto.isPrototypeOf(sub)); // true
console.log(sub instanceof superProto); Constructor 기반 없이 Prototype연결
console.log(sub instanceof superProto); P 133 예제
function isRelatedTo(o1, o2) {
function F(){}
F.prototype = o2;
return o1 instanceof F;
}
var a = {};
var b = Object.create( a );
isRelatedTo( b, a ); // true/프로토타입으로 연결이 되어 있는지
P.O
Function
I.O
constructor
prototype
[[prototype]]
생성자 기반 없이 프로토타입이 연결되어 있는 객체들 체크
P 132 a Instanceof F
//object instanceof constructor
var superProto = {
// some super properties
}
var subProto = Object.create(superProto);
subProto.someProp = 5;
var sub = Object.create(subProto);
console.log(superProto.isPrototypeOf(sub)); // true
console.log(sub instanceof superProto); Foo.prototype.isPrototypeOf(a)
superProto.isPrototypeOf(sub)
ES5 Object.getPrototypeOf(a) get
P 134 [[Prototype]] get, set
비표준/대부분 브라우저 지원 __proto__
프로토타입
체이닝 관찰할 떄 유용
P 135 [[Prototype]] get, set
Object.defineProperty( Object.prototype, "__proto__", {
get: function() {
return Object.getPrototypeOf( this );
},
set: function(o) {
// setPrototypeOf(..) as of ES6
Object.setPrototypeOf( this, o );
return o;
}
} );객체의 [[prototype]]는 되도록 변경 하지 말자
setPrototype은 되도록 사용 자제
5.4 객체 링크 P 136
프로토타입 체인
[[prototype]]에 연결된 객체를 하나씩 따라가면 찾는 과정
프로퍼티가 나올 때까지 같은 과정을 되풀이 한다.
5.4.1 링크생성
var foo = {
something: function() {
console.log( "Tell me something good..." );
}
};
var bar = Object.create( foo );
bar.something(); // Tell me something good...Object.create()
Constructor/ function 없이 [[Prototype]]위임 :D
* Object.create(null)로 만들어진 객체는 Dictionary라고 칭하며
prototype연결 없는 순수하게 프로퍼티 데이터 저장소 역할을 함
if (!Object.create) {
Object.create = function(o) {
function F(){}
F.prototype = o;
return new F();
};
}Object.create() 추가 기능
var anotherObject = {
a: 2
};
var myObject = Object.create( anotherObject, {
b: {
enumerable: false,
writable: true,
configurable: false,
value: 3
},
c: {
enumerable: true,
writable: false,
configurable: false,
value: 4
}
} );
myObject.hasOwnProperty( "a" ); // false
myObject.hasOwnProperty( "b" ); // true
myObject.hasOwnProperty( "c" ); // true
myObject.a; // 2
myObject.b; // 3
myObject.c; // 4Object.create()
100% 지원 안 하는 폴리필 대신에
연결 기능만 만들어써라 하는 데도 있다.
function createAndLinkObject(o) {
function F(){}
F.prototype = o;
return new F();
}
var anotherObject = {
a: 2
};
var myObject = createAndLinkObject( anotherObject );
myObject.a; // 2이런식으로 연결 하면 유지 보수가 힘들고
자기가 가지고 있는 프로퍼티 사용 적합한 패턴인지 재고해볼 것
var anotherObject = {
cool: function() {
console.log( "cool!" );
}
};
var myObject = Object.create( anotherObject );
myObject.cool(); // "cool!"5.4.2 연결이 안 됬을 때 대비책 X
실제 존재하는 프로퍼티로 감싸놓는 것이 더 명시적인 API
var anotherObject = {
cool: function() {
console.log( "cool!" );
}
};
var myObject = Object.create( anotherObject );
myObject.doCool = function() {
this.cool(); // internal delegation!
};
myObject.doCool(); // "cool!"5.5 정리하기
1.객체 프로퍼티 접근 -> 프로토타입 체이닝을 통해 프로퍼티 탐색한다.
2. 모든 객체 최종 연쇄 종착지는 Object.prototype인데 여기공용으로 쓰이는 유틸리티들이 정의 되어 있다 .
ToString, valueOf, ...
5.5 정리하기
4. 상속과 유사해보이지만 복사 X reference참조 위임
3. 객체관에 관계 맺기 가장 쉬운 방법 new()
1. 새 객체 {}
2. [[prototype]]연결- Foo.prototype
3. this바인딩
4. return default 만든 객체 (다른 객체를 반환하지 않으면)
상속 [[prototype]] 연결 (
Object.create(), Object.setPrototypeOf())
You Don't know Js
By chany
