💃프로토타입의 동작방식, (__proto__, overide, channing)

prototype 의 동작방식

prototype은 생성자 함수 내부의 property이다. 이 프로토타입은 생성자 함수를 통해 만든 객체, 인스턴스가 사용할 메서드를 저장하고 있다. 생성자함수를 통해 인스턴스를 만들면 인스턴스 내부에 자동으로__proto__가 프로퍼티로 생성되는데 이 프로퍼티는 인스턴스가 사용할 메소드, 즉 생성자 함수의 prototype을 참조한다. 이는 생략이 가능하도록 표현할 수 있어 마치 생성자함수의 프로토타입을 자신의 프로퍼티인 것마냥 사용할 수 있게 된다. 또한, 메서드오버라이드 속성 때문에 생성자함수의 메서드는 자신의 메서드 상태는 유지하면서도 인스턴스별로 재 정의할 수 있어 상황에 맞게 커스텀하여 사용할 수 있다. 때문에 인스턴스의 메소드를 호출하면 먼저 인스턴스에 해당 메소드가 프로퍼티에 포함되어있는지를 파악하고, 없다면 프로퍼티 체이닝 속성으로 __proto__를 통해 생성자함수의 메서드를 실행하게 된다.

---

생략가능한 __proto__

var Person = function(name){
    this._name=name
   } 
   
Person.prototype.getName=function(){
    console.log(this)
    return 'My name is '+this._name
}

const guest1=new Person('namju')

Person이라는 생성자함수를 통해 guest1이라는 인스턴스를 생성하였다.
다음부터 비교해보면

guest1.getName()

//this: 
  Person {_name: "namju"}_name: "namju"[[Prototype]]: Object
//return:
  "My name is namju"
  
guest1.__proto__.getName()
//this:
  {getName: ƒ, constructor: ƒ}
//return: "My name is undefined"

인스턴스에서 바로 메소드를 호출하면 이름이 제대로 나오고
인스턴스의 프로토로 접근하면 undefined가 반환되었다.
이는 메소드를 호출할 때, 메소드 앞에있는 객체를 this로 지정하기 때문에 값이 의도한대로 나오지 못했는데,

guest1.getName()에서의 this는 guest1 이어서 guest1._name을 불러올 수 있었고
guest1.__proto__.getName()에서의 this는 guest1.__proto__인데 이는 Person.prototype과 동일하다.
Person.prototype = {getName: ƒ, constructor: ƒ}에서는 _name이라는 속성을 찾을 수 없기 때문에 undefined를 반환 한 것이다.

때문에 인스턴스의 __proto__가 생성자함수의 prototype을 참조한다고 하여도 this를 인스턴스로 지정하여 실행할 때엔 __proto__를 생략하고 호출해야 한다.

즉, 생성자 함수의 prototype의 메서드, 프로퍼티는 인스턴스에서도 자신의 메소드, 프로퍼티인 것처럼 접근하여 사용할 수 있다.

---

메서드 오버라이드

만일, 인스턴스가 동일한 이름의 프로퍼티나 메서드를 갖게된다면 어떻게 될까, 아래의 예시는 생성자함수에 sing이라는 메서드를 부여하고, 인스턴스에 똑같이 sing이라는 메서드를 추가 하는 코드이다.

var Singer = function(song){
    this.song=song
    }
    
Singer.prototype.sing = function(){
    console.log(this)
    return this.song+'라라라~'
}

const iu = new Singer('내손을잡아 ')
const biber = new Singer('peaches ')

iu.sing = function(){
	console.log(this)
    return '오늘의 노래는 '+this.song
    }
    
iu.sing()
// "오늘의 노래는 내손을잡아 "
biber.sing()
// "peaches 라라라~"

메서드를 새로 정의한 인스턴스(iu)에서는 생성자함수에서 정한 메소드 결과(this.song+라라라)가 아닌 인스턴스에서 지정한 메소드로 변경되어 실행되었고, iu와 biber의 결과를 비교해보면 기존의 메서드가 사라진 것은 아니란 걸 확인할 수 있다.

즉 기존의 메서드를 없애면서 새로운 메서드로 변경한 것이 아닌 원본은 유지되고 있는 상태에서 다른 메서드를 얹은 개념이다.
이것을 '메소드 오버라이딩' 이라고 한다

다르게 표현하면 각 인스턴스 별로 커스텀화한 메서드를 실행시킬 수 있는 장점이다.

메서드가 오버라이드 된 것이기 때문에 인스턴스의 __proto__로 우회하면 다시 생성자함수의 메서드에 접근할 수 있다.

iu.sing()  //"오늘의 노래는 내손을잡아 "
iu.__proto__.sing() //undefined 라라라

위와 같은 방법으로 sing 메서드를 실행시켜보면 this의 차이에 따라 song을 반환하거나 undefined를 반환한다.(iu.__proto__
에는 song 프로퍼티가 없으므로 undefined)

그럼 song이라는 프로퍼티를 만들어주면 올바른 값을 반환할 수 있을 것인데, call이나 apply로 this를 지정해주어 this를 원하는 인스턴스로 바꿔 줄 수 있다.

iu.__proto__.song = '스물셋'
iu.__proto__.sing.call(iu)
//스물셋 라라라

처음의 생성자함수의 메서드로 실행을 시켰다.

Singer {song: "내손을잡아"}
  song: "내손을잡아"
  [[Prototype]]: Object
     sing: ƒ ()
     song: "스물셋 "
     constructor: ƒ (song)
     [[Prototype]]: Object
     

---

프로토타입 체이닝

자바스크립트 엔진이 sing이라는 메서드를 찾는 방식은 호출한 자신으로부터 가장 가까운 프로퍼티 중에서 메서드를 찾는 것이다. 있으면 반환하고, 없으면__proto__를 검색하여 메서드를 찾는다. 이 처럼 __proto__ 프로퍼티가 연쇄적으로 이어지는 것을 프로토타입 체인이라하고, 체인을 따라가며 검색하는 것을 프로토타입 체이닝이라고 한다.

(예시의 iu 인스턴스 입장에서는, sing메서드를 실행했을 때 constructor의 sing메서드까지 갈필요없이 자신의 scope내 sing메서드를 실행시킨 것이고, 이 메서드에서 필요한 song 역시 상위에서 찾을 필요없이 자신의 위치내 정의된 song프로퍼티를 사용한 것이다.

반면 biber는 인스턴스 객체 내부에 sing메서드가 없으므로 프로토타입체인을 따라올라가 생성자함수의 sing메서드를 실행한다. )

---

과거의 내가 보내는 참고링크 -_-

• this 와 생성자함수, 메소드 선언방법