Javascript Visualized: Prototypal Inheritance

■ Prototypal Inheritance

우리가 생성자 함수를 만들면 생성자 함수 뿐만 아니라, prototype이라는 별도의 객체가 하나 더 생성된다.

이 prototype이라는 객체는 기본적으로 원본 생성자 함수를 참조하는 'constructor' 프로퍼티를 가지고 있다.

constructor 프로퍼티는 기본적으로 non-enumerable, 즉 객체 프로퍼티에 접근하려할 때 표시되지 않는다.

Object.keys에도 non-enumerable 프로퍼티는 반환되지 않음.

__proto__는 prototype 객체를 참조한다.

생성자의 각 인스턴스들은 생성자의 prototype에 접근할 수 있고, 그것이 prototypal inheritance이다.

 

간단한 예를 들자면, Dog라는 객체의 인스턴스인 dog1 객체를 생성했다고 치자.

그러면 dog1.__proto__는 생성자 함수의 프로토타입인 Dog.prototype을 가리키고,

Dog.prototype.__proto__는 Object.prototype을 가리킨다.

(Dog.prototype 역시 객체이므로 Object 생성자 함수의 인스턴스이다.)

 

인스턴스를 매번 새로 생성할 때마다 프로퍼티나 메서드들도 계속해서 새로 만들어서 메모리를 잡아먹을 필요가 없다.

Prototype에다가 추가해주면 모든 인스턴스에서 동일한 하나의 프로퍼티 혹은 메서드를 참조할 수 있다.

 

인스턴스에서 특정 프로퍼티에 접근하려고 하면,

자바스크립트 엔진은 맨 처음에 해당 객체 자체에서 그 프로퍼티를 찾는다.

만약 접근하려는 프로퍼티를 그 객체에서 못 찾으면,

엔진은 __proto__ 프로퍼티를 통해 prototype chain을 타고 가면서 해당 프로퍼티를 찾게 된다.

우리가 애용하는 built-in method들은 모두 prototype chain에 존재하던 것.

Prototype chain은 영원히 이어지지 않는다.

Object.prototype은 prototype(__proto__)이 null이므로, 거기서 연결이 끊어진다.

ES6에서는 class를 통해 보다 더 쉽게 생성자와 프로토타입 기능을 사용할 수 있다.

class의 생성자 함수는 ES5 문법의 생성자 함수와 동일.

프로토타입에 추가했던 프로퍼티나 메서드들은 class의 body에 추가.

extends를 통해 확장도 쉽게 가능.

'class Chihuahua extends Dog'이라고 하면, Chihuahua의 인스턴스는

Chihuahua.prototype과 Dog.prototype, 추가로 Object.prototype까지 접근이 가능하다.

 

Prototype을 특정 객체에 추가하는 또 다른 방법은 Object.create를 사용하는 것.

새로운 객체를 생성하되, 해당 객체의 prototype을 정확하게 지정해줄 수가 있다.

🎉👨‍👩‍👧‍👧 JavaScript Visualized: Prototypal Inheritance