JavaScript Object Literal表示法与普通函数和性能影响？ [英] JavaScript Object Literal notation vs plain functions and performance implications?

问题描述

假设我有以下功能：

function foo() {

}

function bar() {

}

我可以在上面写为Object Literal表示法：

I can write above as Object Literal notation:

var Baz = {
  foo: function() {
  },
 bar: function() {
 }
};

据我在后面的例子中理解，当脚本加载时会创建一个Baz实例无论是否有任何Baz函数被调用。在前一种情况下，仅在调用该函数时才创建函数对象。我对这些假设是否正确？

As far as I understand in the later case, an instance of Baz will be created when the script loads regardless if any Baz function is ever called. In the former case, function object is only created when that function is called. Am I correct about these assumptions?

如果我是正确的，那么前者将比后来很少调用这些函数的应用程序具有更高的性能（更少的内存）。
但后者的优势在于它提供了更大的模块化和更低的全局名称空间污染。

If I am correct then the former would have higher performance (less memory) than the later in application where these functions are rarely called. But the advantage of the later is that it gives greater modularity and lower global namespace pollution.

您对自己的专业经验有何看法？
有速度差吗？

What is your take on this from your professional experience? Is there a speed difference?

推荐答案

在前一种情况下，函数对象是仅在调用该函数时创建。

In the former case, function object is only created when that function is called.

不，无论如何都会创建函数。

No, the functions are created regardless.

请注意，您也可以这样做：

Note that you can also do this:

function foo() {
}

function bar() {
}

var Baz = {
  foo: foo,
  bar: bar
};

或者这个：

var Baz = (function() {
    function foo() {
    }

    function bar() {
    }

    return {
      foo: foo,
      bar: bar
    };
})();

将函数置于 Baz的主要目的因为属性是在 Baz 上将它们作为方法使用。这可能是为了方便，命名空间等。在您的第一个表单（以及我上面的第一个表单）中，如果该代码在全局范围内， foo 和 bar 被添加到全局范围，它可以非常快速地拥挤（特别是在浏览器上）。在第二个示例中，唯一的全局符号是 Baz ，因为这些函数是匿名的。在上面的最后一个例子中，唯一的全局符号是 Baz ，但函数不是匿名，它们具有调试器和堆栈跟踪可以显示的名称你（这是一件好事; 更多信息）。

The primary purpose of putting the functions on Baz as properties is to make them available as "methods" on Baz. This might be for convenience, for "namespacing", etc. In your first form (and my first form above), if that code is at global scope, foo and bar are added to the global scope, which can get pretty crowded pretty fast (esp. on browsers). In your second example, the only global symbol is Baz because the functions are anonymous. In my final example above, the only global symbol is Baz but the functions aren't anonymous, they have names that debuggers and stack traces can show you (which is a good thing; more here).

在尝试优化函数创建时，以下是它的工作原理：当执行进入给定的上下文（全局上下文或上下文）时与调用函数有关），这些事情已经完成：

In terms of trying to optimize when functions get created, here's how it works: When execution enters a given context (the global context, or the context related to calling a function), these things are done:

1. 一个幕后的执行上下文对象已创建。


2. 创建该执行上下文的幕后变量对象。


3. 在案例中函数上下文：
   
   

1. A behind-the-scenes execution context object is created.
2. A behind-the-scenes variable object for that execution context is created.
3. In the case of a function context:

1. 将属性添加到 arguments 的变量对象中（数组 - 就像你可以用来访问参数的东西一样）


2. 一个属性被添加到变量o中每个函数的命名参数的bject，以及参数的值


3. 如果函数有一个名称，它的名称将被添加为变量对象的属性，其值为函数对象。

1. A property is added to the variable object for arguments (the array-like thing you can use to access arguments)
2. A property is added to the variable object for each of the function's named arguments, with the value of the argument
3. If the function has a name, its name is added as a property of the variable object and has the value of the function object.

对于使用 var 在执行上下文中;它们的值最初是 undefined （无论 var 是否有初始值设定项。）

处理上下文中的每个函数声明。 （函数表达式尚未处理;更多信息如下。）创建每个函数名的变量对象的属性，并接收函数对象作为其值。

Step-by - 步骤代码执行开始。

• 与所有表达式一样，函数表达式在逐步流程中遇到时会被计算。


• var 具有初始值设定项的语句（例如， var a = 2; ）的处理方式与赋值语句完全相同（ a = 2; ）;它的 var 方面更早完成。 （ var 是经常被误解。例如，我们有这个问题就在昨天。）


• Properties are created on the variable object for each variable declared with var in the execution context; their values are initially undefined (regardless of whether the var has an initializer on it).
• Every function declaration in the context is processed. (Function expressions are not processed yet; more on the difference below.) A property on the variable object for each function name is created and receives the function object as its value.
• Step-by-step code execution begins.
  • Like all expressions, function expressions are evaluated when they're encountered in the step-by-step flow.
  • var statements that have initializers (e.g., var a = 2;) are treated exactly like assignment statements (a = 2;); the var aspect of it was done much earlier. (var is frequently misunderstood. For instance, we had this question just yesterday.)

  你会注意到上面的区别在函数声明和函数表达式之间。您可以通过查看是否将结果用作右手值来判断哪个是——也就是说，您是将结果分配给变量，将其用作对象文字中属性定义的右侧，还是将其传递给函数。如果你是，它是一个函数表达式。如果你不是，它是一个函数声明。

  You'll note the difference above between function declarations and function expressions. You can tell which is which by looking to see whether you're using the result as a right hand value — that is, are you assigning the result to a variable, using it as the right-hand side of a property definition in an object literal, or passing it into a function. If you are, it's a function expression. If you're not, it's a function declaration.

  函数声明示例：

  function foo() {
  }
  

  函数表达式示例：

  var foo = function() {
  };
  

  另一个：

  var Baz = {
      foo: function() { }
  };
  

  （ foo 行是属性声明在对象文字中使用函数表达式的值。）

  (The foo line is a property declaration in an object literal that uses a function expression for the value.)

  命名函数表达式示例：

  var f = function foo() {  // <== Don't do this (more below)
  };
  

  命名函数表达式应该是有效的，但是它们在野外实现得不到很好的支持（特别是IE）等等，现在必须避免它们。 此处更多信息。

  Named function expressions should be valid, but they're poorly-supported by implementations in the wild (particularly IE) and so for now they must be avoided. More here.

  这篇关于JavaScript Object Literal表示法与普通函数和性能影响？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！