[디자인 패턴] 프로토타입

출처

https://yceffort.kr/2021/01/nodejs-4-design-pattern#%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85

https://evan-moon.github.io/2019/10/23/js-prototype/

---

프로토타입이란?

프로토타입은 일종의 디자인 패턴 중 하나이다.

자바스크립트 뿐만 아니라 ActionScript, Lua, Perl 등 프로토타입 기반 프로그래밍을 지원하는 다른 언어도 많다.

객체를 효율적으로 생성하는 방법을 다루는 패턴이다.

주로 객체를 생성하는 비용이 클 때 이를 회피하기 위해 사용된다.

객체를 생성할 때 원본이 되는 객체를 복사해서 생성하는 패턴이다.

 

자바스크립트에서 프로토타입이란?

const evan = {
  name: 'Evan',
  age: 29,
  say: function () {
    console.log(`Hi, I am ${this.name}!`);
  }
};

자바스크립트는 애초에 객체를 생성할 때 프로토타입을 사용하기 때문에 객체를 생성하기만해도 프로토타입 패턴이 적용된다.ES5까지의 자바스크립트에서는 클래스 개념이 없기 때문에 함수를 이용하여 객체를 생성한다.

 

* 생성자(Constructor)를 사용하여 객체를 생성

자바 등에서는 Object가 클래스이지만 자바스크립트에서는 함수이다.

const evan = new Object({
  name: 'Evan',
  age: 29,
});

* 함수를 생성할 때 프로토타입 객체가 생성되고 생성된 프로토타입 객체의 생성자와 원래 함수가 연결된다. 

function User() {};

console.log(typeof User);
console.log(typeof User.prototype)
console.log(User.prototype.constructor === User);

* new 키워드를 사용하여 새로운 객체를 만들게 되면 evan() 함수 자체가 아니라 evan() 함수가 생성될 때 함께 생성된 evan() 함수의 프로토타입 객체를 복제해서 새로운 객체를 만든다.

이때 생성된 객체가 자신의 원본 객체에 접근할 수 있는 프로퍼티가 바로 __proto__ 프로퍼티이다.

const evan = new User();
console.log(evan.__proto__.constructor === User); // true
console.log(evan.__proto__.constructor === evan); // false
console.log(evan.__proto__ === User.prototype); // true