Question

以下两个代码示例（速度，最佳实践等）之间是否存在差异？

此：

function() {
    var me = this;
    me.doSomething();
    me.doAnotherThing();
};

或者这个：

function() {
    this.doSomething();
    this.doAnotherThing();
}

如果我多次调用示波器，会有区别吗？我是使用变量还是仅使用范围？

Answer 1

在JavaScript中，范围是继承的。因此，当您想要从父作用域访问变量时，引擎将首先查看当前作用域，查看它是否存在，然后将在父作用域中搜索。它将一直持续到它找到你所要求的为止。

this变量在本地范围内可用（实际上在激活对象中），引擎将能够立即解析它。因此，没有性能原因来缓存它。

但是，当您从父作用域访问变量时，这会变得很有趣。例如，假设您想在函数中多次访问document变量（来自全局范围）。通过缓存它，引擎只需要解析一次，从而提高性能：

function foo() {
  var doc = document;

  doc.getElementsByTagName('body');
  doc.querySelectorAll('div');
}

无论如何，截至今天，这作为一种理论方法更有趣，因为大多数现代JS引擎能够很好地优化它（http://jsperf.com/scope-resolution-cached-not-cached）。

范围继承是JavaScript语言的重要组成部分，我强烈推荐这两个读数以便更好地理解：

Answer 2

除了 me 是对此的引用外，它们都是相同的。

当您在主要内容中使用不同的上下文时，这非常有用，因为此将始终引用其调用的上下文，而 me 将引用您的主要背景。

实施例

function MainFunction(){
  var me = this;

  function secondFunction(){
    // this refers to this anonymous function
    this.varName = 'something';
    // me is a reference to MainFunction
    me.varName = 'something';

  }

}

Answer 3

要回答具体问题，而不是过于理论化，两个例子之间的速度差异非常小。

创建额外的变量查找会使脚本变慢。因为创建变量是一个额外的操作，而两个代码基本上是相同的。由于您正在使用成员函数创建对象，因此如果您有数千个对象，则可以放大非常小的性能。

与往常一样，您的性能会因浏览器而异。这是一个jsPerf test，表明差异很小：

http://jsperf.com/variable-caching-this

查看 Ops / Sec

Chrome 36.0.1985.143 m - 排除变量定义更快

Opera 24.0 - 排除变量定义更快

Firefox 31.0 - 排除变量定义更快

IE 11 - 排除变量定义更快

Answer 4

如果我多次调用示波器会有区别吗？

对我而言，与变量相比，只调用范围几次没有区别，因为只有将this分配给变量才能执行相同的工作。

我是使用变量还是仅使用范围？ 这取决于具体情况，因为有时你需要缓存this，以免它与其他人混在一起。考虑一下。

function blabla() {
   var thisis = this;
   $.each(function() { 
     //`this` here is not equal to `thisis` so if you need `thisis` here you will assign to a variable first.
   });
}

很抱歉在这里使用jquery。

Javascript速度：范围或变量

4 个答案: