JavaScript -对象文字的优点

7uzetpgm  于 2023-04-19  发布在  Java
关注(0)|答案(4)|浏览(116)

我读到过,与其简单地写一堆函数,我应该使用一个对象字面量。
对象文字的优点是什么,并举例说明?

wf82jlnq

wf82jlnq1#

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

作用域函数将所有函数 Package 起来,然后立即调用它并存储其返回值。优点:

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

deikduxw2#

使用对象文字(也称为对象文字模式)不会像使用许多全局声明的函数那样严重地污染全局名称空间,并且还有助于以逻辑方式组织代码
例如,此对象文本

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

pqwbnv8z3#

Rebecca Murphey在今年的jQuery会议上做了一个关于对象文字的演讲。使用它们的最好理由之一就是良好的代码组织。
以下是Rebecca关于对象文字模式的文章:http://rmurphey.com/blog/2009/10/15/using-objects-to-organize-your-code/

xfb7svmp

xfb7svmp4#

我一直使用对象文字,因为它们是组织代码的一种清晰的方式,这就是为什么我不喜欢原型;太乱了。
函数不会像前面的答案中提到的那样污染名称空间,不会比对象字面量更严重。
你可以很容易地写一个文字像

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,所以人们更熟悉它们,并且它们很容易阅读。使它们易于将数据传递到插件中。很容易创建公共和私有方法....
它们可能会很慢,因为每次你创建一个对象的示例时,它的所有方法都是重复的。我的理解是,prototype不是这样的,因为你有一个方法的副本,新的对象只是引用prototype。
当然我也可能是错的...

相关问题