Javascript 시작하기 - prototype 와 __proto__

자바스크립트에서는 객체 지향 프로그래밍을 지원하기 위해 프로토타입 기반 상속을 사용합니다.
이와 관련된 중요한 개념 중 두 가지가 prototype과 __proto__입니다.
이 두 개념은 비슷해 보이지만, 각각의 역할과 사용 목적이 다릅니다.
다음은 prototype과 __proto__의 차이점과 사용법에 대한 설명입니다.

prototype

• 정의: prototype은 함수(특히 생성자 함수)에만 존재하는 속성입니다. 이는 생성자 함수에 의해 생성된 모든 인스턴스 객체가 공유하는 프로토타입 객체를 가리킵니다.
• 역할: prototype 객체는 생성자 함수로부터 생성된 모든 인스턴스 객체들이 공통으로 사용할 메서드와 속성을 정의하는 데 사용됩니다.
• 사용 예: 생성자 함수의 메서드와 속성을 정의할 때 사용됩니다.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const john = new Person('John', 30);
const jane = new Person('Jane', 25);

john.greet();  // "Hello, my name is John and I am 30 years old."
jane.greet();  // "Hello, my name is Jane and I am 25 years old."

여기서 Person.prototype은 모든 Person 객체가 공통으로 사용하는 메서드 greet를 정의하는 데 사용되었습니다.

__proto__

• 정의: __proto__는 모든 객체에 존재하는 내부 속성으로, 객체의 프로토타입을 직접 참조합니다. 이는 자바스크립트 엔진 내부에서 사용되며, 개발자가 객체의 프로토타입을 직접 설정하거나 접근할 수 있게 해줍니다.
• 역할: 객체의 프로토타입 체인을 구성하며, 객체가 다른 객체로부터 메서드와 속성을 상속받을 수 있게 합니다.
• 사용 예: 객체의 프로토타입을 명시적으로 설정하거나 조회할 때 사용됩니다.

const animal = {
  speak() {
    console.log('The animal makes a sound.');
  }
};

const dog = {
  bark() {
    console.log('The dog barks.');
  }
};

// dog의 프로토타입을 animal로 설정
dog.__proto__ = animal;

dog.speak();  // "The animal makes a sound."
dog.bark();   // "The dog barks."

여기서 dog.__proto__는 animal을 가리키고 있어, dog 객체는 animal 객체의 메서드 speak를 사용할 수 있습니다.

차이점 요약

• prototype:

  • 함수(생성자 함수)에 존재하는 속성.
  • 생성자 함수로 생성된 모든 인스턴스가 공유하는 속성과 메서드를 정의.
  • 주로 메서드와 속성을 정의하는 데 사용.

• __proto__:

  • 모든 객체에 존재하는 속성.
  • 객체의 프로토타입 체인을 설정하거나 조회하는 데 사용.
  • 객체의 상속 관계를 설정하는 데 사용.

이 두 개념을 잘 이해하면 자바스크립트의 프로토타입 기반 상속을 더욱 효과적으로 활용할 수 있습니다.