Javascript:使用函数上下文与作为参数传递有什么好处

Question

除了欺骗已经将 this 实现为某种东西的现有函数之外，您为什么要编写一个 javascript 函数以便您需要更改其上下文(通过 .call或 .apply) 而不是显式地将“上下文”作为另一个参数传递？有性能优势吗？

例子:

function tryIncrement(inc, context) {
    context = context || this; // just so we can reuse same fn for the example

    if( typeof context.val!= typeof 1|| typeof inc != typeof 1 ) return false;
    context.val += inc;
    return true;
}

var a = {name: 'A', val: 5}, b = {name: 'B', val: 20};

// reassign internal context
for(var i = 0, n = [1,3,"not a num",5]; i < n.length; i++) {
    if( tryIncrement.call(a, n[i]) ) console.log('incremented', i, n[i], a);
    else console.log('failed to increment', i, n[i], a);
}

// provide explicit context;
// could just as easily declared function so context was first param
// so it looked the same as previous implementation
for(var i = 0, n = [1,3,"not a num",5]; i < n.length; i++) {
    if( tryIncrement(n[i], b) ) console.log('incremented', i, n[i], b);
    else console.log('failed to increment', i, n[i], b);
}

Answer 1

在许多情况下，您可能希望使用 this 而不是传递额外的参数。例如考虑以下函数:

Function.prototype.async = function () {
    setTimeout.bind(null, this, 0).apply(null, arguments);
};

此函数允许我们延迟函数调用，如下所示:

alert.async("This will display later.");
alert("This will display first.");

您可以在此处查看演示:http://jsfiddle.net/AjwQu/

我们可以将它作为参数传递，而不是将函数绑定(bind)到 this:

function async(funct) {
    setTimeout.bind(null, funct, 0).apply(null, [].slice.call(arguments, 1));
}

我们现在会像这样使用它:

async(alert, "This will display later.");
alert("This will display first.");

结果是一样的:http://jsfiddle.net/63dBF/

然而，要获取参数，我们必须使用 [].slice.call(arguments, 1) 代替。在第一个示例中，我们可以简单地使用 arguments，因为函数不是参数列表的一部分。

凡事都有优点和缺点。你只需要知道什么时候使用什么。希望这能有所帮助。

好处:将使用 this 的函数转换为接受额外参数的函数非常容易，反之亦然。首先让我们定义一些实用函数:

var functProto = Function.prototype;

var bind = functProto.bind;

var bindable = bind.bind(bind);
var callable = bindable(functProto.call);
var appliable = bindable(functProto.apply);

bindable 函数允许您创建现有函数的可绑定(bind)版本，调用时返回绑定(bind)到给定参数的新函数。

callable 函数允许您创建现有函数的可调用版本，该函数在被调用时使用给定参数和 this 指针调用现有函数。

appliable 函数允许您创建现有函数的适用版本，该函数在调用时应用给定参数和指向现有函数的 this 指针。

然后给定第一个示例中的函数，我们可以创建第二个示例中的函数，如下所示:

var async = callable(functProto.async);

在此处查看演示:http://jsfiddle.net/3dSBS/

同样我们可以将第二个例子中的函数转换为第一个例子中的函数，如下所示:

Function.prototype.async = function () {
    return async.apply(null, [this].concat([].slice.call(arguments)));
};

在此处查看演示:http://jsfiddle.net/rJQyS/

如您所见，使用 this 编写函数，然后构造接受上下文作为参数的函数，比反过来要容易得多。