[JS문법 종합반] 4주차_this 바인딩

오늘의 학습내용 :  콜백 함수 내부의 this에 다른 값 바인딩하기

 

◆ 콜백 함수 내부의 this

this는 Java, C# 처럼 객체 지향 프로그래밍 언어에서도 사용하는 키워드이다. 이때 this는 해당 코드를 실행하는 클래스의 인스턴스를 나타낸다. 조금 다른 방식으로, 자바스크립트에서의 this 키워드가 있는데, 함수가 호출되는 방식에 따라 this가 참조하는 것이 결정된다. 콜백 함수도 함수이기 때문에, 어떤 객체의 메서드로 있던 함수가 인자로 전달되면 함수 자체로 전달된다. 이때 내부의 this는 제어권을 넘겨받은 함수가 정의하고, 정의되지 않은 경우에 전역 객체를 참조한다.

 

복습하기: 전역 객체?

전역 범위에 항상 존재하는 객체를 전역 객체라고 한다. 웹 브라우저에서의 전역 객체는 window, Node.js 환경에서의 전역 객체는 global이다. (참고: MDN Web Docs) 우리는 전역 객체로 통해 어디에서든 접근 가능한 변수를 만들 수 있고, 이를 통해 요구사항 변경에도 쉽게 대응할 수 있는 코드를 구현할 수 있다. 

 

◆ 콜백 함수에서 this를 사용하지 않는다면?

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

 

this를 사용하지 않음으로써 바인딩에 대한 문제를 없애고 보기에는 더 간결하게 작성했지만, 결국 this를 통해 활용할 수 있는 다양한 기능을 전부 무시하는, 결과만을 위한 코딩이 된다. 좋은 방식이라고 보기에는 어렵다.

 

◆ bind 메서드 활용

call, apply, bind는 모두 첫 번째 매개변수로 this의 값을 명시적 지정할 수 있다. 그 중 bind() 메서드는 this 키워드를 주어진 값으로 정하고, 자신의 인자를 사용해 새로운 함수를 반환하는 특징이 있다.

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

//함수를 object1에 바인딩 : 함수를 실행할 때 this가 object1로 고정된다.
setTimeout(object1.func.bind(object1), 1000);

var obj2 = { name: 'object2' };

//함수를 object2에 바인딩 : 함수를 실행할 때 this가 object2로 고정된다.
setTimeout(object1.func.bind(object2), 1500);