Chapter 5: Prototypes - hochan222/Everything-in-JavaScript GitHub Wiki

[Prototype](/hochan222/Everything-in-JavaScript/wiki/Prototype)

프로토타입은 단순하게 다른 객체에 대한 참조이다. 객체에서 이 속성이 생성될때 null이 아닌 값이 주어진다.

기본 Get 작업은 개체에서 요청 된 속성을 직접 찾을 수없는 경우 개체의 Prototype 링크를 따라 진행된다.

var anotherObject = {
	a: 2
};

// create an object linked to `anotherObject`
var myObject = Object.create( anotherObject );

myObject.a; // 2

a가 anotherObject에서 발견되지 않으면 비어있지 않은 경우 Prototype 체인을 다시 참조하고 추적한다. 이 프로세스는 일치하는 속성 이름을 찾거나 Prototype 체인이 끝날 때까지 계속된다.

for in 을 통해서도 확인 가능하다.

var anotherObject = {
	a: 2
};

// create an object linked to `anotherObject`
var myObject = Object.create( anotherObject );

for (var k in myObject) {
	console.log("found: " + k);
}
// found: a

("a" in myObject); // true

Object.prototype

Prototype chain은 정확히 어디서 끝날까?

모든 prototype의 최상위는 Object.prototype이다.

Setting & Shadowing Properties

myObject.foo = "bar";

myObject 개체에 이미 foo라는 일반 데이터 접근자 속성이 존재하는 경우 값의 할당은 기존 속성의 값을 변경하는 것처럼 간단하다. 하지만, foo가 myObject에 직접 존재하지 않는 경우 Get 작업과 마찬가지로 Prototype 체인이 순회된다. 만약 못찾으면 myObject에 직접 추가한다.

foo가 myObject에서나 높은 레벨의 Prototype chain에서 끝날때 쉐도잉이라고 한다. 항상 낮은 레벨에서 찾기때문에 높은 레벨의 모든 foo 속성은 숨겨진다.

var anotherObject = {
	a: 2
};

var myObject = Object.create( anotherObject );

anotherObject.a; // 2
myObject.a; // 2

anotherObject.hasOwnProperty( "a" ); // true
myObject.hasOwnProperty( "a" ); // false

myObject.a++; // oops, implicit shadowing!

anotherObject.a; // 2
myObject.a; // 3

myObject.hasOwnProperty( "a" ); // true

"Class"

사실 자바 스크립트는 "객체 지향"이라는 단어를 사용할 수 있는 몇 안되는 언어일 것이다. 자바 스크립트는 클래스 없이 객체를 직접 생성 할 수있는 매우 짧은 언어이기 때문이다.

"Class" Functions

기본적으로 모든 함수는 프로토타입이라고하는 열거 할 수없는 공개 속성을 얻는데, 다른 객체를 가르킨다.

function Foo() {
	// ...
}

Foo.prototype; // { }

가장 직접적인 설명은 new Few()로 생성한 객체가 이 프로토타입에 연결된다는 것이다.

function Foo() {
	// ...
}

var a = new Foo();

Object.getPrototypeOf( a ) === Foo.prototype; // true

new Foo()를 호출하여 a가 생성 될 때 발생하는 일 중 하나는 Foo.prototype이 가리키는 객체에 대한 내부 Prototype 링크를 얻는 것이다.

클래스 지향 언어에서는 인스턴스화 과정이 '해당 클래스의 행동 계획을 물리적 객체로 복사하는 것'을 의미한다.

그러나 자바스크립트에서는 이런 복사 과정이 수행되지 않는다. 클래스의 여러 인스턴스를 만들지도 않는다. 공통 개체에 Prototype 링크하는 여러 개체를 만든다. 기본적으로 복사가 발생하지 않는다.

우리는 이것을 "prototypal inheritance"이라 부른다. 자바스크립트는 두 객체사이의 링크를 생성한다. 여기서 하나의 객체는 본질적으로 다른 객체에 대한 속성/기능 액세스를 위임 할 수 있다.

"Constructors"

function Foo() {
	// ...
}

var a = new Foo();

Foo가 class라고 생각하는 이유는 무엇인가?

function Foo() {
	// ...
}

Foo.prototype.constructor === Foo; // true

var a = new Foo();
a.constructor === Foo; // true

Constructor Or Call?

function NothingSpecial() {
	console.log( "Don't mind me!" );
}

var a = new NothingSpecial();
// "Don't mind me!"

a; // {}

일반 함수 호출 앞에 new 키워드를 넣으면 해당 함수 호출이 "생성자 호출"이 된다.

Mechanics

function Foo(name) {
	this.name = name;
}

Foo.prototype.myName = function() {
	return this.name;
};

var a = new Foo( "a" );
var b = new Foo( "b" );

a.myName(); // "a"
b.myName(); // "b"

"Constructor" Redux

function Foo() { /* .. */ }

Foo.prototype = { /* .. */ }; // create a new prototype object

var a1 = new Foo();
a1.constructor === Foo; // false!
a1.constructor === Object; // true!

Foo.prototype의 .constructor 속성은 기본적으로 Foo 함수가 선언 될 때 생성 된 객체에만 있다. new로 생성한 객체를 함수의 기본 .prototype 객체 참조를 대체하면 객체는 기본적으로 .constructor를 얻지 않는다.

Misconception, busted.

function Foo() { /* .. */ }

Foo.prototype = { /* .. */ }; // create a new prototype object

// Need to properly "fix" the missing `.constructor`
// property on the new object serving as `Foo.prototype`.
// See Chapter 3 for `defineProperty(..)`.
Object.defineProperty( Foo.prototype, "constructor" , {
	enumerable: false,
	writable: true,
	configurable: true,
	value: Foo    // point `.constructor` at `Foo`
} );

"(Prototypal) Inheritance"

function Foo(name) {
	this.name = name;
}

Foo.prototype.myName = function() {
	return this.name;
};

function Bar(name,label) {
	Foo.call( this, name );
	this.label = label;
}

// here, we make a new `Bar.prototype`
// linked to `Foo.prototype`
Bar.prototype = Object.create( Foo.prototype );

// Beware! Now `Bar.prototype.constructor` is gone,
// and might need to be manually "fixed" if you're
// in the habit of relying on such properties!

Bar.prototype.myLabel = function() {
	return this.label;
};

var a = new Bar( "a", "obj a" );

a.myName(); // "a"
a.myLabel(); // "obj a"

// doesn't work like you want!
Bar.prototype = Foo.prototype;

// works kinda like you want, but with
// side-effects you probably don't want :(
Bar.prototype = new Foo();

// pre-ES6
// throws away default existing `Bar.prototype`
Bar.prototype = Object.create( Foo.prototype );

// ES6+
// modifies existing `Bar.prototype`
Object.setPrototypeOf( Bar.prototype, Foo.prototype );

Inspecting "Class" Relationships

a와 같은 객체가 있고 어떤 객체 (있는 경우)를 위임하는지 확인하려면 어떻게 해야하나?

전통 클라스 지향 환경에서 인스턴스인지 확인하는 것을 introspection (or reflection)이라 한다.

function Foo() {
	// ...
}

Foo.prototype.blah = ...;

var a = new Foo();

a instanceof Foo; // true

a의 전체 Prototype 체인에서 Foo.prototype을 임의로 가리키는 객체가 있는지 instanceof가 조사해준다.

그에대한 스니펫은 다음과 같다.

// helper utility to see if `o1` is
// related to (delegates to) `o2`
function isRelatedTo(o1, o2) {
	function F(){}
	F.prototype = o2;
	return o1 instanceof F;
}

var a = {};
var b = Object.create( a );

isRelatedTo( b, a ); // true

따라서 두개의 인스턴스간에는 instanceof 만으로는 부족할 수 있다.

Foo.prototype.isPrototypeOf( a ); // true

a의 전체 Prototype 체인에서 Foo.prototype이 나타나는지?
instanceof와 동일하다 그러나 유일한 차이점은 두 번째 접근 방식에서는 .prototype 속성이 자동으로 참조되는 함수를 참조하는 간접적인 방법이 필요하지않는다.

// Simply: does `b` appear anywhere in
// `c`s [Prototype](/hochan222/Everything-in-JavaScript/wiki/Prototype) chain?
b.isPrototypeOf( c );

Object.getPrototypeOf( a ) === Foo.prototype; // true

대부분의 브라우저의 내부 Prototype에 액세스하는 비표준 대체 방법도 오랫동안 지원해 왔다.

a.__proto__ === Foo.prototype; // true

proto(ES6까지 표준화되지 않음)는 객체의 내부 Prototype을 참조로 검색한다.

Object.defineProperty( Object.prototype, "__proto__", {
	get: function() {
		return Object.getPrototypeOf( this );
	},
	set: function(o) {
		// setPrototypeOf(..) as of ES6
		Object.setPrototypeOf( this, o );
		return o;
	}
} );

Object Links

Create()ing Links

var foo = {
	something: function() {
		console.log( "Tell me something good..." );
	}
};

var bar = Object.create( foo );

bar.something(); // Tell me something good...

Object.create (..)는 지정한 객체 foo에 연결된 새 객체 bar를 생성하여 Prototype 메커니즘의 모든 권한 (위임)을 제공한다.

Object.create() Polyfilled

Object.create()는 ES5에 추가되었다.

if (!Object.create) {
	Object.create = function(o) {
		function F(){}
		F.prototype = o;
		return new F();
	};
}

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

Links As Fallbacks?

var anotherObject = {
	cool: function() {
		console.log( "cool!" );
	}
};

var myObject = Object.create( anotherObject );

myObject.cool(); // "cool!"

다음과 같이 사용하면 혼란을 가중시킬 수 있다.

ES6에서는 "메서드를 찾을 수 없음" 유형의 동작을 제공할 수있는 프록시라는 고급 기능이 도입되었다. (뒤에서 다룰것)

다음과 같이 사용하자.

var anotherObject = {
	cool: function() {
		console.log( "cool!" );
	}
};

var myObject = Object.create( anotherObject );

myObject.doCool = function() {
	this.cool(); // internal delegation!
};

myObject.doCool(); // "cool!"

Review (TL;DR)

자바스크립트에서 상속 및 OOP 용어들은 무의미하다. 관계들이 복사본이아니라 위임링크이기 때문에 위임이라고 부르는게 적절하다.