javascript_jquery_basic_3_3a

프로토타입을 통한 공유는 어떻게 동작하는가?

키워드

• Prototype
• __proto__ (ECMAScript 명세는 [[prototype]]로 표기)
• Constructor (ECMAScript 명세는 [[construct]]로 표기)

내부 구현

1. 모든 객체는 __proto__ 객체를 프로퍼티로 갖는다. (내부 참조용으로 사용)
2. 생성자(또는 생성자 함수)는 prototype 객체를 프로퍼티로 갖는다.
3. prototype 객체는 constructor 객체를 프로퍼티로 갖는다.

// 생성자 선언
function Person (name) {
	this.name = name;
};

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

// Person은 어떻게 toString()을 사용이 가능한 것일까?
function Person (name) {
	this.name = name;
};

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

// toString은 Person의 속성이 아니다.
console.log(Person.toString());

Object.toString() 예제
Object.prototype (MDN)

// 인스턴스 생성
function Person (name) {
	this.name = name;
};

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

var person1 = new Person('Lee');
console.log(person1.getName());

new를 이용해 새로운 인스턴스를 생성하게 되면 아래 코드가 내부에서 동작한다.

var person1 = new Person('Lee');

// 엔진 내부에서 하는 일
person1 = {}; // 새로운 객체를 만들고
Person.call(person1, 'myName'); // call 이용해 Person 생성자를 호출(this를 person1로)
person1.__proto__ = Person.prototype; // 프로토타입을 연결한다.

person1.getName(); // 'Lee'

객체생성 및 프로토타입 연결

위 코드가 실행되면 다음과 같은 형태로 프로토타입 체인이 생성된다.

프로토타입 체인의 순환 구조

프로토타입 체이닝

자바스크립트의 모든 객체는 자신의 부모인 prototype 객체를 가리키는 참조링크 형태의 숨겨진 프로퍼티가 있다. ECMAScript에서는 이 링크를 암묵적 링크(implicit link)라고 부르며 이 링크는 모든 객체의 __proto__ 프로퍼티에 저장된다.

자바스크립트의 생성 규칙은 모든 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 prototype 객체를 자신의 __proto__ 프로퍼티로 연결한다.

프로토타입 체이닝이란 특정 객체의 프로퍼티나 메서드에 접근하려고 할 때, 해당 객체에 접근하려는 프로퍼티나 메서드가 없다면 __proto__ 링크를 따라 자신의 부모 역할을 하는 prototype 객체의 프로퍼티를 차례대로 검색하는 것을 말한다. 프로토타입 체이닝을 통해 자신의 프로퍼티뿐만 아니라, 자신의 부모역할을 하는 prototype 객체의 프로퍼티에도 접근이 가능하다.

프로토타입 체인에서 식별자 색인 동작

var a = {
    attr1: 'a'
};

var b = {
    __proto__: a,
    attr2: 'b'
};

var c = {
    __proto__: b,
    attr3: 'c'
};

c.attr1 // 'a'

a에 존재하는 attr1 속성을 검색하는 과정

1. c객체 내부에 attr1 속성을 찾는다. -> 없다.
2. c객체에 __proto__ 속성이 존재하는지 확인한다. -> 있다.
3. c객체의 __proto__ 속성이 참조하는 객체로 이동한다. -> b객체로 이동
4. b객체 내부에 attr1 속성을 찾는다. -> 없다.
5. b객체에 __proto__ 속성이 존재하는지 확인한다. -> 있다.
6. b객체의 __proto__ 속성이 참조하는 객체로 이동한다. -> a객체로 이동
7. a객체 내부에 attr1 속성을 찾는다. -> 있다. 찾은 속성의 값을 리턴한다.

어떤 객체에도 존재하지 않는 attr0 속성을 검색하는 과정

1. a객체 내부에 attr0 속성을 찾는다. -> 없다.
2. a객체에 __proto__ 속성이 존재하는지 확인한다. -> 있다.
3. a객체의 __proto__ 속성이 참조하는 객체로 이동한다. -> Object.prototype로 이동
4. Object.prototype 에서 attr0 속성을 찾는다. -> 없다.
5. Object.prototype 에서 __proto__ 속성을 찾는다. -> 없다.

모든 프로토타입 체인의 끝은 항상 Object.prototype 이다. 그래서 Object.prototype은 __proto__ 속성이 없다. attr0 라는 속성은 프로토타입의 마지막 단계인 Object.prototype에 존재하지 않고 Object.prototype에는 __proto__ 속성이 존재하지 않으니 탐색을 종료하고 undefined를 리턴한다.

무엇을 할 수 있는가?

프로토타입 기반의 객체지향 상속을 구현할 수 있다.
프로토타입 기반의 상속 구현
프로토타입 기반의 상속 구현2
ES6에서 class와 extends를 이용한 상속 구현

무엇을 더 알아야 하는가?

조금 더 우아하게 상속을 구현하는 방법

• 프로토타입 상속을 구현하는 여러가지 방법
• ES6에서 class를 이용한 상속 방법

쉽게 이해하는 자바스크립트 프로토타입 체인