JavaScript - 对象字面量的优点

Question

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

谁能用例子解释一下对象字面量的优点是什么，因为到目前为止我还不明白。

谢谢

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();

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

• 函数是正常声明的，因此具有名称。 (而对于 {name: function() { ... }} 格式，您的所有函数都是匿名的，即使引用它们的属性有名称。)名称帮助工具帮助您，从显示调试器中的调用堆栈，告诉您哪个函数抛出异常。 (2015 年更新:最新的 JavaScript 规范，ECMAScript 第 6 版，定义了 JavaScript 引擎必须推断函数名称的大量方式。其中之一是将函数分配给属性，如我们的{name: function() { ... }} 示例。所以当引擎实现 ES6 时，这个原因就会消失。)
• 让您可以自由地让私有(private)函数仅供您的模块使用(例如我上面的 internalSomething)。页面上没有其他代码可以调用这些函数；他们是真正的私有(private)。只有您最后在返回语句中导出的那些在作用域函数之外是可见的。
• 如果实现完全改变(例如 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 */);