ptototype vs __proto__

SPANKEEE·2022년 9월 15일
0

자바스크립트의 함수는 객체다.

따라서 프로퍼티를 가질 수 있고 아래와 같이 나타낼 수 있다.

function Person(){}
ver Person = new Function();

위와같이 Person이라는 함수를 생성하면 Person이라는 객체와 Person의 prototype객체가 생성되게 된다.

이전에 우리가 만들어왔던 Person 객체 예제를 하나하나씩 실행시키는 과정을 지켜보자.

함수 정의

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

위 코드를 입력하면 Person이라고 하는 새로운 객체가 생성된다.

여기서 끝이아니라 Person의 prototype 객체가 생성된다.

이 두개의 객체는 서로 연관되어있고 관련되어 있기 때문에 두 객체 서로를 알아야 한다.

Person의 객체는 내부적으로 prototype라는 프로퍼티가 생기고 해당 prototpye는 Person's prototype 즉 Person의 프로토타입 객체를 가르킨다.

Person의 프로토타입 객체도 Person에 속해있다는 것을 표기하기 위해 constructor 프로퍼티에 Person 객체를 기록한다.

서로 참조하는 상태이다.
여기에 sum이라는 메소드를 추가해보자.

Person.prototype.sum = function(){}

Person의 prototype는 Person의 프로토타입 객체를 가르키고

해당 객체에 "sum"이라는 프로퍼티가 없으니 "sum"이라는 프로퍼티를 생성하고 함수를 정의한다.

Person의 prototype 객체에 sum이라는 메소드가 추가되게 된다.

생성자를 이용해 새로운 객체를 생성해보자.

var kim = new Person('kim', 10, 20);

위에 kim이라는 객체는 constructor 함수가 실행되면서 this의 값이 세팅된 결과 프로퍼티 값들이 생성이 되고

동시에 __proto__라는 프로퍼티가 생성되는데.

이 proto프로퍼티는 kim이라는 객체를 생성한 생성자의 prototype 객체 를 가리키게 한다.

lee라고 하는 새로운 객체도 만들어보자

var lee = new Person('lee', 10, 10);

이 객체도 kim 객체와 같이 자신을 생성한 함수의 prototype객체를 가르킨다.

프로퍼티 호출

아래 코드와 이미지를 확인해 보자.

console.log(kim.name)을 실행하려 하면

자바스크립트는 kim이라고 하는 객체에 name이라는 프로퍼티가 있는지 확인한다.

name이라는 프로퍼티가 존재하기 때문에 해당값을 출력한다.

혹시나 name이라는 값이 없다면 그 kim 객체내에 "__proto__" 가 가르키는 객체에 name이 있는지 확인한다.

그리고 kim.sum(); 이라는 명령어를 실행하면 어떻게 될까?

kim의 객체에는 sum이라고 하는 메소드가 존재하지 않기 때문에 자바스크립트는 "__proto__"를 통해서 해당 프로퍼티는 Person 프로토타입을 가리키고 있기 때문에 Person프로토타입에 sum이 있는지 확인해 본다.

sum이 존재하면 해당 프로퍼티를 사용한다.

console.log(kim.name);
kim.sum();

*만약 프로토타입 내에 sum 메소드가 존재하지 않는 경우

Person 프로토타입도 결국엔 객체기 때문에 "__proto__"가 있을 것이다.

해당 "__proto__"가 가르키는 객체가 존재할 것이다.

요약

  • __proto__ : 어떤 객체가 자체적으로 가지고 있지 않는 값을 사용할때 해당 객체의 __proto__ 프로퍼티가 가르키는 prototype 객체에서 해당 값을 찾는다.
  • 생성자 함수의 prototype 프로퍼티 : 함수가 생성시 만들어지며 변경이 불가능하다.
  • __proto__ : 객체가 생성시 생성자 객체를 가리키고 변경이 가능하다.
profile
해야되요

0개의 댓글