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

范围函数包含所有函数，然后立即调用它并存储其返回值。优点：

函数声明正常，因此具有名称。（尽管使用{name: function() { ... }}格式，所有函数都是匿名的，即使引用它们的属性具有名称。）名称帮助工具可帮助您显示调试器中的调用堆栈，以告诉您哪个函数引发了异常。（2015年更新：最新的JavaScript规范，ECMAScript第6版，定义了JavaScript引擎必须推断函数名称的大量方法。其中之一是将函数分配给属性时，如我们的{name: function() { ... }}示例。因此，当引擎实现ES6时，这个原因就会消失。）
让您自由拥有仅由您的模块使用的私人功能（例如我上面的internalSomething）。页面上没有其他代码可以调用这些函数;他们真的很私密。在返回语句中，只有您在末尾导出的那些在作用域函数外部才可见。
如果实现完全改变（例如IE-vs-W3C内容，或SVG与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

使用对象文字（a.k.a.对象文字模式）不会像使用全局声明的许多函数一样严重污染全局命名空间，也有助于以逻辑方式组织代码

例如，此对象文字

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大会上发表了关于Object Literals的演讲。使用它们的最佳理由之一就是良好的代码组织。

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

不会创建那些全局对象（一切都是JS中的对象）

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

在我看来，对象文字有两个优点。其中一个是jQuery这样的插件使用它们，因此人们比较熟悉并且易于阅读。使它们易于将数据传递到插件中。创建公共和私有方法很容易....

它们可能很慢，但每次创建对象的实例时，它的所有方法都是重复的。我的理解是原型不是这种情况，因为你有一个方法的副本，新的对象只是引用原型。

我当然错了......

JavaScript - 对象文字的优点

4 个答案: