JavaScript - 对象字面量的优点
-
05-07-2019 - |
题
我读过,我应该使用对象文字,而不是简单地编写一堆函数。
有人可以用例子解释对象文字的优点吗,因为到目前为止我还不明白。
谢谢
解决方案
正如 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 第六版定义了 JavaScript 引擎必须执行的大量方法 推断 函数的名称。其中之一是当函数被分配给一个属性时,如我们的{name: function() { ... }}
例子。因此,随着引擎实现 ES6,这个原因就会消失。) - 让您可以自由地拥有仅供您的模块使用的私有函数(例如我的
internalSomething
多于)。页面上没有其他代码可以调用这些函数;他们确实是私人的。只有最后在 return 语句中导出的内容在作用域函数之外才可见。 - 如果实现完全改变(例如 IE-vs-W3C 的东西,或者 SVG 与 SVG),则可以根据环境轻松返回不同的函数。画布等)。
返回不同函数的示例:
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 */);
其他提示
使用对象文字(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();
Rebecca Murphey在今年的jQuery大会上发表了关于Object Literals的演讲。使用它们的最佳理由之一就是良好的代码组织。
以下是Rebecca关于对象文字模式的文章: http://rmurphey.com/blog/2009/10/15/using-objects-to-organize-your-code/
我总是使用对象文字,因为它们是组织代码的明确方法。这就是为什么我不喜欢原型,它太乱了。
函数不会像上面提到的那样将对名称空间进行规范,而不是对象文字。
您可以轻松编写像
这样的文字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这样的插件使用它们,因此人们比较熟悉并且易于阅读。使它们易于将数据传递到插件中。创建公共和私有方法很容易....
它们可能很慢,但每次创建对象的实例时,它的所有方法都是重复的。我的理解是原型不是这种情况,因为你有一个方法的副本,新的对象只是引用原型。
我当然错了......