bind메소드로 this 제어하기

bind()

bind() 함수는 새로운 함수를 만듭니다. 즉, 새로운 함수를 생성해 반환한다는 것입니다. 바인딩한 함수는 원본 함수 객체를 감싸는 함수로, 바인딩한 함수를 호출하면 일반적으로 래핑 된 함수가 호출됩니다. 또한, bind()는 전달 할 인수가 필요한 콜백 함수를 작성하는 데 유용합니다. 

bind()메소드 이용해 함수 생성하기

this.x = 8;
var module = {
	x:100,
    getX: function() {return this.x; }
};

module.getX(); // 100 - this 키워드가 module객체의 x값을 참조하여 100 출력됨

var testX = module.getX;
testX(); // 8 반환 - 함수가 전역 스코프에서 호출됨(this.x)

var bindGetX = testX.bind(module); // module과 바인딩된 this 가 있는 새로운 함수 생성.
bindGetX(); // 100

 

부분 적용되는 함수 bind() 함수로 생성하기

function add(arg1, arg2){
	return arg1 + arg2;
}

var result1 = add(1,2);// 3

var addBind = add.bind(null, 15);
var result2 = addBind(10); // 15 + 10 = 25
var result3 = addBind(30, 77); // 15 + 30 = 45

add 함수를 바인딩하는데, 첫 번째 인자(arg1)는 null값으로, 두 번째 인자(arg2)는 15인 고정값으로 새로운 함수를 생성해 addBind변수에 반환합니다. addBind라는 새로운 함수가 생성된 것이고, add() 함수와 로직은 동일하나 매개변수의 값이 다르게 사용되는 것을 확인할 수 있습니다.

 

setTimeout과 bind() 함수 사용하기

bind()함수는 콜백함수 사용시 유용하다고 했었는데요, 여기서 콜백함수란 무엇인지 먼저 알아보겠습니다.

 

콜백함수

함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수입니다. 콜백 함수가 자주 사용되는 대표적인 예는 이벤트 핸들러 처리입니다. 콜백 함수는 매개변수를 통해 전달되고 전달받은 함수의 내부에서 어느 특정시점에 실행됩니다.

아래의 예제를 통해 setTimeout() 콜백함수와 bind() 메소드에 대해서 알아보겠습니다.

var yogaClassObj = {
  classRoom : "room1",
  name : "jj",
  time : "AM06:00",
  showHealth : function() {
  	setTimeout(function(){
    console.log(this.name + "님, 오늘은 " + this.time + "에 운동을 하셨네요");
    }.bind(this), 1000)
  }
}

yogaClassObj.showHealth();
/* output (1초뒤 showHealth()함수 실행)
jj님, 오늘은 AM06:00에 운동을 하셨네요.
*/

setTimeOut()의 두번째 매개변수( 1000ms 즉 1초 )에 전달된 시간이 경과되면 첫번째 매개변수에 전달한 콜백 함수가 호출됩니다. 이때, 첫번째 매개변수로 실행할 값에 bind()처리하여 yogaClassObj의 객체값을 넘겨 새로운 함수가 반환됩니다.

 

[이미지출처 - https://poiemaweb.com/js-function#74-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98] 콜백함수의 호출 시점

콜백 함수는 주로 비동기식 처리 모델(Asynchronous processing model)에 사용된다. 비동기식 처리 모델이란 처리가 종료하면 호출될 함수(콜백함수)를 미리 매개변수에 전달하고 처리가 종료하면 콜백함수를 호출하는 것이다.
콜백함수는 콜백 큐에 들어가 있다가 해당 이벤트가 발생하면 호출된다. 콜백 함수는 클로저이므로 콜백 큐에 단독으로 존재하다가 호출되어도 콜백함수를 전달받은 함수의 변수에 접근할 수 있다.

 

만약, bind() 함수에 this라는 인자 값을 주지 않으면 어떤 결과가 출력될까요?

var yogaClassObj = {
  classRoom : "room1",
  name : "jj",
  time : "AM06:00",
  showHealth : function() {
  	setTimeout(function(){
    console.log(this.name + "님, 오늘은 " + this.time + "에 운동을 하셨네요");
    }.bind(), 1000)
  }
}

yogaClassObj.showHealth();
/* output (1초뒤 showHealth()함수 실행)
님, 오늘은 undefined에 운동을 하셨네요.
*/

setTimeout()함수는 showHealth() 함수가 종료된 이후 1초 뒤 실행되어 this 키워드는 yogaClassObj의 객체가 아닌, window 객체를 참조해 undefined로 출력됩니다. 따라서, setTimeout() 함수를 this 키워드와 함께 사용하려면 bind(this) 함수를 사용해 의도한 객체의 필드 값들을 참조할 수 있습니다.

 

---

참조

1. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer

객체 초기자

2. https://www.edwith.org/boostcourse-web/lecture/16780/

[LECTURE] 3) bind메소드로 this제어하기 : edwith

3. https://poiemaweb.com/js-function

Function | PoiemaWeb