[TIL] this란 무엇인가

📚 모던 자바스크립트 deep dive 교재를 참고하여 작성합니다

this

객체지향 프로그래밍에서 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조이다. 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 이때 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수가 this이다.

this는 자바스크립트 엔진에 의해 암묵적으로 생성되며 코드 어디에서든 참조할 수 있다. 함수를 호출하면 argument 객체와 this가 암묵적으로 함수 내부에 전달된다. 함수 내부에서 argument 객체를 지역 변수처럼 사용할 수 있는 것처럼 this도 지역 변수처럼 사용할 수 있따. 단, this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.

argument 객체 : 함수를 호출할 때 넘긴 인자들이 배열 형태로 저장된 객체

function sum (a, b) {
	console.log(arguments);
	return a+b;
}
sum(1, 2);
// Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]

this 바인딩 : 식별자와 값을 연결하는 과정
예를 들어 변수 선언은 변수 이름(식별자)와 확보된 메모리 공간의 주소를 바인딩하는 것이다. this 바인딩은 this와 this가 가리킬 객체를 바인딩하는 것.

자바나 C++ 같은 클래스 기반 언어에서 this는 언제나 클래스가 생성하는 인스턴스를 가리킨다. 하지만 자바스크립트의 this는 함수가 호출되는 방식에 따라 this에 바인딩될 값, 즉 this 바인딩이 동적으로 결정된다.

// 전역
console.log(this); // window

// 일반 함수
function square(number) {
    console.log(this); // window
    return number * number;
}

// 메서드 내부
const obj = {
    name: 'Kim',
    getName() {
    	console.log(this); // { name: "Kim", getName: f }
        return this.name;
    }
}

// 생성자 함수 내부
function func(name) {
    this.name = name;
    console.log(this); // func { name: "kim" }
}
const me = new func('kim');

위의 코드에서 보여주는 것처럼 전역, 일반 함수 내부에서 this는 전역 객체 window를 가리킨다. 메서드 내부에서 this는 메서드를 호출한 객체를 가리키고 생성자 함수 내부에서 this는 생성자 함수가 생성할 인스턴스를 가리킨다. 하지만 this는 일반적으로 객체의 메서드 내부 또는 생성자 내부에서만 의미가 있어서 strict mode가 적용된 일반 함수 내부의 this는 undefined가 바인딩된다.

call vs apply vs bind

call, apply, bind는 모두 Function.prototype의 메서드다. 즉 이 세 메서드는 모든 함수가 상속받아 사용할 수 있다. 위에서 이야기한 this를 window가 아닌 다른 객체로 바꿔주는 함수가 call, apply, bind이다.

call & apply

call, apply 메서드는 this로 사용할 객체와 인수 리스트를 인수로 전달받아 함수를 호출한다.

function getThisBinding() {
    return this;
}

// this로 사용할 객체
const thisArg = { a: 1 };

console.log(getThisBinding()); // window

// getThisBinding 함수를 호출하면서 인수로 전달한 객체를 getThisBinding 함수의 this에 바인딩한다.
console.log(getThisBinding.call(thisArg)); // {a:1}
console.log(getThisBinding.apply(thisArg)); // {a:1}

call, apply 메서드의 본질적인 기능은 함수를 호출하는 것이다. call 과 apply 메서드는 함수를 호출하면 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩한다. call과 apply 메서드는 호출할 함수에 인수를 전달하는 방식만 다를 뿐, 동일하게 동작한다.

function getThisBinding() {
    console.log(arguments);
    return this;
}

// this로 사용할 객체
const thisArg = { a: 1 };

console.log(getThisBinding()); // window

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

bind

Function.prototype.bind 메서드는 apply, call 메서드와 달리 함수를 호출하지 않고 this로 사용할 객체만 전달한다.

function getThisBinding() {
    return this;
}

// this로 사용할 객체
const thisArg = { a: 1 };

// bind 메서드는 함수에 this로 사용할 객체를 전달, 함수 호출 x
console.log(getThisBinding.bind(thisArg)); // getThisBinding
// bind 메서드는 함수를 호출하지는 않으므로 명시적으로 호출해야 한다.
console.log(getThisBinding.bind(thisArg)()); // {a:1}

bind 메서드는 메서드의 this와 메서드 내부의 중첩함수 또는 콜백함수의 this가 불일치하는 문제를 해결하기 위해 유용하게 사용된다.

const person = {
    name: 'Kim',
    foo(callback) {
    	setTimeout(callback, 1000);
    }
};
person.foo(function () {
    console.log(`My name is ${this.name}.`); // My name is .
    // 일반 함수로 호출된 콜백함수 내부의 this.name은 브라우저 환경에서 window.name과 같다.
    // 브라우저 환경에서 window.name은 브라우저 창의 이름을 나타내는 빌트인 프로퍼티이며 기본값은 ''이다.
    // Node.js 환경에서 this.name은 undefined다.
});

콜백함수가 호출되기 이전 시점에서 this는 foo 메서드를 호출한 객체인 person 객체를 가리킨다. 하지만 person.foo의 콜백함수가 일반함수로 호출된 시점에서 this는 전역 객체 window를 가리킨다. 때문에 콘솔에 찍히는 것은 ''값이 되는 것이다.

따라서 콜백함수 내부의 this를 외부 함수 내부의 this와 일치시켜야 하는데, 이때 bind 메서드를 사용한다.

const person = {
    name: 'Kim',
    foo(callback) {
        // bind 메서드로 callback 함수 내부의 this 바인딩을 전달
    	setTimeout(callback.bind(this), 1000);
    }
};
person.foo(function () {
    console.log(`My name is ${this.name}.`); // My name is Kim.
});