JavaScript中的this对象

Question

我过去4个月一直在从事Web项目。为了优化代码性能，我们使用了一种模式。我的疑问是，它是否真的可以提高性能？

每当我们需要使用this对象时，我们将其分配给一个本地变量，并使用该变量。

function someFunction()
{
  var thisObject = this;
  //use thisObject in all following the code. 
}

这里的假设是，将this对象分配给本地堆栈变量将提高性能。

我没有在任何地方看到过这种编码方式，因此怀疑它是否有用。

编辑：我知道将此对象分配给本地变量是为了保留对象，但这不是我们的情况。

- Tejesh Alimilli

---

这在Node.js中非常常见。但我认为更多是为了在回调中保持引用，而不是为了提高性能。 - Chad

我猜这对性能实际上会更糟。Google Closure Compiler（使用高级优化）将删除var声明，并将“thisObject”的实例替换为“this”，即使使用变量通常会导致更小的压缩大小。Closure编译器针对速度和大小进行优化，但在有选择时似乎更偏向于速度而非大小。 - Dagg Nabbit

Answer 1

虽然在Javascript中这是一种常见的做法，但出于性能原因不建议这样做。通常将this对象保存在另一个命名的本地变量中，以保留在函数内定义的回调函数中this值。

function someFunction() {
  var thisObject = this;
  var someCallback = function() {
    console.log(thisObject === this);  // Could print true or false
  };
  return someCallback;
}

无论thisObject === this是否为真取决于它的调用方式。

var o = {} 
o.someFunction = someFunction();
var callback = o.someFunction();
callback();        // prints false
callback.call(o);  // prints true

- JaredPar

---

我们在简单的函数中使用了这个模式，这些函数没有任何回调之类的东西。我想知道它是否有任何性能提升？ - Tejesh Alimilli

@TejeshAlimilli 这几乎不可能有任何明显的性能差异。 - JaredPar

谢谢。这就是我想知道的。 - Tejesh Alimilli

将this保存在变量中的另一个原因是为了**进行代码压缩(minified)**。 - gdoron

Answer 2

与所有性能问题一样，它们应该通过实际测量性能来进行检查。在一个相当简单的测试用例（您的实际代码可能会有所不同）中，我发现在各个浏览器中结果不尽相同。

Chrome和Firefox在这两个测试中并没有太大的区别，但两者之间存在微小的差异，且差异方向相反。IE9显示使用保存的this，我称其为self，速度明显较慢。

由于Chrome和Firefox没有明显且一致的性能差异，而IE9显示this测试用例要快得多，因此可以得出结论，所询问的设计模式在各种浏览器上并不能提供一致的性能提升。

在我的代码中，当我需要一个内联事件处理程序、回调或方法中对原始对象进行一致引用时，我仅在需要时才将this的副本保存到另一个变量中。换句话说，我只在需要时应用这种设计模式。

在此SO页面上先前关于此设计模式的讨论中，得出了结论，一些库使用这种设计模式是为了允许额外的最小化，因为this无法被缩小到少于四个字符的长度，但将其分配给局部变量可以被缩小到单个字符的变量名。

- jfriend00

---

Opera似乎对测试用例进行了微调优，它们在完全相等的时间内运行 :-) - Bergi

Answer 3

即使这种优化有（积极）效果，很可能取决于解释器。

其他版本可能会撤销结果。

然而，最终你应该测量，而不是猜测。

- stefan bachert