prototype vs __proto__

자바스크립트의 함수는 객체이다!! 객체는 Property(속성)을 가진다!

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

위의 함수를 정의 하게 되면 Person이라는 새로운 객체가 생성된다.

 

하지만 Person이라는 객체가 생성되는 동시에 Person의 Prototype 객체도 함께 생성된다.

이 두 객체는 서로 관련이 있으며 두 객체의 관계는 아래 사진과 같다.

Person 객체의 prototype 프로퍼티는 Person의 Person's prototype을 가리킨다.

Person의 Prototype 객체의 Constructoy 프로퍼티는 Person 객체를 가리킨다.

---

Person.prototype.sum = function(a, b){
	return a + b ;
}
let kim = new Person('kim', 10, 20);

Person의 prototype 객체에 sum()이라는 함수를 추가하고 

kim이라는 새로운 객체를 생성하게 되면 아래와 같은 상황이 일어난다.

 

Person.prototype에는 Person의 prototype 객체 주소가 담겨 있으니 

Person.prototype에 sum 프로퍼티 내에 함수를 추가해 주면

Person의 prototype 객체에 sum 함수가 담기게 된다

새로운 객체를 생성하게 되면 객체는 처음 정의 될 때의 프로퍼티와 함께 __proto__ 프로퍼티가 함께 생성된다.

__proto__는 kim이라는 객체를 생성한 Perosn 객체의 prototype 객체를 가리킨다.

---

우리가 Person의 Prototype 객체에 접근 할 수 있는 방법은 2가지가 있다.

1. kim 객체의 __proto__를 통해서

2. Person.prototype을 통해서

console.log(kim.name) // kim

 

만약 name 프로퍼티가 kim 안에 없다면?

Javascript는 먼저 kim 객체에 name 이라는 프로퍼티가 있는지 찾아본다.

만일 없을 경우 어떻게 동작하는지 약속 되어 있냐면 __proto__ 가 가리키고 있는 객체에 name 프로퍼티가 있는지 찾아본다. 그 상위에도 없다면 상위 까지 계속해서 거슬러 올라가게 된다!

 

---

__proto__  => 모든 객체가 가지고 있다. / 하나의 Link라고 할 수 있다.
prototype => 함수 객체만 가지고 있다. 생성자를 원형으로 선언 할 수 있다.

---