프로토타입

프로토타입은 많이 들었던 개념이지만, 두루뭉술한 느낌으로 알고있었다. 

프로토타입을 많이 본 곳은 MDN 사이트이다. 배열에 원하는 기능을 수행하는 메서드를 찾기 위해 아래 사진에서 보여지는 것을 많이 보았던 것 같다. 

출처 : MDN WEB DOCS

 

자바스크립트의 프로토타입은 객체의 상속을 구현할 때 사용되어진다.

자바스크립트의 모든 객체는 다른 객체로부터 상속을 받을 수 있고, 프로토타입 체인 이라는 것을 통해 상위 프로토타입 객체로 올라가면서 원하는 프로퍼티나 메서드를 찾는다. 

 

 

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const john = new Person('John', 30);
john.greet(); // "Hello, my name is John"

 

좀 더 자세히 설명하면, 

자바스크립트의 모든 객체는 프로토타입이 있고, __proto__ 속성으로 연결된 속성과 메소드를 탐색한다. 이를 프로토타입 체인이라고 한다. 프로토타입은 객체를 복사하는 것이 아니다. 체인과 연결된 속성과 메소드를 따라 접근할 뿐이다. 

john의 프로토타입 체인을 따라가보면 Person의 프로토타입의 greet을 발견할 수 있다.