JS函数调用之apply()两个用途

在JavaScript中，函数和其他东西一样都是对象。然而，和其他对象不同的是，函数可调用的。函数内上下文，如this的取值，取决于调用它的位置和方法。

apply()函数有两个参数：第1个参数是上下文，第2个参数是参数数组。如果上下文是null，则使用全局变量代替。

jQuery在其API的实现中就利用了apply()和call()来更改上下文，比如在事件处理程序中或者使用each()来做迭代时。

更改上下文

为了访问原始上下文，可以将this的值存入一个局部变量中，这是一种常见的模式。

var button = {
    clickHandle: function() {
        console.log('click');
    },
    addListeners: function() {
        // 将this的值存入一个局部变量中
        var self = this;
        $('button').click(function() {
            self.clickHandle();
        });
    }
};

我们可以通过使用apply将这段代码变得更干净一些，通过将回调函数装在另一个匿名函数中来保持原始上下文：

// 将回调包装在另一个匿名函数中，来保持原始的上下文
var proxy = function(func, context) {
    return (function() {
        return func.apply(context, arguments);
    });
};
var button = {
    clickHandle: function() {
        console.log('click');
    },
    addListeners: function() {
        // 在点击事件的回调中指定了要使用的上下文
        $('button').click(proxy(this.clickHandle, this));
    }
};

委托

可以将一个调用委托给另一个调用，甚至可以修改传入的参数。

var App = {
    log: function() {
        if (typeof console == 'undefined') return;
        // 将参数转换为合适的数组
        // var args = $.makeArray(arguments);
        var args = [].slice.apply(arguments);
        // 插入一个新的参数
        args.unshift('(App)');
        
        // 委托给console
        console.log.apply(console, args);
    }
};