콜백 함수 내부의 this에 다른 값 바인딩하기

🤔 콜백 함수 내부에서 this가 문맥에 맞는 객체를 바라보게 할 수는 없을까?

🤔 콜백 함수 내부의 this에 다른 값을 바인딩하는 방법

<전통적 방식>

우리가 이전에 강제로 this를 제어하는 방법에서 살짝 다뤘던 방식이에요 👀

var obj1 = {
	name: 'obj1',
	func: function() {
		var self = this; //이 부분!
		return function () {
			console.log(self.name);
		};
	}
};

// 단순히 함수만 전달한 것이기 때문에, obj1 객체와는 상관이 없어요.
// 메서드가 아닌 함수로서 호출한 것과 동일하죠.
var callback = obj1.func();
setTimeout(callback, 1000);

실제로는 this를 사용하는게 아니기도 하고, 번거롭네요.

그렇다면, 콜백 함수 내부에서 아에 this를 사용하지 않는다면 어떨까요?

var obj1 = {
	name: 'obj1',
	func: function () {
		console.log(obj1.name);
	}
};
setTimeout(obj1.func, 1000);

첫 번째 예시보다는 훨씬 간결하긴 해요. 하지만 this를 사용하지 않으면서 **결과만을 위한 코딩**이 되어버렸네요. this를 이용해서 다양한 것을 할 수 있는 장점을 놓치게 됨

오히려, 첫 번째 예시를 재활용하는 방향으로 선회해볼까?

코드가 헷갈릴 수 있으니, VSCode 상에서 직접 function을 대입해보면서 순서를 따라가시기 바래요!

var obj1 = {
	name: 'obj1',
	func: function() {
		var self = this; //이 부분!
		return function () {
			console.log(self.name);
		};
	}
};

// ---------------------------------

// obj1의 func를 직접 아래에 대입해보면 조금 더 보기 쉽습니다!
var obj2 = {
	name: 'obj2',
	func: obj1.func
};
var callback2 = obj2.func();
setTimeout(callback2, 1500);

// 역시, obj1의 func를 직접 아래에 대입해보면 조금 더 보기 쉽습니다!
var obj3 = { name: 'obj3' };
var callback3 = obj1.func.call(obj3);
setTimeout(callback3, 2000);

위 방법은 조금 번거롭긴 해도 this를 우회적으로나마 활용하여 원하는 객체를 바라보게 할 수 있었어요!

지금까지 전통적인 방법으로 해결했던 모습을 보여드렸어요. 하지만 이제는 이러한 부분을 아주 쉽게 해결할 수 있는데요. 바로 **bind 메서드를 이용하는 방법**이에요.

<가장 좋은 방법 → bind메서드의 활용>

var obj1 = {
	name: 'obj1',
	func: function () {
		console.log(this.name);
	}
};
//함수 자체를 obj1에 바인딩
//obj1.func를 실행할 때 무조건 this는 obj1로 고정해줘!
setTimeout(obj1.func.bind(obj1), 1000);

var obj2 = { name: 'obj2' };
//함수 자체를 obj2에 바인딩
//obj1.func를 실행할 때 무조건 this는 obj2로 고정해줘!
setTimeout(obj1.func.bind(obj2), 1500);