객체 (Objects) - 프로토타입 (Prototype)

Javascript는 클래스 스타일의 상속 모델을 사용하지 않고 프로토타입 스타일의 상속 모델을 사용합니다.

프로토타입 스타일의 상속 모델의 특징중 하나는 프로토타입 체인을 이용해 상속을 구현한다는 점입니다.

function Monkey() {

this.value = 10;

}

Monkey.prototype = {

method: function () { }

};

function Animal() { }

// Monkey의 인스턴스를 만들어 Animal의 prototype에 할당합니다.

Monkey.prototype = new Monkey();

Animal.prototype.monkey = 'Hello Monkey';

// Animal 함수를 생성자로 만들고

Animal.prototype.constructor = Animal;

var test = new Animal() // Animal 인스턴스를 만듭니다.

// 결과적으로 만들어진 프로토타입 체인은 다음과 같습니다.

test[instance of Animal]

Animal.prototype[instance of Monkey]

{ monkey: 'Hello Monkey' }

Monkey.prototype

{ method: ... }

Object.prototype

{ toString: ... /* etc. */ }

// Monkey.prototype = Monkey.prototype은 두 객체가 하나의 프로토타입을 공유하는 것입니다.

// 그래서, 한 객체의 프로토타입을 변경하면 그 프로토타입 객체를 사용하는 다른 객체도 영향을 받습니다.

// 따라서, 대부분의 경우 프로토타입을 변경하지는 않습니다.

위 코드에서 test 객체는 Monkey.prototype과 Animal.prototype을 둘 다 상속받았기 때문에 Monkey에서 정의한 method에 접근할 수 있습니다. 그리고, 프로토타입 체인에 있는 Monkey 인스턴스의 value 프로퍼티도 사용할 수 있습니다. new Animal()을 해도 Monkey인스턴스는 새로 만들어지지 않고 Animal의 prototype에 있는것을 재사용합니다. 그래서, 모든  Animal인스턴스는 같은 value 프로퍼티를 공유합니다.

Animal.prototype = Monkey라고 하는 것은 Monkey의 prototype을 가리키는 것이 아니라 Monkey라는 Function의 prototype을 가리키는 것입니다. 그래서 프로토타입 체인에 Monkey.prototype대신 Function.prototype이 들어가 있기 때문에 method프로퍼티는 찾지 못합니다.

프로퍼티 탐색 (Property Lookup)

객체의 프로퍼티에 접근하려고 하면 Javascript는 해당 이름의 프로퍼티를 찾을 때까지 프로토타입 체인을 거슬러 올라가면서 탐색하게 됩니다.

프로토타입 체인을 끝까지 탐색하였지만 원하는 프로퍼티를 찾지 못하는 경우에는 undefined로 반환합니다

프로토타입 프로퍼티 (The Prototype Property)

프로토타입 프로퍼티는 프로토타입 체인을 만드는 데 사용하고 어떤 값이든 할당할 수 있지만, primitive 값이 할당되면 무시하고 객체를 할당하면 프로토타입 체인이 동적으로 만들어집니다.

function Monkey() { }

Monkey.prototype = 1; // 무시됨

License

이 게시글은 JavaScript Garden을 참고하여 작성 되었습니다. (https://github.com/BonsaiDen/JavaScript-Garden)