Javascript：函数中的变量赋值

Question

考虑这两个块：

A座

obj = {
    a: 1,
    b: 2,
    c: 3,
    f: function() {
        alert(this.a);
        alert(this.b);
        alert(this.c);
    }
}

B座

obj = {
    a: 1,
    b: 2,
    c: 3,
    f: function() {
        var a = this.a;
        var b = this.b;
        var c = this.c;
        alert(a);
        alert(b);
        alert(c);
    }
}

一种方法比另一种更正确/更有效吗？ 当然，这是一个精简的例子——在我的代码中有更多的变量，我想要做的是通过重新分配当前函数的 scope 的变量而不是每次在函数中键入this.varName来节省时间。 它有效，但它正确吗？

编辑：为了澄清，变量将在整个函数中广泛使用。 普遍的共识似乎是，为此，通过本地 scope 重新分配是 go 的方式。

Answer 1

要看。 如果您只打算使用该值一次，那么添加存储然后检索该值的开销是没有意义的。 另一方面，如果您在 function 的 scope 中多次引用该值，则只获取一次是有意义的。

Answer 2

在

f: function() {
    a = this.a;
    b = this.b;
    c = this.c;
    alert(a);
    alert(b);
    alert(c);
}

不仅全局分配和查找效率较低，而且您正在污染全局 scope 因为a = this.a this.a 正在分配给全局a 。

编辑：

假设this.a和this.b导致 getter 被触发，而alert(a)导致调用a值的toString方法。

操作顺序有区别

var a = this.a, b = this.b;
alert(a); alert(b);

哪个（获取a，获取b，a toString，b toString）和

alert(this.a); alert(this.b);

哪个（获取a，a toString，获取b，b toString）和

可能有充分的理由更喜欢一种操作顺序而不是另一种，但从效率方面来说，第二种可能更好。

由于操作顺序不同，当成员只有一次使用时，您不应依赖保留语义的 JavaScript 缩小器来优化第一个到第二个。

Answer 3

这一切都取决于。 如果您只在 function 中访问该属性一次，则第一次更快。 如果您多次访问它，使用第二个代码块的修改版本会更快。

将第二个版本更改为将a 、 b和c声明为f()的本地变量将避免对 scope 链进行多次扫描并对其进行遍历 - 同样， this是您需要多次访问这些属性的情况。

Answer 4

Nicholas Zakas 提到这是加快 JavaScript 的一种方式。 从视频的摘要：

与全局变量类似，可以通过创建局部变量来保存多次引用的 object 属性和数组项来提高性能。 另外，请记住，更深层次的 object 属性和数组项查找（例如，obj.name1.name2.name3）更慢。

Answer 5

第一种方法相对更有效，因为在第二种方法中，您正在复制变量，因此将占用所有变量的一个额外语句和更多 memory 空间（代码和变量）。

Answer 6

您的示例中缺少一些关键内容。 我只关注f function，假设代码的rest是一样的：

如果您只是访问存储在 object 上的值，则没有理由存储临时变量，它只会破坏工作：

function () {
  //use the values as they are
  alert( this.a );
  alert( this.b );
  alert( this.c );
}

但是，如果您正在执行计算并需要临时缓存结果以供重复使用，则应使用局部变量。 确保它们不会污染全局 scope（ window对象）； 使用var使变量仅在本地持续存在。

function () {
  var foo;
  foo = this.a / this.b + this.c;

  alert( this.a * foo );
  alert( this.b / foo );
  alert( this.c + foo );
}

编辑添加：

有两种不同类型的变量被引用。 附加到 object 的变量（使用this.varname或this['varname']访问）和仅存在于本地 scope 中的变量（使用var varname声明并使用varname访问）。

任何附加到 object 的变量都可以公开访问，并且应该用于在 function 调用中显示数据或持久性。 在 function 中声明的任何变量只能在 function 的上下文中访问，因此是 function 的私有变量。 它们不会在调用之间保留值，但是它们可用于在对子函数的调用之间保留数据。

在Block A和Block B之间， Block A是与对象数据交互的首选方法，但在大多数情况下，function 执行更大系列的操作，这些操作通常涉及更复杂的行为。 如果 function 包含需要this.a 、 this.b和this.c值的回调，则需要使用别名来传递数据，因为this会在上下文之间发生变化。

这不会像预期的那样提醒1 、 2和3

f:function ()
{
  $(foo).click(function g(){
    //`this` does not refer to the object `f` belongs to, but the element being clicked on
    //and therefor is not likely to work as expected
    alert( this.a );
    alert( this.b );
    alert( this.c );
  });
}

这个版本将：

f:function()
{
  var a,b,c;
  a = this.a;
  b = this.b;
  c = this.c;
  $(foo).click(function g(){
        alert( a );
        alert( b );
        alert( c );
  });
}

Answer 7

如果您可以稍微更改 object 结构，请尝试将所需的属性放入容器（z）中，如下所示：

obj = {
    z: {
        a: 1,
        b: 2,
        c: 3
    },
    f: function() {
        var z = this.z;
        for(var prop in z) {
            alert(z[prop]);
        }
    }
}

Answer 8

1）您应该使用var来声明变量，否则它们将是全局变量。

2) 是的，复制值可以节省您输入的时间，并且执行速度会更快，因为访问 object 属性并不是一个非常便宜的操作。 JavaScript 没有实现 arrays； 他们总是哈希。

Answer 9

var obj = {
    a: 1,
    b: 2,
    c: 3,
    f: function () {
        for (var property in this) {
            if (property != "f")
                alert(property + "=" + this[property]);
        }
    }
};
obj.f();

Answer 10

我希望您打算将 var 放在 Block B 中每个变量声明的前面。否则，您正在做一些您可能不打算做的事情。 不是将值设置为匿名 function 独有的变量，而是将其分配给属性 f，而是在全局 ZA8CFDE6331BD59EB666AC96F8911 上的属性 a、b、c 上设置值。

我希望您的意思是将 var 放在匿名 function 中的每个变量 a、b 和 c 的前面。

根据 Nicholas Zakas 所写的High Performance Javascript一书，他提到了标识符解析所涉及的成本（查找您正在使用的变量名称）。 他指出局部变量是最便宜的，而全局变量是最昂贵的。

因此，在没有 var 的示例（B 块）中，您所做的是昂贵的。 如果您有 var，那么您所做的对于标识符查找来说是最佳的。

如果您对 JS 的性能感兴趣，建议您购买Nicholas 的书。

Answer 11

如果 Donald Knuth 说“我们应该忘记小的效率，大约 97% 的时候说：过早的优化是万恶之源”，如果他死了，他就会在坟墓里翻身。 对于我自己，我开始有这种感觉。

注意，男孩和女孩。 效率无所谓！ 它只是没有！

让我们忘记像@Pheonix 这样的彻头彻尾的精神错乱——顺便说一句，它的拼写是“Phoenix”！ - 实际上担心局部变量占用的空间，一旦 function 结束大声喊叫并专注于原始问题，这些空间就会被回收。 考虑以下代码：

$(function() {
    var b;
    var d = { b : 1 }
    var n = 100000;

    var now = function() {
       return new Date().getTime();
    };
    var doTime = function(f) {
        var t = now();
        f();
        return now() - t;
    };

    var tm1 = doTime(function() {
       for (var i=0; i<n; i++) {
           b = 1;
       }
    });   

    var tm2 = doTime(function() {
       for (var i=0; i<n; i++) {
           b = d.b;
       }
    });
    $('body').empty().html("<table><tr><tr><td>Time without</td><td>"
      + tm1 + "ms</td><tr>"
      + "<tr><tr><td>Time with</td><td>"+ tm2 + "ms</td><tr>"
      + "<tr><tr><td>Total diff</td><td>"+ (tm2 - tm1) + "ms</td><tr>"
      + "<tr><tr><td>Avg. diff</td><td>"+ ((1000000.0 * (tm2 - tm1)) / n)
      + "ns</td><tr>"
    + "</table");
});

在我那台可怜的五年前的笔记本电脑上，它说像这样的 object 取消引用需要 90纳秒。 这意味着，您可以每秒执行1100 万次。 你打算做一千一百万次吗？ 如果没有，请不要花一秒钟的时间担心它。

众所周知，优化正确的代码比纠正优化的代码更容易。 写好你的代码，然后对它进行基准测试。 如果速度太慢，请找出瓶颈（我保证您不会无法将 object 取消引用的结果存储在本地值中），并消除它们。

现在，我们将您带回到定期安排的节目中。

Answer 12

照原样。 不。由于您没有使用var来声明变量，因此您在全局 scope 而不是本地 scope 中声明这些变量。

如果您反复访问一个变量，那么绝对值得在本地 scope 中缓存一个副本。 这是因为如果变量在立即 scope 中不可用，则函数和对象具有要搜索的范围链。 In the following example, the innermost function must first search in its local scope, then the scope of its parent function, and then finally in the outermost function's scope to find i . 如果i不在这个 scope 中，那么它也必须搜索全局 scope。

(function () {
    var i = 10;
    (function () {
        (function() {
            console.log(i); // i is 10
        })();
    })();
})();

在本地 scope 中缓存变量的问题在于，有时代码会变得难以阅读，并且在几乎任何情况下，可读性都胜过效率（计算机在处理低效代码方面比人类在阅读写得不好的代码方面要好得多）。

---

在 function 顶部声明变量

如果您真的关心效率/正确性，请在 function 的开头声明所有变量。 这使得 javascript 在创建 function 的本地 scope 时非常高效。 function 深处的声明效率低下，因为 javascript 必须首先检查本地 scope 中是否有可用空间，并在需要时调整 Z31A1FD14ECZEAB188A58A1FD14ECZEAB18 的大小请注意，即使您没有在 function 的顶部声明变量，一些编译器也会为您做这件事，因为它是 ECMA 规范的一部分——这可能会导致一些问题）。 资源

例如。

var i = 1;
function test() {
  console.log(i); // undefined
  var i = 10;
}
test();

本质上，javascript 引擎已将您的代码编译为：

var i = 1;
function test() {
    var i;
    console.log(i); // undefined
    i = 10;
}
test();

---

固定版本的代码（如果您要对 a、b 或 c 进行进一步操作）。

var obj = {
    a: 1,
    b: 2,
    c: 3,
    f: function() {
        var a, b, c;
        a = this.a;
        b = this.b;
        c = this.c;
        alert(a);
        alert(b);
        alert(c);
    }
}