Prototype Chain

박성진·2021년 4월 10일

Prototype

자바스크립트의 모든 객체는 부모 객체를 가지고 있으며 연결되어 있는데 이 때 부모 객체를 Prototype이라고 합니다. 이로 인해 객체지향 프로그래밍의 상속 개념과 같이 부모 객체의 프로퍼티와 메서드를 사용할 수 있습니다.

`proto`

객체를 생성하면 동시에 객체에는 __proto__ 이라는 것이 생성됩니다. 따라서 모든 객체는 내부 property__proto__를 가지고 있습니다.
__proto__은 부모 함수의 Prototype을 바라봅니다.
객체의 __proto__ property는 그 객체에 상속을 해 준 부모 객체를 가리킵니다. 그리고 객체는 __proto__가 가리키는 부모 객체의 property를 사용할 수 있습니다. 이 특징을 이용하여 Prototype Chain이 가능합니다.
Prototype Chaining이란 자바스크립트 엔진이 어떤 프로퍼티나 메서드에 접근하려고 할 때 해당 객체에 찾는 프로퍼티나 메서드가 없다면 __proto__가 가리키는 링크를 따라 부모 객체의 프로퍼티나 메서드를 차례대로 올라가며 찾아보는 것을 의미합니다. 체인의 종점은 Object.prototype입니다.

Constructor

Constructor는 어떠한 객체를 생성하는 '생성자 함수'이며, 첫 글자는 대문자로 시작합니다. 생성자 함수도 객체이므로 __proto__ property를 가치고 있습니다.
생성자 함수로 만들어낸 객체는 instance를 흉내 냅니다. instance를 흉내 낸 객체는 함수가 아니므로 prototype가 없습니다.

Object.create()

Object.create 첫번째 인자로 들어가는 Prototype객체를 바탕으로 Prototype를 만든다.

var Animal = function Animal(){}

Animal.prototype.eat = function() {
  console.log('먹는중')
}

var Dog = function Dog(){}

Dog.prototype = Object.create(Animal.prototype);
let dog1 = new Dog();
Dog.prototype.sound = function() {
  console.log('왈왈')
}

dog1.sound() // output: '왈왈'
dog1.eat()  // output: '먹는중'
// 이렇게하면 dog1이 자신의 __proto__인 Dog.prototype의 메소드를 사용할 수 있을 뿐더러 Object.create()를
//사용하여 Dog.prototype에 Animal.prototype의 복사본의 메소드를 사용할 수 있게 해두었기때문에 Animal의
//메소드인 eat까지 사용할 수 있게 됩니다.

하지만 Object.create()의 문제점은 dog1.__proto__을 했을 때 Dog가 나와야 하는데 Animal이 나옵니다.
왜냐하면 Object.create()를 사용하여 copy한 것의 constructor이 Animal을 바라보고 있기 때문입니다.
따라서 Dog.prototype.constructor = Dog; 이런식으로 다시 constructor을 다시 설정해주어야합니다.

extends 와 super

// Person 이라는 class를 만들고
class Person {
    constructor(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
    }

    whoAmI() {
        console.log(`저는${this.age}살 ${this.name}이고 직업은 ${this.job}입니다.`)
    }
}

class Tom extends Person {}
// extends를 사용하면 Tom이라는 class가 Person의 메소드나 속성을 가져다가 사용할 수 있습니다.

const tom = new Tom('tom', 20, '교사');
tom.whoAmI(); // output: 저는20살 tom이고 직업은 교사입니다.
// tom이라는 인스턴스를 만들어 Person의 whoAmI라는 함수를 실행할 수 있습니다

class Jamie extends Person {
    whoAmI() {
        super.whoAmI(); // super를 사용하면 부모객체의 메소드를 사용할 수 있습니다.
        console.log('취미는 수영입니다'); // 부모객체 메소드를 사용하고 추가로 작성할 수 있습니다.
    }
}

const jamie = new Jamie('jamie', 24, '비서');
jamie.whoAmI(); // output: 저는24살 jamie이고 직업은 비서입니다.
                         //취미는 수영입니다

정리

Person 이라는 생성자 함수를 생성하면 prototype(동시에 생성된 Person.prototype 객체를 가리킨다)을 속성으로 갖고
함수를 생성함과 동시에 Person.prototype 라는 객체가 만들어지고 그 객체는 constructor(Person 생성자 함수를 가리킨다.)이라는 속성을 가지게 된다.
kim이라는 인스턴스객체를 만들게 되면 __proto__(Person.prototype를 가리킨다.)이라는 속성을 가지게 된다.
결국 최상위 객체는 Object이다.