코어자바스크립트 - 프로토타입

김동하·2021년 1월 19일
0

javascript

목록 보기
50/58
post-thumbnail

프로토타입

  • 자바스크립트는 프로토타입 기반 언어. 클래스 언어는 상속을 사용하지만 프로토타입 기반은 어떤 객체를 원형으로 삼고 이를 복제(참조)한다.

  • let instance = new Constructor 프로토타입의 핵심 내용

  • 어떤 생성자 함수를 new 연사자와 함께 호출하면 Constructor에서 정의된 내용을 바탕으로 새로운 instance가 생성된다.

  • 이때 instance에 __proto__라는 프로퍼티가 자동으로 부여되는데, 이때 __proto__는 Constructor의 prototype이라는 프로퍼티를 참조한다.

  • instance가 __proto__를 통해서 protoype 객체 내부의 메서드에 접근이 가능한 것

예제

const Person = function (name) {
  this.name = name;
};
Person.prototype.getName = function () {
  return this.name;
};

const dongha = new Person('Dongha');
dongha.__proto__.getName(); // undefined
Person.prototype === dongha.__proto__ // true

  • Person의 instance는 __proto__ 통해서 getName을 호출할 수 있다.
  • undefined가 나온 것은 this 바인딩의 문제.
  • dongha.__proto__.getName();에서 getName 내부의 this는dongha.__proto__를 가리킴.
const dongha = new Person('Dongha');
dongha.getName() // dongha
  • 생략하면 잘 나온다. 왜냐면 __proto__는 생략 가능항다.
  • 생성자 함수의 prototype에 어떤 메서드나 프로퍼티가 있다면 인스턴스도 접근이 가능하다.

constructor 프로퍼티

  • 생성자 함수의 프로퍼티인 prototype 객체 내부에는 contructor라는 프로퍼티가 있다. instance __proto__객체 내부에도 마찬가지.
  • 이 프로퍼티는 원래의 생성자 함수인 자기 자신을 참조하는데 instance로부터 그 원형이 무엇인지 알 수 있게 해준다.

프로토타입 체인

  • 생략
profile
프론트엔드 개발

0개의 댓글