[2019.04.08] __proto__, prototype, constructor 관계

쉽게 내 방식대로 정리한 설명

prototype 은 var Human = function () {this.name}; 과 같이 틀로 쓰는 녀석에게 속성을 정의하는 것 (함수만 prototype을 가지고 있음)

__proto__ 는 var john = new Human(); 에서 나온 john 인스턴스에 속성을 부여하는 것.(인스턴스만 __proto__를 가지고 있음)

더 쉽게 생각해서, prototype은 붕어빵 틀 자체에 기능을 추가하는 것. __proto__는 붕어빵에, 그 추가했던 기능

# 1 방식

var Human = function(){
  
}
Human.prototype.sleep() = function(){};
var Student = function(){
 
}
 
Student.prototype.learn = function(){};
var john = new Student();
 
john.__proto__ = Human.prototype
 
 

위 코드에서 10번 줄에서 저렇게 하면, john은 student으로 만들어 졌지만, Student가 가지고 있던 속성이 다 날라가버리고 Human속성만 가지게 됨.

# 2 방식

var Human = function(){
  
}
Human.prototype.sleep() = function(){};
var Student = function(){
 
}
 
Student.prototype = Human.prototype;
 
Student.prototype.learn = function(){};
var john = new Student();
 
 
 

Student로 만들어진 johndl sleep, learn 속성을 전부 가지고는 있지만, Human 틀도 learn속성을 가지게 됨.

# 3 방식

var Human = function(){
  
}
Human.prototype.sleep() = function(){};
var Student = function(){
 
}
Student.prototype = Object.create(Human.prototype);
Student.prototype.constructor = Student;
Student.prototype.learn = function(){};
 

8번 줄 : Human.prototype 속성들을 전부 create해서 Student에다가 넣음.

9번 줄 : 다음 줄부터 Student만의 속성을 추가시키기 위해 constructor를 Student로 지정

10번 줄 : Student의 learn 속성을 추가

Object.create와 new의 차이

const Car = function (color){
  this.color = color;
}
 
const car1 = new Car('red');
const car2 = Object.create(Object.prototype);
 
 

위와 같은 코드가 있을 때, car1은 생성자가 실행되면서 Car가 가지고 있는 모든 속성을 부여받는다.

car2는 Object.prototype 속성들을 부여 받지만 생성자가 실행되지 않음

사실 constructor는 ECMA5에서의 사용 용도를 제대로 이해하지 못하겠다...

그냥 다른 prototype을 상속받고, 이후에 더 속성을 추가하려면 기존의 가지자신을 잃지 않도록 지정을 해줘야 한다고 한다...-.-;;

# constructor에 대해 추가로 들은 내용

var Human = function (){};
 
var Student = function(){};
 
Student.prototype = Object.create(Human.prototype);
Student.prototype.constructor = Student

5번줄에 Student의 prototype에 Human의 prototype을 복사해서 넣어줬다. 그러나 prototype 안의 정보인 constructor는 여전히 Human이다. 그래서 임의로 Constructor를 Student로 변경해주는 것이다.

# prototype 여러가지 예시

function Human(){}
 
var steve = new Human();
 
steve.__proto__ === Human.prototype // true
 

var arr = [1,2,3];
 
arr.__proto__ === Array.prototype; // true

이 예시를 보니까 prototype과 __proto__의 관계를 좀 더 이해할 수 있을 것 같다!!