使用回调和闭包时在 Javascript 中保持对“this”的引用

Question

我发现自己将“this”分配给一个变量，这样我就可以轻松地在回调和闭包中使用它。

这是不好的做法吗？有没有更好的方法来引用原始函数？

这是一个典型的例子。

User.prototype.edit = function(req, res) {

  var self = this,
      db = this.app.db;

  db.User.findById('ABCD', function(err, user)) {

    // I cannot use this.foo(user)
    self.foo(user);
  });
};

User.prototype.foo = function(user) {

};

您通常使用这种方法还是找到了更清洁的解决方案？

Answer 1

在回调中处理this主要有三种方式：

1。创建一个词法范围的变量，就像你目前正在做的那样

这个新变量的两个最常见的名称是that 和self。我个人更喜欢使用that，因为浏览器有一个名为 self 的全局窗口属性，如果我隐藏它，我的 linter 会抱怨。

function edit(req, res) {
    var that = this,
    db.User.findById('ABCD', function(err, user){
        that.foo(user);
    });
};

这种方法的一个优点是，一旦将代码转换为使用that，您就可以根据需要添加任意数量的内部回调，并且由于词法作用域，它们都将无缝地工作。另一个优点是它非常简单，甚至可以在古老的浏览器上运行。

2。使用 .bind() 方法。

Javascript 函数有一个 .bind() 方法，可让您创建一个具有固定 this 的版本。

function edit(req, res) {
    db.User.findById('ABCD', (function(err, user){
        this.foo(user);
    }).bind(this));
};

在处理this 时，bind 方法对于必须添加包装函数会更加冗长的回调之一特别有用：

setTimeout(this.someMethod.bind(this), 500);

var that = this;
setTimeout(function(){ that.doSomething() }, 500);

bind 的主要缺点是，如果您有嵌套的回调，那么您还需要对它们调用 bind。此外，IE <= 8 and some other old browsers 本身并未实现 bind 方法，因此如果您仍然需要支持它们，您可能需要使用某种 shimming library。

3。如果您需要对函数范围或参数进行更细粒度的控制，请回退到 .call() 和 .apply()

在 Javascript 中控制函数参数的更原始的方法，包括 this，是 .call() 和 .apply() 方法。它们允许您使用任何对象作为其this 和任何值作为其参数来调用函数。 apply 对于实现可变参数函数特别有用，因为它将参数列表作为数组接收。

例如，这里有一个版本的 bind，它接收绑定为字符串的方法。这让我们只写下this 一次而不是两次。

function myBind(obj, funcname){
     return function(/**/){
         return obj[funcname].apply(obj, arguments);
     };
}

setTimeout(myBind(this, 'someMethod'), 500);

Answer 2

不幸的是，这是一种行之有效的方法，尽管that 是this“复制”的广泛命名约定。

你也可以试试：

db.User.findById('ABCD', this.foo.bind(this));

但这种方法要求foo() 具有与findById() 预期的签名完全相同的签名（在您的示例中，您跳过了err）。

Answer 3

您可以使用以下方法为回调创建代理：

var createProxy = function(fn, scope) {
  return function () {
    return fn.apply(scope, arguments);
  }; 
};

使用它，您可以执行以下操作：

db.User.findById('ABCD', createProxy(function(err, user)) {
  this.foo(user);
}, this));

jQuery 做了类似的事情：$.proxy

而且，正如其他人使用bind 所指出的那样，如果存在兼容性问题，请查看此处：

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind#Compatibility