[js 딥다이브] 22장 this

this

this 키워드

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수self-referencing variable다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.
this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.

// 객체 리터럴
const circle = {
 radius: 5,
 getDiameter() {
 // this는 메서드를 호출한 객체를 가리킨다.
 return 2 * this.radius;
 }
};

// 생성자 함수
function Circle(radius) {
 // this는 생성자 함수가 생성할 인스턴스를 가리킨다.
 this.radius = radius;
}
Circle.prototype.getDiameter = function () {
 // this는 생성자 함수가 생성할 인스턴스를 가리킨다.
 return 2 * this.radius;
};

함수 호출 방식과 this 바인딩

• 함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프lexical scope는 함수 정의가 평가되어 함수 객체가 생성되는 시점에 상위 스코프를 결정한다. 하지만 this 바인딩은 함수 호출 시점에 결정된다.
• 일반 함수로 호출 시 this에는 전역개체가 바인딩됨.

var value = 1;
const obj = {
 value: 100,
 foo() {
 // 콜백 함수에 명시적으로 this를 바인딩한다.
 setTimeout(function () {
 console.log(this.value); // 100
 }.bind(this), 100);
 }
};
obj.foo();

var value = 1;
const obj = {
 value: 100,
 foo() {
 // 화살표 함수 내부의 this는 상위 스코프의 this를 가리킨다.
 setTimeout(() => console.log(this.value), 100); // 100
 }
};
obj.foo();

메서드 내부의 this는 프로퍼티로 메서드를 가리키고 있는 객체와는 관계가 없고 메서드를 호출한 객체에 바인딩된다. = 일반 함수로 호출 시 전역객체가 바인딩되는 이유

apply와 call 메서드의 본질적인 기능은 함수를 호출하는 것이다.

function getThisBinding() {
 console.log(arguments);
 return this;
}
// this로 사용할 객체
const thisArg = { a: 1 };
// getThisBinding 함수를 호출하면서 인수로 전달한 객체를 getThisBinding 함수의 this에 바인딩한다.
// apply 메서드는 호출할 함수의 인수를 배열로 묶어 전달한다.
console.log(getThisBinding.apply(thisArg, [1, 2, 3]));
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// {a: 1}
// call 메서드는 호출할 함수의 인수를 쉼표로 구분한 리스트 형식으로 전달한다.
console.log(getThisBinding.call(thisArg, 1, 2, 3));
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// {a: 1}

apply와 call 메서드의 대표적인 용도는 arguments 객체와 같은 유사 배열 객체에 배열 메서드를 사용하는 경우

function convertArgsToArray() {
 console.log(arguments);
 // arguments 객체를 배열로 변환
 // Array.prototype.slice를 인수 없이 호출하면 배열의 복사본을 생성한다.
 const arr = Array.prototype.slice.call(arguments);
 // const arr = Array.prototype.slice.apply(arguments);
 console.log(arr);
 return arr;
}
convertArgsToArray(1, 2, 3); // [1, 2, 3]

함수 호출 방식	this 바인딩
일반 함수 호출	전역 객체
메서드 호출	메서드를 호출한 객체
생성자 함수 호출	생성자 함수가 (미래에) 생성할 인스턴스
Function.prototype.apply/call/bind 메서드에 의한 간접 호출	Function.prototype.apply/call/bind 메서드에 첫 번째 인수로 전달한 객체