JS는 프로토타입 기반 언어이다.

클래스 기반 언어에서는 ‘상속’을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형(prototype)으로 삼고, 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻는다.

1. 생성자 함수를 new 연산자와 함께 호출하면
2. 생성자에서 정의된 내용을 바탕으로 새 인스턴스가 생성된다.
3. instance에서는 proto 라는 프로퍼티가 자동으로 부여된다.
4. 이 프로퍼티는 Constructor의 prototype이라는 프로퍼티를 참조한다.

prototype이라는 프로퍼티와 proto 라는 프로퍼티는 객체다.

prototype 객체 내부는 인스턴스가 사용하는 메소드를 저장한다.

인스턴스의 proto를 통해 이 메소드들에 접근하게 된다.

하지만 proto는 생략가능하다.

때문에 생성자 함수의 prototype에 어떤 메소드나 프로퍼티가 있으면 인스턴스에서도 마치 자신의 것처럼 해당 메소드나 프로퍼티에 접근할 수 있게 된다.

생성자 함수의 프로퍼티인 prototype 객체 내부는 constructor라는 프로퍼티가 있다. (proto 내부에도 있다.)

constructor는 원래의 생성자 함수(자기 자신)를 참조한다.

그런데 constructor는 값을 바꿀 수 있다. 하지만 이미 만들어진 인스턴스의 constructor가 바뀌거나, 데이터의 타입이 바뀌는 것은 아니다.

메소드 오버라이드

var Person = function (name) {
    this.name = name;
};

Person.prototype.getName = function () {
    return this.name;
};

var iu = new Person("지금");

iu.getName = function () {
    return "바로 " + this.name;
};

console.log(iu.getName());

Person의 prototype에 getName이 있지만 인스턴스의 getName이 정의됐기 때문에 인스턴스의 getName이 호출됐다.

Person의 getName을 호출하려면 이렇게 하면 된다.

console.log(iu.__proto__.getName.call(iu));

프로토타입 체이닝

var arr = [1, 2];

arr.__proto__.push(3);
console.log(arr.__proto__.__proto__.hasOwnProperty(2));

proto 내부의 proto가 연쇄적으로 이어진 걸 프로토타입 체인, 이 체인을 따라가며 검색을 프로토타입 체이닝이라고 한다.

정리

어떤 생성자 함수를 new 연산자와 함께 호출하면 Constructor에서 정의된 걸 바탕으로 새로운 인스턴스가 생성된다.

이 인스턴스에는 proto라는, Constructor의 prototype 프로퍼티를 참조하는 프로퍼티가 자동으로 부여된다.

proto는 생략 가능한 속성이다. 그래서 인스턴스는 Constructor의 prototype 메소드를 자기 것마냥 호출할 수 있다.

Constructor.protytpe은 constructor 프로퍼티를 갖고 있다. 이는 생성자 함수를 가리킨다.

이 프로퍼티는 인스턴스가 자신의 생성자 함수가 무엇인지 알려할 때 필요하다.

proto를 계속 찾아가면 최종적으로 Object.prototype에 당도하게 된다. 이런 방식을 프로토타입 체이닝이라 부르며 이걸 통해 각 프로토타입 메소드를 자기 것마냥 호출할 수 있다.

접근 방식은 자신으로부터 가장 가까운 대상부터 점차 먼 대상으로 나아간다. 원하는 값을 찾으면 검색을 중단한다.

프로토타입 체인은 2단계로만 이뤄지는 것이 아니고, 무한대로 생성할 수 있다.

Refer - 코어 자바스크립트