(loading)Prototype Chain

Prototype

prototype은 javascript의 기반이라고 할 정도로 중요합니다.

그래서 프로토타입 기반 언어 (Prototype based language) 라고 불리웁니다.

 

만약에 생성자안에서 메서드를 만들어 new키워드를 사용한다면 각각의 생성되는 객체에 모두 메서드가 생성되어 메서드를 사용하지 않더라도 각각의 객체안에 메서드를 포함하고 있어야합니다. 이는 객체 공간을 비효율적으로 사용할 뿐만아니라 각각의 메서드를 수정하고 싶을 경우에 하나씩 모두 새로 지정해주어야한다는 번거로움이 있습니다. 그래서 공통적으로 사용할 수 있는 메서드를 prototype을 통해서 만들어줍니다.

 

function Order(menu, count){
    this.menu = menu;
    this.count = count;
    this.message = function(){
    	return "주문되었습니다"
    }
}
let steve = new Order('빵', 2)
let john = new Order('커피', 1)
steve.message()  //"주문되었습니다"
john.message()  //"주문되었습니다"


//만약에 모든 message 메서드를 바꾼다면 모두 다시 작성해주어야 합니다.
steve.message = function(){
	return this.menu + this.count + "개가 주문되었습니다"
}
john.message = function(){
	return this.menu + this.count + "개가 주문되었습니다"
}
steve.message()  // "빵 1개가 주문되었습니다"
john.message()  // "커피 2개가 주문되었습니다"


//그러나 prototype을 사용한다면
function Order(menu, count){
    this.menu = menu;
    this.count = count;
}
Order.prototype.message = function(){
	return "주문되었습니다"
}
let steve = new Order('빵', 2)
let john = new Order('커피', 1)
steve.message()  //"주문되었습니다"
john.message()  //"주문되었습니다"


//만약에 하나의 메서드만 변경하고 싶다면
john.message = function(){
	return this.menu + this.count + "개가 주문되었습니다"
}
steve.message()  //"주문되었습니다"
john.message()  // "커피 2개가 주문되었습니다"

 

 

 

이 방식이 가능한 이유는 객체안에 생성되는 __proto__ 라는 key때문입니다. prototype으로 생성된 함수는 __proto__의 객체안에 생성되어 필요할때만 사용하는 메서드가 된 것 입니다.

__proto__의 존재는 console에서 하나의 객체를 만들어 확인할 수 있습니다.

문자열 메서드, 배열 메서드, 정수 메서드 등 우리가 사용하는 메서드들이 __proto__에 담겨있기에 사용할 수 있는 것입니다.

 

Prototype chain

객체 안에 메서드를 정의하는 함수가 없는데 어떻게 메서드가 실행되는 걸까요?

__proto__로 객체들이 연결되어있고, 연결된 객체들을 탐색하여 메서드를 찾기 때문에 메서드가 실행됩니다.

 

javascript에서 메서드를 사용한다면 먼저 자신의 객체안에 메서드가 있는지 확인합니다. 만약에 없다면 __proto__의 value 객체에서 메서드를 찾고, 만약에 없다면 value 객체 안에 있는 __proto__의 value 객체에서 메서드를 찾습니다. 여러 __proto__들이 링크드 리스트처럼 연결되어있어서 차례대로 탐색한다고 생각하시면 됩니다. 

 

 

모든 prototype에 .__proto__가 있으므로 객체를 만들었을때 체인타고 올라가서 다른 어떠한 메서드를 사용할 수 있습니다.

객체를 만들면 객체안에 __proto__라는 key가 있고, value로 상위단계의 객체가 연결되어 있습니다. 

__proto__객체안에 __proto__가 연결되어 있고, 

그래서 상위단계의 객체 안에 있는 메서드를 사용할 수 있습니다. 

 

 

prototype of

Student.prototype = Object.create(Human.prototype)