JavaScript—对象文字的优点

我读过，我应该使用对象文字，而不是简单地编写一系列函数

有人能用例子解释一下object literal的优点吗，因为我到目前为止还不明白

谢谢

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

例如，此对象为文本

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

---

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

---

以下是Rebecca对对象文字模式的总结：

正如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时，这个原因将消失。）
• 使您可以自由地拥有仅由模块使用的私有函数（如上面的my

  internalSomething

  ）。页面上没有其他代码可以调用这些函数；他们是真正的私人。在作用域函数之外，只有在return语句的末尾导出的内容才可见
• 如果实现只是完全更改（如IE-vs-W3C stuff，或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 */);

---

我总是使用对象文字，因为它们是组织代码的清晰方式。这就是为什么我不喜欢原型机，它太乱了

函数不会像上面提到的那样对名称空间进行处理，就像对对象文本进行处理一样

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

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 */ }
})();

不会创建这些全局对象（JS中的所有对象都是对象）

这样，您仍然不会创建全局对象的负载

在我看来，对象文字有两个优点。一个是jQuery等许多插件都使用它们，因此人们更熟悉它们，也更容易阅读。使他们能够轻松地将数据传递到插件中。创建公共和私有方法都很容易

尽管它们可能很慢，因为每次创建对象的实例时，它的所有方法都是重复的。我的理解是，prototype的情况并非如此，因为您有一个方法副本，新项目只是引用了prototype

---

当然，我可能错了…

另一篇关于对象文本的伟大文章：当您以“匿名”方式实例化函数时，您仍然可以给它命名（var x=function x（）{…}）。当您这样做时，名称会被绑定，以便在函数中可以进行递归引用。@Pointy：您不能跨浏览器这样做（在赋值中使用函数名），它在IE或Safari上都不能正常工作；详细信息：您不需要，函数的专有名称（函数foo中的

foo

）在其声明的整个范围内，包括在函数本身内，因此

foo

可以通过符号

foo

调用自身，无需将函数引用分配给任何对象（此时）。（继续）如果能够同时使用赋值和专有名称，那就太好了，因为这样可以更容易地从作用域函数导出函数。规范当然允许这样做，但遗憾的是，实用性（实现错误）你可以在一个普通函数中编写多个函数，而不会污染你的代码。对象文字不提供任何附加值。我自己使用prototype方法。对象文字适用于名称空间和单例，当你创建一个具有共享行为的对象的多个实例时，最好使用构造函数功能。我还没有发现一个用例，它通过模拟私用车来消耗更多的cpu和内存，而不是使用私用车的

\u myPrivate

，但如果有人能为我提供一个，我会很高兴。更多关于原型、继承和混合的信息，请点击此处：