JavaScript, Prototype & this

Prototype에 대한 정의와 상속에 대해 알고 싶다면 해당 북마크를 참고하세요

JavaScript, Prototype 상속과 .__proto__

 

오늘은 Prototype 상속을 받았을 때 동일한 프로퍼티 혹은 메소드를 set & get 했을 경우를 살펴보겠습니다.

1-(1)

저번 시간에 이어 animal을 상속한 rabbit이라는 객체를 만들어봅시다.

 

rabbit 객체로 walk() 메소드를 호출했을 때 프로토타입 상속을 한 animal 객체의 walk()를 참조하여 출력하는 것을 확인했습니다.

 

만약 그림과 같이 rabbit 객체에 동일한 이름의 메소드를 추가하면 어떻게 될까요?

 

1. 동일한 이름의 Method

"use strict";

let animal = {
    walk() {
        console.log("I'm 걷고 있어요");
    }
}

let rabbit = {
    age : 2,
    jump() {
        console.log("깡총");
    }
}

rabbit.__proto__ = animal;
rabbit.walk = function() {
    console.log("깡총깡총 걷고 있어요!");
}

rabbit.walk();
animal.walk();

 

단순히 생각해보면 숨김 프로퍼티 [[Prototype]]을 참조하기 이전에 해당 객체에 프로퍼티 & 메소드가 있는 지

 

확인하는 과정이 있기 때문에 새로운 값을 Set한다면

 

프로토타입보다 해당 객체를 먼저 참조할 것입니다.

 

코드 결과를 같이 한 번 살펴봅시다.

새로 Set한 rabbit의 walk() 메소드가 올바르게 실행된 것을 확인할 수 있습니다.

 

2. this operator

만약 프로토타입 상속을 받은 메소드에 this operator가 있다면

 

이 때의 this는 프로토타입을 가리킬까요? 해당 객체를 가리킬까요?

"use strict";

let animal = {
    walk() {
        if (!this.isSleeping) {
            console.log("I'm 걷고 있어요");
        } else {
            console.log("해당 동물은 자고 있습니다!");
        }
    },
    sleep() {
        this.isSleeping = true;
    }
};

let rabbit = {
    age : 2,
    jump() {
        console.log("깡총");
    }
}

rabbit.__proto__ = animal;
rabbit.sleep();
animal.walk();
rabbit.walk();

 

새로이 animal 객체에 sleep 이라는 메소드를 만들어 isSleeping이라는 프로퍼티를 생성하고 

 

walk() 메소드의 조건으로 넣어줬습니다.

 

rabbit 객체를 통해 프로토타입 상속을 통한 sleep 메소드를 실행했을 경우에

 

this.isSleeping 프로퍼티의 this는 무엇을 가리킬까요?

.sleep() 메소드를 가리키는 대상은 animal이 아닌 rabbit임을 확인할 수 있습니다!

 

그러면 this 무조건 프로토타입이 아닌 객체를 가리키는 것일까요?

 

this는 호출한 메소드 앞에 '.' 점연산자가 항상 기준이 됩니다.

 

상속의 관계없이 호출한 프로퍼티와 메소드는 점 앞에 객체를 호출합니다.

 

3.결론

1. 동일한 이름의 메소드 혹은 프로퍼티를 Set할 경우 오버라이딩이 아닌 해당 객체안에 새로이 생성된다.

2. this는 상속과 관계없이 호출한 점 '.' 연산자 앞에 객체를 가리킨다.

 

프로토타입 상속