Javascript:{} 与 new Object() 性能

Question

这个问题在这里已经有了答案:





What is the difference between `new Object()` and object literal notation?

(12 个回答)


7年前关闭。




我想了解为什么当两者都做同样的事情时性能会有所不同？



Benchmark

Answer 1

{} 的性能可以解释为:

{} 是 Javascript 中对象的文字，文字的计算速度更快。

作为额外的好处，文字在您的代码中占用的空间更少，因此整体文件大小为
较小。

文字代码的最终结果与新的 Object() 代码相同，但它在几乎所有浏览器中的执行速度都更快(Firefox 3.5 显示几乎没有区别)。

随着对象属性和数组项的数量增加，使用文字的好处也随之增加。

由于 Javascript 中的范围管理机制，对象文字 {} 的执行速度更快

在执行 JavaScript 代码时，会创建一个执行上下文。执行上下文(有时也称为作用域)定义了代码将在其中执行的环境。

在页面加载时创建全局执行上下文，并在执行函数时创建额外的执行上下文，最终创建一个执行上下文堆栈，其中最顶层的上下文是事件的。

每个执行上下文都有一个与之关联的作用域链，用于标识符解析。作用域链包含一个或多个为执行上下文定义作用域内标识符的变量对象。

全局执行上下文在其作用域链中只有一个变量对象，这个对象定义了 JavaScript 中所有可用的全局变量和函数。

当一个函数被创建(但未执行)时，它的内部 [[Scope]] 属性被分配为包含创建它的执行上下文的作用域链(内部属性无法通过 JavaScript 访问，因此您无法访问此属性直接地)。

稍后，当执行流入函数时，将创建一个激活对象，并使用 this 的值、参数、命名参数和函数的任何局部变量进行初始化。激活对象首先出现在执行上下文的作用域链中，然后是函数的 [[Scope]] 属性中包含的对象。

在代码执行期间，通过搜索执行上下文的作用域链来解析变量和函数名称等标识符。

标识符解析从作用域链的前面开始，向后进行。考虑以下代码:

function Add(n1, n2) {
  this.n1 = n1;
  this.n2 = n2;
  this.val = this.n1 + this.n2;
}

var result = new Add(5, 10);

执行此代码时，add 函数具有 [[Scope]] 属性，该属性仅包含全局变量对象。

当执行流入 add 函数时，会创建一个新的执行上下文，并将包含 this、参数、n1 和 n2 的激活对象放入作用域链中。

下图，“执行上下文和作用域链的关系”说明了在执行 add 函数时发生的幕后对象关系。



在 add 函数内部，标识符 num1 和 num2 需要在函数执行时解析。

通过检查作用域链中的每个对象直到找到特定标识符来执行此解析。

搜索从作用域链中的第一个对象开始，它是包含函数局部变量的激活对象。

如果在那里找不到标识符，则会检查作用域链中的下一个对象以获取标识符。找到标识符后，搜索停止。

在本例中，标识符 num1 和 num2 存在于本地激活对象中，因此搜索永远不会继续到全局对象。

理解 JavaScript 中的作用域和作用域链管理很重要，因为标识符解析性能与要在作用域链中搜索的对象数量直接相关。

标识符存在于作用域链的更远的位置，搜索持续的时间越长，访问该变量所需的时间就越长；如果作用域管理不当，它们会对脚本的执行时间产生负面影响。