[리뷰] 프로토타입

JavaScript는 프로토타입 기반 언어이다. 프로토타입(Prototype)은 원형 객체를 의미한다.

 

프로토타입

객체의 특성을 다른 객체로 상속하는 것을 가능하게 하는 매커니즘.

객체를 생성할 때 prototype이라는 속성이 자동으로 생성된다.

객체 자체에 상속되는 것이 아니라 prototype이라는 속성에 부모 객체의 속성과 메소드들이 정의된다.

 

.prototype

프로토타입 속성.

클래스명.prototype.함수를 사용하면 인스턴스 객체가 클래스에 접근이 가능하다.

객체 내부에서 어떤property를 찾는데 없으면 prototype으로 올라가서 property를 찾는다.

 

.__proto__

프로토타입의 객체 내부에 다 내제되어있다. 그 프로토타입을 밖으로 접근하는 접근자속성이다.

함수를 생성하면 .__proto__에 Object가 항상 생성된다.

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sleep() {
    console.log(`${this.name}은 잠에 들었습니다`);
  }
}

let jy = new Human('지영', 24);

Human.prototype.constructor === Human; //true
Human.prototype === jy.__proto__; //true
Human.prototype.sleep === jy.sleep; //true

Array(배열) 클래스와 인스턴스, 그리고 프로토타입의 관계

배열 arr와 Array, 프로토타입의 관계

인스턴스 객체에서 볼 때 클래스는 인스턴스의 부모 객체이자 프로토타입 객체이다.

 

DOM과 프로토타입

let div = document.createElement('div');

div.__proto__ //HTMLDivElement
div.__proto__.__proto__ //HTMLElement
div.__proto__.__proto__.__proto__ //Element
div.__proto__.__proto__.__proto__.__proto__ //Node
div.__proto__.__proto__.__proto__.__proto__.__proto__ //EventTarget
div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__ //Object
div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__ //null

Object는 모든 클래스의 조상이며 Object.__proto__는 null이다.

 

프로토타입 체인이 있기 때문에 부모의 부모의 부모의 메서드를 사용할 수 있다