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; // 4

Object.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())

 

Made with Slides.com