在 knockout.js 视图模型中使用 `var self = this` 有什么好处 [重复]

Question

我在几乎所有的 knockout.js 视图模型示例中都看到 var self = this 行，然后所有局部变量都被引用为 self.variableName。这比使用this.variableName 有什么优势？

Answer 1

通常使用这种方法的主要原因是使当前的this 可用于子函数或闭包。例如：

var myObject = {
  param: 123,
  method: function(){
    alert( this.param );
  },
  method2: function(){
    setTimeout(function(){
      alert( this.param );
    },100);
  }
}

在上面调用myObject.method 会给你123 的正确警报。但是调用myObject.method2 会给你undefined。这是因为与setTimeout 一起使用的匿名函数内部的this 不引用myObject，取决于JavaScript 解释器，它会指向不同的东西。但是，如果您有：

method2: function(){
  var self = this;
  setTimeout(function(){
    alert( self.param );
  },100);
}

这是因为this 的当前状态——在正确的点——被捕获，并且对于它可用的每个函数范围总是引用myObject。

问题不仅限于使用setTimeout。在你有匿名函数、子函数或闭包的任何时候，这个技巧都会派上用场。有时人们会使用 self、that 或更具描述性的名称，具体取决于当前引用所代表的内容。

而不是存储为变量

除了使用self 或任何其他变量来“记住” this 在任何特定点的状态之外，还有一种替代方法，那就是将您的匿名函数或子函数与特定上下文“绑定”。许多现代解释器现在都支持Function.prototype.bind 方法，可以这样使用：

var method = function(){
  console.log(this);
};
var methodWithWindow = method.bind(window);
var methodWithDocument = method.bind(document);
var methodWithObject = method.bind({random:"object"});

依次调用每个绑定的方法将为您提供以下控制台输出：

Window
Document
Object {random:"object"}

如果您希望支持较旧的浏览器，您可以使用polyfill，或者如果您更喜欢更简单的实现，也可以不用担心绑定参数。绑定代码的基本功能如下：

!Function.prototype.bind && (Function.prototype.bind = function(context){
  var method = this;
  return function(){
    method.apply(context, arguments);
  }
})

那么，使用 bind 的初始示例看起来如何？

method2: function(){
  setTimeout((function(){
    console.log(this); // `this` will be the same as the `this` passed to bind.
  }).bind(this),100);
}

正如您在上面看到的，一旦绑定，返回的函数（闭包）会保留指定的上下文；所以它可以传递到你想要的任何地方，并且仍然保留一个this 对你想要的对象的引用。这在method2 示例中很有用，因为我们将方法与当前上下文捆绑在一起并将其传递给setTimeout，后者将在稍后执行绑定的方法（在我们退出当前块执行很久之后）。

使用self 或任何其他变量时也会发生同样的情况。该变量将被捕获在函数的作用域链中，并且在最终再次调用该函数时仍然可以访问。但是，使用bind 的好处是，如果您愿意，您可以轻松地覆盖上下文，您必须编写自己的特定方法来覆盖self 变量。

警告：这里值得注意的是，当你绑定一个函数时，会返回一个新函数。如果您将绑定函数与事件侦听器混合使用，然后尝试使用原始函数而不是绑定版本删除侦听器，这可能会导致混乱。

另外，因为绑定返回一个新函数，如果你绑定一个绑定函数，你实际上是在一个函数中包装一个函数，另一个函数。您应该意识到这一点，因为它会影响性能，并且在避免内存泄漏方面更难管理。我首选的绑定方法是使用带有自己解构方法的闭包（即依赖自我，但要确保有方法可以取消其内容），但这确实需要更多的前瞻性思考，并且在较小的 JS 项目中不太相关；或一次性函数绑定——尤其是当绑定的方法从未被任何引用捕获时。

没有自我和绑定？

还值得一提的是，有时您可以完全不使用bind 来获得相同的结果，而是使用apply — 您可以选择使用的任何东西都可以使用它。主要区别在于函数没有包含任何内容，调用 apply 实际上会在那里执行函数，然后使用不同的上下文 - 传递给 apply 的第一个参数。

var externalMethod = function(){
  console.log(this); // will output myObject when called below
};

var myObject = {
  method2: function(){
    externalMethod.apply(this);
  }
};

什么是this？

在最近的 cmets 被删除之前，用更多关于 this 的细节来详细说明这个答案。 this 将指四件事之一，具体取决于您在其中使用它的函数的调用方式：

myObject.method()

除非method 应用了.bind(context) 操作，否则以上将有this 或myObject。在这种情况下，this 将是最后绑定的上下文。

unattachedFunction()

将具有全局上下文的this（通常在浏览器环境中为window），除非unattachedFunction 已应用.bind(context) 操作。在这种情况下，this 将是最后绑定的上下文。

anyFunction.apply(otherObject)

或

anyFunction.call(otherObject)

两者都将始终具有otherObject 的this，因为以这种方式调用将覆盖任何绑定。

new myObject()

将有一个 this 引用 myObject 的新实例，这将覆盖任何绑定。

简单的思维实验

考虑到以上所有因素，this 在referencedMethod 中会是什么？

var referencedMethod = myObject.method;
referencedMethod();

正确！它将是全局上下文。这就是为什么如果你想与其他对象或代码共享方法——但仍保留原始所有者作为上下文——你真的需要绑定，或者将函数与其所有者对象捆绑在一起，以便你可以调用或应用。

Answer 2

Self 用于确保在对象中维护原始的this。

这在使用事件处理程序等时会派上用场。

你可以阅读更多关于这个here

第一个答案基本上涵盖了它，它也显示了一个很好的链接。看看吧。

Answer 3

仅供参考。 Javascript 下的this 的行为与其他语言不同。更多详情请查看MDN Docs on this