Prototype & Prototype Chain

DOM을 기억해보자

DOM(Document Object Model)의 사용을 기억해 보면 이런 형태로 많이 사용을 해왔다.

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

당시에는 여기서 쓰이는 document가 낯설게 느껴졌다. 하지만 OOP를 공부하고 있는 지금 다시 이 부분을 복기해보면 저 한 줄은 document클래스를 통해 myDiv라는 인스턴스를 생성하고, 그것을 통해 createElement라는 메소드를 사용하고 있다는 것을 파악할 수 있다. 각 웹페이지가 로딩될 때, document 인스턴스가 만들어지고, 전체 웹 페이지 구조와 컨텐츠 그리고 URL같은 기능등을 제공하는 document가 호출된다. 이 document인스턴스를 통해 여러 메소드와 프로퍼티들을 사용할 수 있는 것이었다. 이제 큰 그림이 조금 더 잘 보이는 것 같다.

prototype chain

자바스크립트는 흔히 프로토타입 기반 언어(prototype-based language)라고 불린다. 모든 객체들이 메소드와 속성들을 상속받기 위한 템플릿으로써 프로토타입 객체를 가지고 있고, 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속받을 수 있는 구조로 이루어져 있다. 이를 프로토타입 체인(prototype chain)이라 부른다. MDN참조

Prototype

function Person(name) { //생성자(constructor) 함수, 생성자 함수의 상위 프로토타입 객체는 Object이다.
  this.name = name
}

Person.prototype.sleep = function() {};

var person1 = new Person('steve');

여기서 person1의 프로토타입은 생성자 함수인 Person()이 된다. 콘솔창에 person.을 입력하면 자동원성으로 여러 메소드들이 나오는데, 이것은 person1이 프로토타입의 메소드를 상속하고 있기 때문이다. 생성자 함수인 Person()의 상위 프로토타입 객체는 Object이다. 우리가 객체를 다루기 위해 사용하는 대부분의 메소드들은 Object에에 있는 메소드들이다. 이 메소드는 모든 객체, 그러니까 당연히 우리가 방금 생성한 person1에서도 사용이 가능하다.

MDN에서는 여기서 한 술 더 나아가 상위 프로토타입의 메소드를 사용했을 때 실행되는 과정도 설명해주고 있다.

person1에 원시값을 반환해주는 valueOf() 메소드를 사용하면 어떻게 될까?

person1.valueOf() //원시값을 반환해주는 메소드

결과는 호출된 객체를 그대로 반환해 주는 것이다. 그러나 이 경우에 브라우저가 작동하는 순서는 다음과 같다.

1. person1에 valueOf() 메소드가 있는지 확인한다.
2. 없으면 상위 person1의 프로토타입 객체(Person() 생성자의 프로토타입)에서 찾는다.
3. 마지막으로 Person() 생성자의 프로토타입 객체의 프로토타입 객체(Object() 생성자의 프로토타입)에 valueOf 메소드를 가지고 있는지 체크한다. Object에는 valueOf가 있으므로 호출하며 끝난다.

여기서 확인할 수 있는 점은, 프로토타입 체인에서 한 객체의 메소드와 속성들이 다른 객체로 복사 되는 것이 아니라, 위와 같이 체인을 타고 접근한다는 점이다.

String.prototype
Date.prototype
Number.prototype
Array.prototype

이 객체들의 prototype을 콘솔창에 찾아보면 우리가 지금까지 배워왔던 많은 메소드들이 각 객체에 저장되어 있는 것을 볼 수 있다.

proto

var person2 = Object.create(person1);

person2.__proto__ === person1