this 키워드
객체 내의 메서드는 자신이 속한 객체의 프로퍼티에 접근하여 참조하거나 변경 가능해야 합니다. 자신이 속한 객체의 프로퍼티를 참조하기 위해서는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 합니다. 이를 위해 자바스크립트는 this 키워드를 제공합니다.
this 키워드는 소속된 객체 또는 생성할 인스턴스를 가리키는 자기 참조 변수로 소속 객체나 생성할 인스턴스의 프로퍼티와 메서드에 접근할 수 있습니다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며 this가 가리키는 값은 함수 호출 방식에 따라 동적으로 결정됩니다.
함수 호출 방식과 this 바인딩
일반 함수 호출
일반 함수로 호출하면 함수 내부의 this에 전역 객체가 바인딩 됩니다.
메서드 호출
메서드 내부에서 this는 메서드를 호출할 때 메서드 이름 앞의 객체가 바인딩 됩니다. 여기서 주의할 점은 메서드 내부의 this는 메서드를 소유한 객체가 아닌 메서드를 호출한 객체에 바인딩 된다는 점입니다. this에 바인딩 될 객체는 호출 시점에 결정됩니다.
생성자 함수 호출
생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스가 바인딩 됩니다. 생성자 함수는 new 키워드를 붙이지 않고 사용할 경우, 일반 함수로 동작하기 때문에 이 경우에는 일반 함수 호출 방식으로 동작합니다.
Function.prototype.apply/call/bind 메서드에 의한 간접 호출
Function.prototype.apply()와 Function.prototype.call()은 this로 사용할 객체와 인수 리스트를 인수로 전달받아 함수를 호출합니다. apply 메서드와 call 메서드는 함수를 호출하는 기능을 수행하는 것으로 인수로 전달된 특정 객체를 호출한 함수의 this에 바인딩 합니다.
Function.prototype.bind()는 메서드는 첫 번째 인수로 전달한 값으로 this 바인딩이 교체된 함수를 새롭게 생성해 반환합니다.
참고
이웅모, ⌈모던 자바스크립트 - Deep Dive⌋, 2020, 22_this(p.342 - 357)