JavaScript - 对象字面量的优点

Question

我读过，与其简单地编写一堆函数，不如使用对象字面量。

object literal有什么优点，有例子吗？

Answer 1

正如 Russ Cam 所说，您可以避免污染全局命名空间，这在当今组合来自多个位置（TinyMCE 等）的脚本时非常重要。

正如 Alex Sexton 所说，它也有助于良好的代码组织。

如果你正在使用这种技术，我建议使用模块模式。这仍然使用对象文字，但作为作用域函数的返回值：

var MyThingy = (function() {

    function doSomethingCool() {
        ...
    }

    function internalSomething() {
        ....
    }

    function anotherNiftyThing() {
        // Note that within the scoping function, functions can
        // call each other direct.
        doSomethingCool();
        internalSomething();
    }

    return {
        doSomethingCool: doSomethingCool,
        anotherNiftyThing: anotherNiftyThing
    };
})();

外用：

MyThingy.doSomethingCool();

作用域函数包裹了你所有的函数，然后你立即调用它并存储它的返回值。优点：

• 函数通常声明，因此具有names。 （而对于

  {name: function() { ... }}

  格式，您的所有函数都是匿名的，即使引用它们的属性有名称。）名称帮助工具可以帮助您，从在调试器中显示调用堆栈，到告诉您哪个函数抛出异常。 （2015 年更新：最新的 JavaScript 规范，ECMAScript 第 6 版，定义了 JavaScript 引擎必须 infer 函数名称的大量方式。其中之一是将函数分配给属性，如我们的

  {name: function() { ... }}

  示例。所以当引擎实现 ES6 时，这个原因就会消失。）
• 让你可以自由地让私有函数只被你的模块使用（比如我上面的

  internalSomething

  ）。页面上没有其他代码可以调用这些函数；他们是真正的私人。只有你最后导出的那些，在返回语句中，在作用域函数之外是可见的。
• 如果实现完全改变（例如 IE-vs-W3C 的东西，或 SVG vs. Canvas 等），则可以根据环境轻松返回不同的函数。

返回不同函数的例子：

var MyUtils = (function() {
    function hookViaAttach(element, eventName, handler) {
        element.attachEvent('on' + eventName, handler);
    }

    function hookViaListener(element, eventName, handler) {
        element.addEventListener(eventName, handler, false);
    }

    return {
        hook: window.attachEvent ? hookViaAttach : hookViaListener
    };
})();

MyUtils.hook(document.getElementById('foo'), 'click', /* handler goes here */);

Answer 2

使用对象字面量（又名对象字面量模式）不会像使用许多全局声明的函数那样严重污染全局命名空间，而且还有助于以逻辑方式组织代码

例如这个对象字面量

var obj = {
              find : function(elem) { /* find code */ },
              doSomething: function() { /* doSomething code */ },
              doSomethingElse: function() { /* doSomethingElse code */ }
          }

相比于

function find(elem) { /* find code */ },
function doSomething() { /* doSomething code */ },
function doSomethingElse() { /* doSomethingElse code */ }

将只在全局对象上创建一个属性，而不是三个。然后，您可以轻松使用像这样的功能

obj.doSomething();

Answer 3

Rebecca Murphey 在今年的 jQuery 大会上做了一个关于对象字面量的演讲。使用它们的最佳理由之一就是良好的代码组织。

这是 Rebecca 关于对象文字模式的文章：http://rmurphey.com/blog/2009/10/15/using-objects-to-organize-your-code/

Answer 4

我一直使用对象字面量，因为它们是一种组织代码的清晰方式。这就是我不喜欢原型的原因；太乱了

函数不会像以前的答案中提到的那样污染名称空间，而不仅仅是对象文字。

你可以很容易地写出这样的文字

var obj = {}
var find = function(elem) { /* Find code */ },
var doSomething = function() { /* doSomething code */ },
var doSomethingElse = function() { /* doSomethingElse code */ }

创建大量全局对象会造成污染，就像函数一样。同样你可以这样做：

(function() {
    function find(elem) { /* Find code */ },
    function doSomething() { /* doSomething code */ },
    function doSomethingElse() { /* doSomethingElse code */ }
})();

不会创建那些全局对象（在 JavaScript 中一切都是对象）。

这样你仍然不会创建大量的全局对象。

在我看来，对象文字有两个优点。其中之一，它们被许多插件（如 jQuery）使用，因此人们更加熟悉并且易于阅读。使它们易于将数据传递到插件中。很容易创建公共和私有方法....

它们可能会很慢，因为每次创建对象的实例时，它的所有方法都会被复制。据我了解，原型不是这种情况，因为您只有一份方法副本，而新对象只是引用原型。

我当然可能是错的...