돌아가기

호출 간의 차이점

중요도: 5

새로운 rabbit 객체를 만들어 봅시다.

function Rabbit(name) {
  this.name = name;
}
Rabbit.prototype.sayHi = function() {
  alert(this.name);
};

let rabbit = new Rabbit("Rabbit");

아래와 같이 메서드를 호출하면 동일하게 동작할지 다르게 동작할지 예상해 보세요.

rabbit.sayHi();
Rabbit.prototype.sayHi();
Object.getPrototypeOf(rabbit).sayHi();
rabbit.__proto__.sayHi();

this는 실제 점 앞에 있는 객체를 나타내기 때문에, 첫 번째 호출에선 thisrabbit이고, 다른 호출에선 Rabbit.prototype입니다.

따라서 첫 번째 호출만이 Rabbit을 출력하고 다른 호출은 undefined를 출력합니다.

function Rabbit(name) {
  this.name = name;
}
Rabbit.prototype.sayHi = function() {
  alert( this.name );
}

let rabbit = new Rabbit("Rabbit");

rabbit.sayHi();                        // Rabbit
Rabbit.prototype.sayHi();              // undefined
Object.getPrototypeOf(rabbit).sayHi(); // undefined
rabbit.__proto__.sayHi();              // undefined