코어 - 프로토타입

프로토타입

 

프로토타입 도식화

 

• 어떤 생성자 함수를 new 연산자와 함께 호출할때 Constructor(생성자 함수 초기화) 가 생긴다
• 이 Constructor 는 instance 가 생기게 된다.
• instance 는 __proto__ 라는 프로퍼티가 자동으로 부여된다.
• 이 프로퍼티는 prototype이라는 프로퍼티를 참조한다.

코드

var Person = function (name) {
  this._name = name;
};

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

let suzi = new Person('Suzi')

Person.prototype === suzi.__proto__ // true

Person.prototype // { getName: ƒ () }
suzi.__proto__ // { getName: ƒ () }
Object.getPrototypeOf(suzi) // { getName: ƒ () }

suzi.__proto__ === Object.getPrototypeOf(suzi) // true

ES5 명세에는 __proto__ 가 [[prototype]] 으로 정의되어있다.

의미상 달리진게 아니니 위의 4가지 순서를 코드로 살펴보면

• Person 이라는 함수를 생성자 함수로 만들었다.
• suzi 라는 인스턴스가 생기게 됬고
• Person.__proto__ 또는 Person.prototype 을 해보면 { getName: f() } 를 가지고 있다.
• 결국 Person.__proto__ (Constructor.__proto__) or suzi.__proto__ (instance.__proto__) 같은 값을 참조하고 있다.

__proto__ 는 생략이 가능하다.

suzi.__proto__.getName(); // undefined

suzi.__proto__._name = 'SUZI__proto__';
suzi.__proto__.getName(); // SUZI__proto__


var suzi = new Person('Suzi', 28); 
suzi.getName(); // Suzi
var iu = new Person('Jieun', 28); 
iu.getName(); // Jieun

suzi.__proto__.getName() 은 undefined 가 출력 됩니다.

getName() 함수는 실행됬고 메모리도 할당 됬지만 값이 없기 때문에 undefined 를 가지고 있습니다.

 

이유는 this 에 있습니다.

 

this가 메서드로 사용 될 경우 메서드 명 바로 앞이 this 가 되는데 getName() 의 this 는 suzi.__proto__ 타입입니다.

suzi.__proto__ 타입이 name을 가지고 있지 않기 때문에 undefined가 할당 됬습니다.

 

바로 밑에서 suzi.__proto__._name 에 값을 할당해준다면 undefined가 아닌 할당 한 값이 출력됩니다.

 

하지만 매 순간 suzi.__proto__ 에 값을 할당 해주기는 어렵습니다.

 

인스턴스 생성 시 this도 같이 만들어지면 좋겠습니다만 그 방법은 __proto__ 타입을 생략하고 곧바로 메서드를 사용 하는 것 입니다.

 

__proto__ 를 빼면 suzi.getName() 은 this 가 suzi 인스턴스가 되니까 name 은 new 생성자 함수의 인자가 this.name이 되는게 맞습니다.

 

하지만 왜 되냐..? 생략이 가능한 프로퍼티이기 때문입니다. (그냥 그런가보다...)

 

 

# 생략 가능한 프로퍼티 __proto__

 

arr = [1, 2] 와 생성자 Array 를 console 로 찍어보면

 

arr 변수는 인스턴스로 1, 2 를 가지고 있고 prototype 을 또 가지고 있습니다.

생성자 Array 는 인스턴스없이 prototype 을 가지고 있습니다.

 

__proto__ 가 생략이 가능하기 때문에

배열을 사용 할때 arr.__proto__.method() 를 사용하지는 않습니다.