javascript - 如何将上下文传递给匿名函数？

Question

有一些功能，那就是做一些长期的工作，并提供回调。

someFunc: function(argument, callback, context) {
  // do something long

  // call callback function
  callback(context);
}

在应用程序中，我使用此功能

someFunc('bla-bla', function (context) {
  // do something with this scope
  context.anotherFunc();
}, this);

如何在不传context参的情况下实现回调函数？

需要一些这样的：

someFunc('bla-bla', function () {
  // do something with this scope
  this.anotherFunc();
}, this);

Answer 1

接受的答案似乎有些过时了。假设您在相对现代的浏览器上运行，您可以Function.prototype.bind在vanilla javascript中使用。或者，如果您使用underscore或jQuery，您可以分别使用_.bindor $.proxy（如果需要，它将回退到call/ apply）。

以下是这三个选项的简单演示：

// simple function that takes another function
// as its parameter and then executes it.
function execute_param(func) {
    func();
}

// dummy object. providing an alternative context.
obj = {};
obj.data = 10;

// no context provided
// outputs 'Window'
execute_param(function(){
    console.log(this);
});

// context provided by js - Function.prototype.bind
// src: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
// outputs 'Object { data=10 }''
execute_param(function(){
    console.log(this);
}.bind(obj));

// context provided by underscore - _.bind
// src: http://underscorejs.org/#bind
// outputs 'Object { data=10 }'
execute_param(_.bind(function(){
    console.log(this);
},obj));

// context provided by jQuery - $.proxy
// src: http://api.jquery.com/jQuery.proxy/
// outputs 'Object { data=10 }'
execute_param($.proxy(function(){
    console.log(this);
},obj));

您可以在此处的 jsfiddle 中找到代码：http: //jsfiddle.net/yMm6t/1/（注意：确保开发人员控制台已打开，否则您将看不到任何输出）

Answer 2

用于Function.prototype.call调用函数并手动设置该this函数的值。

someFunc: function(argument, callback, context) {
    callback.call(context); // call the callback and manually set the 'this'
}

现在您的回调具有预期this值。

someFunc('bla-bla', function () {
  // now 'this' is what you'd expect
    this.anotherFunc();
}, this);

---

当然，您可以在.call调用中像往常一样传递参数。

callback.call(context, argument);