3

以下两个代码示例（快速、最佳实践等）之间有区别吗？

这个：

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

或这个：

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

如果我多次调用范围有区别吗？我是使用变量还是只使用范围？

4

4 回答 4

6

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

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

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

function foo() {
  var doc = document;

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

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

作用域继承是 JavaScript 语言的重要组成部分，我强烈推荐这两个阅读材料以便更好地理解：

于 2014-08-27T12:38:11.357 回答
1

为了回答具体问题，而不是太理论化，您的两个示例之间的速度差异非常小。

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

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

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

查看Ops/Sec

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

Opera 24.0 - 排除变量定义更快

Firefox 31.0 - 排除变量定义更快

IE 11 - 排除变量定义更快

于 2014-08-27T12:50:11.880 回答
1

除了我是对此的参考之外，它们都是相同的。

当您的主要上下文中有不同的上下文时，这可能非常有用，因为这将始终引用其调用的上下文，而我将引用您的主要上下文。

例子

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';

  }

}
于 2014-08-27T12:40:58.313 回答
0

如果我多次调用范围有区别吗？

对我来说，与变量相比，多次调用范围没有区别，因为它只执行相同的工作，只是分配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这里使用。

于 2014-08-27T12:44:48.967 回答