함수 호출

자바스크립트에서 함수를 언제 어디에서 호춯했느냐에 따라 함수의 컨텍스트(ex: this)가 달라진다.

 

apply() 함수는 컨텍스트, 인자배열이라는 파라미터 두개를 갖는다. 컨텍스트가 null이면 전역 컨텍스트를 사용한다.

 

자바스크립트는 컨텍스트 변경을 이용해 상태를 공유(특히 이벤트 콜백에서) 한다.

 

제이쿼리는 apply()와 call()을 이용해 자신의 api에서 컨텍스트를 변경한다.

$('.clicky').click(function() {
    $(this).hide();
});

$('p').each(function() {
    $(this).remove();
});

 

일반저긍로 지역 변수에 this 값을 저장해서 원래 컨텍스트에 접근하는 방법을 흔히 사용한다.

var clicky = {
    wasClicked: function() {

    },
    addListeners: function() {
        var self = this;
        $('.clicky').click(function() {
            self.wasClicked();
        });
    }
};

clicky.addListeners();

 

그러나 apply로 원래 컨텍스트를 포함하는 다른 익명 함수 내의 콜백을 감싸면 더 깔끔한 코드를 만들 수 있다.

var proxy = function(this, thisObject) {
    return (function() {
        return function.apply(thisObject, arguments);
    });
};

var clicky = {
    wasClicked = function() {

    },
    addListeners: function() {
        var self = this;
        $('.clicky').click(proxy(this.wasClicked, this));
    }
};

위 예제는 클릭 콜백 내에서 컨텍스트를 사용하도록 지정했다.

제이쿼리의 proxy() 함수를 이용할 수 있다.

$('.clicky').click($.proxy(function() {}, this));

 

자바스크립트 위임(delegate) 기능은 apply()와 call()을 활용할 수 있는 또 다른 예다.

자바스크립트에서는 한 함수의 호출을 다른 함수로 위임할 수 있으며 심지어 전달된 인자도 바꿀 수도 있다.

var App = {
    log: function() {
        if(typeof console == 'undefined') return;

        // 인자를 적절한 배열로 바꾼다.
        var args = jQuery.makeArray(arguments);

        // 새 인자를 추가한다.
        args.unshift("(App)");

        // console에 위임한다.
        console.log.apply(console, args);
    }
};

인자를 배열로 만들고, 새 인자도 직접 추가했다. 마지막으로 호출을 console.log()로 위임했다.

arguments는 호출이 일어난 현재 범위와 인자 배열을 포함하는 변수로 인터프리터가 arguments의 값을 설정한다.

arguments의 값은 바꿀 수 없으므로 일반적인 배열이 아니다.

따라서 jQuery.makeArray()로 arguments의값을 변환한 다음 사용해야 한다.