this 바인딩

렐루·2024년 4월 23일

자바스크립트 딥다이브

목록 보기

29/32

this

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수

this의 필요성

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

객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다.
하지만 자기 자신이 속한 객체를 재귀적으로 참조하는 방식은 일반적이지 않으며 바람직하지 않다.

생성자 함수의 경우 생성자 함수를 정의하는 시점에는 아직 인스턴스를 생성하기 이전이므로 자신이 속한 객체나 생성할 인스턴스를 가리키는 특수한 식별자가 필요하다.

this는 암묵적으로 생성되며 코드 어디에서든 참조 가능
this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다!!

상황에 따라 달라지는 this

실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.

그 객체 안에는 3가지가 존재한다.
✓ VariableEnvironment
✓ LexicalEnvironment
✓ ThisBindings

this는 실행 컨텍스트가 생성될 때 결정된다.
this는 함수를 호출할 때 결정된다.

1. 전역공간 this

전역 객체를 가르킨다.
런타임 환경에 따라 window, global

2. 메서드 this

함수 vs 메서드
함수와 메서드, 상당히 비슷해보이지만 엄연한 차이가 존재합니다.
독립성!!
함수는 호출 주체가 없습니다. 그 자체로 독립적인 기능을 수행합니다.
메서드는 자신을 호출한 대상 객체에 대한 동작을 수행합니다.
(위의 설명에서의 메서드와 객체의 관계를 생각해보면 와닿습니다!)

메서드의 this는 자신을 호출한 객체를 가리킵니다!

3. 함수로서 호출할 때 그 함수 내부에서의 this

함수로서 호출할 경우, 호출 주체를 알 수 없기에 this는 저장되지 않습니다.
실행 컨텍스트를 활성화할 당시 this가 지정되지 않는 경우, this는 전역 객체를 의미합니다.

함수로서 독립적으로 호출될 때는 this는 항상 전역객체를 가리킵니다!

명시적 this

자동으로 부여되는 상황별 this의 규칙을 깨고 this에 별도의 값을 저장하는 방법.

call, apply, bind

1. call

호출 주체인 함수를 즉시 실행.
첫번째 매개변수로 this에 바인당할 객체, 두번째부터는 인수

예시를 통해 확인해봅시다.
var func = function (a, b, c) {
	console.log(this, a, b, c);
};

// no binding
func(1, 2, 3); // Window{ ... } 1 2 3

// 명시적 binding
// func 안에 this에는 {x: 1}이 binding돼요
func.call({ x: 1 }, 4, 5, 6}; // { x: 1 } 4 5 6

2. apply

호출 주체인 함수를 즉시 실행.
this에 바인딩할 객체를 첫번째 인수로 넣어주고 둘째 인수로는 함수의 인수를 배열로 넘겨준다.

var func = function (a, b, c) {
	console.log(this, a, b, c);
};
func.apply({ x: 1 }, [4, 5, 6]); // { x: 1 } 4 5 6

var obj = {
	a: 1,
	method: function (x, y) {
		console.log(this.a, x, y);
	}
};

obj.method.apply({ a: 4 }, [5, 6]); // 4 5 6

3. bind

즉시 실행하지 않고 this를 바인딩한 새로운 함수를 리턴하는 메서드!

var func = function (a, b, c, d) {
	console.log(this, a, b, c, d);
};
func(1, 2, 3, 4); // window객체

// 함수에 this 미리 적용
var bindFunc1 = func.bind({ x: 1 }); // 바로 호출되지는 않아요! 그 외에는 같아요.
bindFunc1(5, 6, 7, 8); // { x: 1 } 5 6 7 8

// 부분 적용 함수 구현
var bindFunc2 = func.bind({ x: 1 }, 4, 5); // 4와 5를 미리 적용
bindFunc2(6, 7); // { x: 1 } 4 5 6 7
bindFunc2(8, 9); // { x: 1 } 4 5 8 9