자바스크립트 - this, bind

자바스크립트 - this, bind

 

(해당 내용은 smashingmagazine 사이트를 참고해서 제작하였음.)

 

자바스크립트를 학습하다보면 의도하는 context대로 작동하지 않을 때가 있다. 이것은 자바스크립트 자체의 규칙이 존재한다는 증거이며 우리는 이를 학습하고 적절하게 사용할 줄 알아야 한다.

 

먼저 아래 코드 예시를 살펴보자. 

 

var myObj = {

    specialFunction: function () {

    },

    anotherSpecialFunction: function () {

    },

    getAsyncData: function (cb) {
        cb();
    },

    render: function () {
        var that = this;
        this.getAsyncData(function () {
            that.specialFunction();
            that.anotherSpecialFunction();
        });
    }
};

myObj.render();

 

결과부터 말하자면 위 코드는 제대로 동작한다.

 

하지만 render함수에서 that.specialFunction()이 아닌 this.specialFunction을 했어도 동작했을까? 

정답은 아니다. render함수에 들어오는 this는 객체 myObj를 참조하고 있지만 그 안에 getAsyncData를 통해서 새로운 function (콜백함수)로 들어왔기 때문에 이 곳에서 context가 바뀌게 된다. 

 

이를 해결하기 위해서 위 코드에서 var that = this라는 myobj의 this값을 유지할 수 있는 변수를 정의하였고 이 변수를 통해서 함수들을 호출하였다.

 

이 방법이 나쁜 것은 아니다. 하지만 자바스크립트 내장함수에는 이러한 context를 이어나갈 수 있도록 지원하는 bind()함수가 있다.

 

bind()

bind()는 Function 프로토타입의 내장함수로서 실행됐을 때 제공된 value값으로 this가 세팅된 상태로 새로운 함수를 만들어내는 함수이다. 위의 render함수를 bind를 사용해서 아래와 같이 표현할 수 있다.

 

render: function () {
    this.getAsyncData(function () {
    	this.specialFunction();
        this.anotherSpecialFunction();
    }.bind(this));
}

bind의 인자로 들어온 this를 콜백함수에 전달함으로써 this context가 유지되는 것을 볼 수 있다.

 

Function.prototype.bind의 내부 구조는 아래와 같다.

Function.prototype.bind = function (scope) {
    var fn = this;
    return function () {
        return fn.apply(scope);
    };
}

 

아래는 bind를 사용한 다른 예시이다.

 

var foo = {
    x: 3
}

var bar = function(){
    console.log(this.x);
}

bar(); // undefined

var boundFunc = bar.bind(foo);

boundFunc(); // 3

 

즉 콜백에서 this가 작동하려면 바인딩을 해줘야 작동한다.