Javascript：{} vs new Object() 性能 [重复]

Question

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

Benchmark

Answer 1

{} 的性能可以解释为：

1. {} 是 Javascript 中对象的字面量，字面量的计算速度更快。
2. 作为额外的好处，文字在代码中占用的空间更少，因此整体文件大小
   更小。
3. 文字代码的最终结果与新的 Object() 代码相同，但在几乎所有浏览器中执行速度更快（Firefox 3.5 几乎没有差异）。
4. 随着对象属性和数组项数量的增加，使用文字的好处也随之增加。

由于 Javascript 中的范围管理机制，Object Literals {} 的执行速度更快

在执行 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 中的作用域和作用域链管理很重要，因为标识符解析性能与要在作用域链中搜索的对象数量直接相关。

标识符存在的范围链越远，搜索进行的时间越长，访问该变量所需的时间就越长；如果范围管理不当，它们可能会对脚本的执行时间产生负面影响。