😮 프로토타입 ( prototype )

해당 포스트는 모던 자바스크립트 Deep Dive 19장을 읽고 정리하는 포스트입니다.

🧐 프로토타입

제가 이해한 프로토타입이란 생성자 함수의 참조와 상위 프로토타입의 참조와 공유할 프로퍼티/메서드들을 가지는 객체입니다.

1. 예시 코드

// 생성자 함수 ( 겉으로는 일반 함수와 다를거 없음 )
// 관습적으로 카멜케이스를 사용하고, 호출할 때 반드시 new를 사용하는 것을 제외하면 일반 함수와 동일함
function Animal(cry) {
  this.cry = cry;

  // 비효율적인 방법 ( 생성하는 객체들 각각이 "say()"라는 메서드를 가짐 )
  // this.say = () => console.log("대충 동물 소리 >> ", this.cry);
}

// 생성하는 객체들이 "say()"라는 메서드를 공유함 ( * 화살표 함수 사용하면 this가 잘못된 값을 가리킴 * )
Animal.prototype.say = function () {
  console.log("대충 동물 소리 >> ", this.cry);
};

// 정적(static) 메서드 정의 ( 객체가 가지는 값 사용 불가능 ex) this.cry )
Animal.sleep = () => console.log("잔다");

// 객체 생성
const dog = new Animal("멍멍");

// 프로토타입 체인을 이용해서 찾은 메서드 사용 ( dog --- [[Prototype]] ---> Animal.prototype )
dog.say();

// 정적 메서드 사용 ( 객체에서 호출 불가능 )
Animal.sleep();

// dog.__proto__ === Animal.prototype
console.log(Object.getPrototypeOf(dog) === Animal.prototype); // true
// dog.__proto__.__proto__ === Object.prototype
console.log(Object.getPrototypeOf(Object.getPrototypeOf(dog)) === Object.prototype); // true
// dog.__proto__.__proto__.__proto__ === null ... 프로토타입 체인의 종점

2. 예시 코드의 프로토타입 체인

👏 추가 정보들

1. 생성자 함수로 사용이 불가능한 함수 즉, non-constructor함수는 화살표 함수, es6 문법을 사용한 메서드, 프로토타입의 메서드(위 예시에서는 say()) 들을 말한다.
   non-constructor함수는 prototype자체를 생성하지 않으며, new 연산자 자체를 사용할 수 없다.
2. __proto__를 사용하는 것보단 Object.getPrototypeOf()와 Object.setPrototypeOf()를 사용하는 것이 좋다.
3. 프로토타입 체인의 종점까지 가서도 프로퍼티/메서드를 찾지 못하면 에러가 나는 것이 아니라 undefined를 반환한다.
4. 객체에서 프로토타입 메서드를 제거할 수는 없다. 즉, 하위에서 상위를 수정할 수는 없다. ( getter 가능, setter 불가능 )
5. 생성자 함수와 객체의 prototype은 임의로 교체할 수 있다. ( dog.__proto__ = {}처럼 사용 가능 )
6. instanceOf는 어떤 생성자 함수로 인해서 생성된 객체인지에 의해서 판단되는 것이 아니라 프로토타입 체인에 존재하는지 유무로 판단한다.