명시적 this 바인딩

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

크게 call / apply / bind에 대해 알아보자.

call 메서드

1. 호출 주체인 함수를 즉시 실행하는 명령어
2. call명령어를 사용하여, 첫번째 매개변수에 this로 binding할 객체를 넣어주면 명시적으로 binding할 수 있다.

ex)

<script>
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
</script>

이처럼 this가 전역객체를 바라보는 경우 뿐만 아니라, 명확한 실행주체로 this가 binding되어 있을 때도 억지로 특정 객체로 this가 binding되도록 할 수 있다.

apply 메서드

call 메서드와 완전히 동일하다. 다만 this에 binding할 객체는 똑같이 넣어주고 나머지 부분만 배열 형태로 넘겨준다.

<script>
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
</script>