prototype, __proto__

mangojang·2023년 2월 3일
0

✍️ prototype에대해 공부하다가, prtototype 과 __proto__의 차이가 궁금하여 정리하여 보았다.

prototype , __proto__ 모두 프로퍼티의 일종으로 동일한 객체를 참조한다. 차이점은 원본의 프로퍼티인가?, 복사본의 프로퍼티인가? 이다.

prototype

  • 생성자 함수 선언 시, 생성되는 프로퍼티
  • “prototype” 프로퍼티는 생성자 함수 선언시 생성 된, prototype 객체를 참조함.

__proto__

  • new 연산자를 붙여 생성자 함수를 실행하여 만들어진 인스턴스(=복사된 객체)가 가지고 있는 프로퍼티
  • __proto__프로퍼티는 생성자 함수의 prototype 프로퍼티 가 참조하는 prototype 객체를 똑같이 참조함.

예시를 통해 알아보기

  • 생성자 함수를 선언하게 되면 1️⃣함수(Person)와 2️⃣함수의 prototype 객체(Person’s prototype)가 생성 됨.
  • 함수의 “prototype” 이라는 프로퍼티(Person.prototype)로 함수의 prototype 객체(Person’s prototype)를 참조 함.
  • 함수의 prototype 객체 안의 constructor 프로퍼티는 함수(Person)를 참조 함. (Person.prototype.constructor==Person)
function Person(name, first, second){
	this.name = name;
	this.first = first;
	this.second= second;
}

  • Person.prototype로 메서드를 추가하게 되면, Person’s prototype객체에 메서드가 추가 됨.
Person.prototype.sum = function(){}

  • 생성자 함수를 실행하여 만들어진 인스턴스(kim)에는 __proto__ 라는 프로퍼티가 생성 됨.
  • 이는 생성자 함수의 prototype 객체(Person’s prototype)를 참조함.
let kim = new Person('kim', 10, 20);

  • console.log(kim.name) 실행 시, kim 객체 내의 name 프로퍼티 조회 후 값을 반환 함.
  • kim.sum()실행 시, kim 객체 내의 sum 함수 조회 후, 없으면 __proto__ 가 참조하고 있는 객체 조회 후 값을 반환 함.

참고 문헌

profile
한 걸음 한 걸음 계속 걷는 자가 일류다

0개의 댓글