JavaScript Prototype

오픈소스·2020년 12월 29일
0
post-thumbnail

https://wikibook.co.kr/mjs/ 책은 JavaScript 엔진의 내부 슬롯과 함께, Prototype을 설명합니다.
이 책에 나오는 코드와 그림을 기반으로, 제가 궁금한 부분을 추가하여 작성하였습니다.

JavaScript 모든 객체는 [[Prototype]] 이라는 내부 슬롯을 가지고 있으며, [[Prototype]] 내부 슬롯에는 직접 접근할 수 없지만, __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입, 즉 자신의 [[Prototype]] 내부 슬롯이 가리키는 프로토타입에 간접적으로 접근할 수 있다.

const person = { name: 'Lee' };

console.log(person.hasOwnProperty('__proto__')); // false

console.log(Object.getOwnPropertyDescriptor(Object.prototype, '__proto__'));
// {enumerable: false, configurable: true, get: ƒ, set: ƒ}

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

function Person(prop) {
  this.instanceProp = prop;
  this.instanceMethod = function () {
    console.log(`instanceMethod, ${this.instanceProp}`);
  };
}

Person.prototype.prototypeMethod = function () {
  console.log(`prototypeMethod, ${this.instanceProp}`);
}

Person.staticProp = 'static prop';
Person.staticMethod = function () {
  console.log('staticMethod');
}

const me = new Person('Lee');

class Animal {
  constructor(age, weight) {
    this.age = age;
    this.weight = weight;
  }
  
  eat() { return 'eat'; }
  
  move() { return 'move'; }
}

class Bird extends Animal {
  fly() { return 'fly'; }
}

const bird = new Bird(1, 5);


// 인스턴스의 프로토타입 체인
console.log(bird.__proto__ === Bird.prototype); // true
console.log(Bird.prototype.__proto__ === Animal.prototype); // true
console.log(Animal.prototype.__proto__ === Object.prototype); // true

// 클래스의 프로토타입 체인
console.log(Bird.__proto__ === Animal); // true
console.log(Animal.__proto__ === Function.prototype); // true
console.log(Function.prototype.__proto__ === Object.prototype); // true

console.log(Object.prototype.__proto__); // null

0개의 댓글