如何选择直接使用表达式和将其赋值给变量？

Question

所以这让我很困惑。变量很昂贵吗？ 我们来看看这段代码：

var div1 = document.createElement('div');
var div2 = document.createElement('div');

div2.appendChild(div1);

现在这个

var div2 = document.createElement('div');

div2.appendChild(document.createElement('div'));

所以，在第二个例子中，我做了与第一个例子相同的事情。声明变量比不声明变量更昂贵吗？我可以通过即时创建和使用元素来节省内存吗？

编辑：这是说明问题的示例代码。我知道在这种特定情况下，节省（或不节省）的内存是最少的。

Answer 1

变量在 JavaScript 中极其便宜，但是，无论它们多么便宜，一切都是有成本的。

话虽如此，这并不是一个明显的区别，您应该更多地考虑使代码可读，而不是执行微优化。

您应该使用变量来保存重复操作。在上面的示例中，您可能需要指向新创建的变量div

，否则您将无法对其执行任何操作...除非您最终从 DOM 中检索它；事实证明，这比变量的成本要高很多倍，因为 DOM 操作是 JavaScript 最慢的部分之一。

Answer 2

理论上，不进行变量声明可以节省极少量的内存，因为变量声明要求 JavaScript 引擎在变量绑定对象上创建一个属性，用于声明它的执行上下文。 （请参阅规范，第 10.5 节以及相关章节。）

实际上，你永远不会注意到差异，即使是在像 IE 这样的（相对）较慢的引擎上也是如此。随意使用变量，只要它们能让代码更清晰。在变量绑定对象上创建属性（例如，声明变量）是一个非常非常快速的操作。 （当然，在全局范围内避免使用它，但不是因为内存使用。）

警告

：如果变量引用您仅临时保存的大内存结构，并且您在该函数上下文中创建闭包，则大内存结构可能（在某些引擎中）在内存中保留更长时间比必要的。示例：

function foo(element) {
    var a = /* ...create REALLY BIG structure here */;
    element.addEventListener("event", function() {
        // Do something **not** referencing `a` and not doing an `eval`
    }, false);
}

在不复杂的引擎中，由于事件处理程序是对

foo

调用上下文的闭包，理论上

a

 对处理程序可用，因此它引用的内容仍然是“可引用的”，并且不可用于垃圾回收，直到/除非该事件处理函数不再可引用。在任何像样的引擎中（例如 Chrome 中的 V8 引擎），因为您既不引用 

a

 也不在闭包（事件处理程序）中使用 

eval

，所以没问题。如果您想防御平庸的引擎，请在 

a

 返回之前将 

undefined

 设置为 

foo

，这样引擎（无论多么平庸）就知道事件处理程序不会引用该结构，即使它要引用该结构。参考

a

.

是的，您可以节省内存，不，这绝不是重要的数量。

Answer 3