프로토타입

 

프로토타입은 비유하자면 생명체의 유전자와 비슷하다는 개념을 가지고 접근하면 이해가 쉽습니다.

 

상속과 프로토타입

 

상속(inheritance)은 객체지향 프로그래밍의 핵심 개념으로, 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말합니다.

 

자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거합니다.

 

// 생성자 함수
function Cookie(chocolate) {
  this.chocolate = chocolate;
}

// 프로토타입 추가
Cookie.prototype.addChocolate = function () {
  return 'Cookie with ' + this.chocolate + ' Chocolates';
}

// 인스턴스 생성
const cookie26 = new Cookie(26);
const cookie94 = new Cookie(94);

console.log(cookie26.addChocolate()); // Cookie with 26 Chocolates
console.log(cookie94.addChocolate()); // Cookie with 94 Chocolates

 

Cookie 생성자 함수가 생성한 모든 인스턴스가 addChocolate 메서드를 공유해서 사용할 수 있도록 프로토타입에 추가합니다.

프로토타입은 Cookie 생성자 함수의 프로토타입 프로퍼티에 바인딩되어 있으며 인스턴스에 상속할 수 있습니다.

 

 

프로토타입 객체란 객체지향 프로그래밍의 근간을 이루는 객체 간 상속을 구현하기 위해 사용됩니다.

 

프로토타입은 어떤 객체의 상위 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티를 제공하며 프로토타입을 상속받은 하위 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용할 수 있습니다.

 

 

프로토타입 체인

 

function Cookie(chocolate) {
  this.chocolate = chocolate;
}

Cookie.prototype.addChocolate = function () {
  return 'Cookie with ' + this.chocolate + ' Chocolates';
}

const cookie26 = new Cookie(26);

console.log(cookie26.hasOwnProperty('chocolate')); // true

 

Cookie 생성자 함수에 의해 생성된 cookie2 객체는 Object.prototype의 메서드인 hasOwnProperty를 호출할 수 있습니다.

이것은 cookie26 객체가 Cookie.prototype 뿐만 아니라 Object.prototype도 상속받았다는 것을 의미합니다.

 

자바스크립트는 객체의 프로퍼티에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없다면 [[Prototype]] 내부 슬롯의 참조를 따라 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색합니다.

이를 프로토타입 체인이라 합니다.

 

 

instanceof 연산자

 

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

const best = new Icecream('Rainbow Sherbet');

console.log(best instanceof Icecream); // true
console.log(best instanceof Object); // true

 

우변의 생성자 함수의 프로토타입에 바인딩된 객체가 좌변의 객체의 프로토타입 체인 상에 존재하면 true로 평가되고, 그렇지 않으면 false로 평가됩니다.

또, 우변의 피연산자가 함수가 아닌 경우 TypeError가 발생합니다.

 

 

프로퍼티 존재 확인

 

const me = {
  name: 'Iltae'
}

console.log('name' in me); // true
console.log('age' in me); // false

console.log('toString' in me); // true

console.log(me.hasOwnProperty('name')); // true
console.log(me.hasOwnProperty('age')); // false

console.log(me.hasOwnProperty('toString')); // false

 

in 연산자와 Object.prototype.hasOwnproperty 메서드를 사용해 객체에 특정 프로퍼티가 존재하는지 확인할 수 있습니다.

하지만 상속받은 프로퍼티의 경우 다르게 반환합니다.