Unit2(ch.2) - 프로토타입 체인

Saeda·2023년 5월 12일
0
post-custom-banner

프로토타입 체인

프로토타입을 상속해서 만들어지는 객체들관의 연관관계

프로토타입 체인의 매커니즘은 다음과 같다.

  1. 객체에서 속성 또는 메서드를 찾습니다.
  2. 해당 객체에서 속성 또는 메서드를 찾지 못한 경우, 객체의 프로토타입으로 이동합니다.
  3. 프로토타입에서 속성 또는 메서드를 찾습니다.
  4. 프로토타입에서 속성 또는 메서드를 찾지 못한 경우, 프로토타입의 프로토타입으로 이동합니다.
  5. 이러한 과정을 반복하여 프로토타입 체인 상위의 프로토타입까지 계속 탐색합니다.
  6. 최종적으로 속성이나 메서드를 찾으면 반환하고, 찾지 못한 경우 undefined를 반환합니다.

예시

// 부모 클래스: Animal
class Animal {
  constructor(name) {
    this.name = name;
  }

  eat() {
    console.log(`${this.name} is eating.`);
  }
}

// 자식 클래스: Cat
class Cat extends Animal {
  meow() {
    console.log(`${this.name} says meow.`);
  }
}

// 인스턴스: lion
let lion = new Cat('Simba');

console.log(lion.__proto__ === Cat.prototype);  // true
console.log(Cat.prototype.__proto__ === Animal.prototype);  // true
console.log(Animal.prototype.__proto__ === Object.prototype);  // true

또 하나 알아야 할것은 바로 Object.prototype이다.

모든 프로토타입 체이닝의 종점으로 Object는 가장 상위 객체이다.(모든 클래스의 조상)
그러면 object.prototype을 사용해서 예시를 확인해보자

예시

// 부모 클래스: Animal
class Animal {
  constructor(name) {
    this.name = name;
  }

  eat() {
    console.log(`${this.name} is eating.`);
  }
}

// 자식 클래스: Cat
class Cat extends Animal {
  meow() {
    console.log(`${this.name} says meow.`);
  }
}

// 인스턴스: lion
let lion = new Cat('Simba');

console.log(lion.__proto__ === Cat.prototype);  // true
console.log(Cat.prototype.__proto__ === Animal.prototype);  // true
console.log(Animal.prototype.__proto__ === Object.prototype);  // true
console.log(Object.prototype.__proto__);  // null

예시를 보면 알겠지만

Object.prototype.__proto__

는 null을 가리키는데, 이는 프로토타입 체인의 끝을 나타낸다.
Why? object는 최상위의 프로토타입이기 때문에 null은 프로토타입 체인의 종점으로서 더 이상의 상위 프로토타입이 없음을 의미하기 때문이다.

profile
우당탕탕 새다의 작은 프론트엔드 일기 ✌🏻
post-custom-banner

0개의 댓글