프로토타입이란?

자바스크립트는 프로토타입 기반으로, function과 prototype으로 상속을 구현한다.

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function () {
  console.log(this.name + ' makes a noise.');
};

function Dog(name) {
  Animal.call(this, name); // 상속
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

const dog = new Dog('Buddy');
dog.speak(); // Buddy makes a noise.

하지만 이 방법은 클래스 기반 언어(C++, Java 등)에 익숙한 개발자들에게는 복잡하다. 그래서 ES6부터 class 문법이 도입되었다. class 문법은 새로운 객체지향 모델을 제공하는 것이 아니며, 클래스도 사실은 함수이다. 단지 기존 방식을 더 읽기 좋고 쓰기 편하게 바꾼 것일 뿐이다.

프로토타입 객체

자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 한다.

Prototype 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용한다.

let student = {
  name: 'Lee',
  score: 90
};

console.log(student.hasOwnProperty('name')); // true
console.dir(student);

student에는 hasOwnProperty 메소드가 없지만 동작할 수 있는 이유도 student의 프로토타입이 Object이기 때문이다. Object에는 hasOwnProperty 메소드가 있기 때문에 student가 이를 사용할 수 있는 것이다.

constructor 프로퍼티

프로토타입 객체는 constructor 프로퍼티를 갖는다. 이 constructor 프로퍼티는 객체의 입장에서 자신을 생성한 객체를 가리킨다.

예를 들어 Person() 생성자 함수에 의해 생성된 객체를 foo라 하자. 이 foo 객체를 생성한 객체는 Person()생성자 함수이다. 이때 foo 객체 입장에서 자신을 생성한 객체는 Person() 생성자 함수이며, foo 객체의 프로토타입 객체는 Person.prototype이다. 따라서 프로토타입 객체 Person.prototype의 constructor 프로퍼티는 Person() 생성자 함수를 가리킨다.

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

let foo = new Person("Lee");
// Person() 생성자 함수에 의해 생성된 객체를 생성한 객체는 Person() 생성자 함수이다.
console.log(Person.prototype.constructor === Person);

// foo 객체를 생성한 객체는 Person() 생성자 함수이다.
console.log(foo.constructor === Person);

// Person() 생성자 함수를 생성한 객체는 Function() 생성자 함수이다.
console.log(Person.constructor === Function);

• Person.prototype.constructor === Person은 자동으로 설정되어 있다.

자바스크립트의 복잡한 생성&프로토타입 구조

Function을 예시로 생성과 프로토타입 구조에 대해 살펴보려고 한다.

자바스크립트에서 Function은 함수이면서도 생성자 함수 역할도 할 수 있는 객체이다. 아래에 있는 것들이 각각 어떤 것을 의미하는지 알아보자.

Function
Function.__proto__
Function.constructor
Function.prototype
Function.prototype.__proto__
Function.prototype.constructor

---

1. Function

• 자바스크립트에서 함수 생성에 사용되는 내장 생성자 함수
• Function 자체도 함수 객체이다. (typeof Function === 'function')
• 따라서, Function은 함수 객체고, 그 함수 객체를 생성한 것도 Function 생성자 함수니까 결국 Function은 Function의 인스턴스가 되는 것이다. 🤯🤯🤯

console.log(typeof Function); // 'function'
console.log(Function instanceof Function); // true

2. Function.__proto__

• Function.prototype을 가리킨다.
• 왜냐하면, Function 자체는 일단 함수다. 위에서 말했듯이 그 함수 객체를 생성한 것도 Function 생성자 함수니까 Function.prototype을 가리키는 것이다.
  • 위에서 언급했지만 prototype 프로퍼티는 함수 객체가 생성자로 사용될 때 이 함수를 통해 생성될 객체의 부모 역할을 하는 객체를 의미한다.

console.log(Function.__proto__ === Function.prototype); // true

정리하자면, Function은 함수이자 생성자이고, Function 자신을 생성하는 생성자이면서 부모역할도 하는…. 그런 복잡한 구조를 가진 객체라는 것이다.

3. Function.constructor

• Function 객체는 Function 생성자에 의해 생성되었기 때문에 Function을 가리킨다.

console.log(Function.constructor === Function); // true

4. Function.prototype

• 함수로 만들어진 모든 객체가 물려받는 프로토타입 객체
• 모든 함수의 공통 기능이 여기에 들어있다. (call, apply, bind 등)

function foo() {}
console.log(foo.__proto__ === Function.prototype); // true

5. Function.prototype.__proto__

• Function.prototype도 결국은 객체니까, 그 부모인 Object.prototype 을 가리킨다.

console.log(Function.prototype.__proto__ === Object.prototype); // true

6. Function.prototype.constructor

• Function.prototype은 Function 생성자로 만들어졌기 때문에 Function을 가리킨다.

console.log(Function.prototype.constructor === Function); // true

프로토타입 체인

자바스크립트는 특정 객체의 프로퍼티나 메소드에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티 또는 메소드가 없다면 [[Prototype]]이 가리키는 링크를 따라 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례대로 검색한다. 이것을 프로토타입 체인이라 한다.

객체의 프로퍼티에 값을 할당하는 경우, 프로토타입 체인은 동작하지 않는다. 이는 객체에 해당 프로퍼티가 있는 경우, 값을 재할당하고 해당 프로퍼티가 없는 경우는 해당 객체에 프로퍼티를 동적으로 추가하기 때문이다.

// 프로토타입 객체 생성
const grandParent = {
    sayHi: function() {
        console.log("Hi from grandparent!");
    }
};

const parent = Object.create(grandParent); // grandParent를 프로토타입으로 설정
const child = Object.create(parent); // parent를 프로토타입으로 설정

child.sayHi(); // "Hi from grandparent!"

➡️ child 객체에는 sayHi 메소드가 없지만, child → parent → grandParent 순서로 찾아가며 sayHi를 최종적으로 grandParent에서 찾아 호출할 수 있다.

1. 객체 리터럴 & Object() 생성자 함수 방식으로 생성된 객체의 프로토타입 체인

객체 리터럴 방식으로 생성된 객체는 결국 내장 함수(Built-in)인 Object() 생성자 함수로 객체를 생성하는 것을 단순화시킨 것이라고 위에서 언급한 바 있다. Object() 생성자 함수는 물론 함수이다. 따라서 함수 객체인 Object() 생성자 함수는 일반 객체와 달리 prototype 프로퍼티가 있다.

아래 출력 결과를 보면, 객체 리터럴을 사용하여 객체를 생성한 경우 그 객체의 프로토타입 객체는 Object.prototype이다.

let person = {
  name: 'Lee',
  gender: 'male',
  sayHello: function(){
    console.log('Hi! my name is ' + this.name);
  }
};

console.log(person.__proto__ === Object.prototype);   // ① true
console.log(Object.prototype.constructor === Object); // ② true

// Object() 생성자 함수는 Function 객체로부터 상속받기 때문에
console.log(Object.__proto__ === Function.prototype); // ③ true
// Function.prototype은 Object.prototype을 상속하고 있기 때문에
console.log(Function.prototype.__proto__ === Object.prototype); // ④ true

여기서 제일 헷갈리는 개념이 Object는 Function 객체로부터 상속받고, Function. prototype은 Object.prototype으로부터 상속받는다는 것이다. 🤔

조금 헷갈릴 수 있는데, 우선 Object가 Function 객체로부터 상속받는 것을 살펴보자.

Object는 함수 객체이므로(Object 자체가 생성자 함수이기 때문) 기본적으로 Function 객체로부터 상속을 받는다. 따라서 Object.__proto__는 Function.prototype을 가리킨다.

Function.prototype은 함수 객체들의 공통 프로토타입을 제공하는 객체이다. 모든 함수 객체는 Function.prototype을 상속하는데, Function.prototype 자체는 Object.prototype을 상속한다. 즉, Object.prototype에서 기본 메서드(toString(), hasOwnProperty() 등)를 상속받아 사용할 수 있다는 뜻이다.

이 개념을 보고 Object와 Function이 서로 상속하는 것이라고 헷갈리면 안된다!! Object가 Function.prototype을 상속하고, Function.prototype은 Object.prototype을 상속하는 구조인 것이다.

Function과 Object와의 관계 정리

Function (함수)
 ├─ constructor → Function
 ├─ __proto__ → Function.prototype
Function.prototype
 ├─ constructor → Function
 ├─ __proto__ → Object.prototype
Object
 ├─ constructor → Function (생성자 함수로 생성했으므로)
 ├─ __proto__ → Function.prototype
Object.prototype
 └─ __proto__ → null

🤯 이게 가능한 이유는 자바스크립트 엔진이 부트스트랩 과정에서 Function과 Object를 동시에 정의하고 서로를 연결해놓기 때문이다.

1. Object 함수 객체 생성
2. Object.prototype 생성
3. Function 함수 객체 생성
4. Function.prototype 생성
5. 서로 연결
   • Object.__proto__ = Function.prototype
   • Function.__proto__ = Function.prototype
   • Function.prototype.__proto__ = Object.prototype

2. 생성자 함수로 생성된 객체의 프로토타입 체인

생성자 함수로 객체를 생성하는 방식은 결국 Function() 생성자 함수를 통해 함수 객체를 생성한다. 따라서, 어떠한 방식으로 함수 객체를 생성하여도 모든 함수 객체의 prototype 객체는 Function.prototype이다.

function Person(name, gender) {
  this.name = name;
  this.gender = gender;
  this.sayHello = function(){
    console.log('Hi! my name is ' + this.name);
  };
}

let foo = new Person('Lee', 'male');

console.log(foo.__proto__ === Person.prototype);                // ① true
console.log(Person.prototype.__proto__ === Object.prototype);   // ② true
console.log(Person.prototype.constructor === Person);           // ③ true
console.log(Person.__proto__ === Function.prototype);           // ④ true
console.log(Function.prototype.__proto__ === Object.prototype); // ⑤ true

foo 객체의 프로토타입 객체 Person.prototype 객체와 Person() 생성자 함수의 프로토타입 객체인 Function.prototype의 프로토타입 객체는 Object.prototype객체이다.

이는 객체 리터럴 방식이나 생성자 함수 방식이나 결국은 모든 객체의 부모 객체인 Object.prototype 객체에서 프로토타입 체인이 끝나기 때문이다. 이때 Object.prototype객체를 프로토타입 체인의 종점(End of prototype chain)이라 한다. 따라서, 모든 객체는 프로토타입 체인에 의해 Object.prototype 객체의 메소드를 사용할 수 있다.