#22. this

1. this 키워드

• JavaScript에서 객체는 상태(state)를 나타내는 프로퍼티와 동작(behavior)을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다.
• 메서드는 자신이 속한 객체의 프로퍼티를 참조하고 변경할 수 있어야 한다. 이를 위해 메서드는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.

 

• 객체 리터럴에서의 this

const circle = { 
    radius: 5, 
    getDiameter() { 
        return 2 * this.radius; 
    } 
};
console.log(circle.getDiameter()); // 10

• 생성자 함수에서의 this

function Circle(radius) { 
    this.radius = radius; 
}

Circle.prototype.getDiameter = function () { 
    return 2 * this.radius; 
};

const circle = new Circle(5); 
console.log(circle.getDiameter()); // 10

• 엄격 모드와 this

(function() {
    'use strict';
    function foo() {
        console.log(this); // undefined
    }
    foo();
}());

2. 함수 호출 방식과 this 바인딩

this 바인딩 (this에 바인딩될 값)은 함수 호출 방식, 즉 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다.

일반 함수 호출

• 기본적으로 this에는 전역 객체가 바인딩된다.
• 일반 함수로 호출된 모든 함수(중첩 함수, 콜백 함수 포함) 내부의 this에는 전역 객체가 바인딩된다.

메서드 호출

• 메서드 내부의 this에는 메서드를 호출한 객체, 즉 메서드를 호출할 때 메서드 이름 앞의 마침표（ . ) 연산자 앞에 기술한 객체가 바인딩된다.
• 메서드 내부의 this는 메서드를 소유한 객체가 아닌 메서드를 호출한 객체에 바인딩된다.

생성자 함수 호출

• 생성자 함수 내부의 this에는 생성자 함수가 (미래에) 생성할 인스턴스가 바인딩된다.

Function.prototype.apply/call/bind 메서드에 의한 간접 호출

• apply, call, bind 메서드는 Function.prototype의 메서드다. 즉, 이들 메서드는 모든 함수가 상속 받아 사용 할 수 있다.

 

• 함수 호출 방식에 따라 this 바인딩이 동적으로 결정되는 것을 정리해보자