如果这个问题太宽泛的话,我提前道歉。实际上,这是4个不同的问题,但都与同一个代码片段相关,并且我认为它们都围绕着同一个原则。
今天,经过多年使用JS后,我决定开始学习JS的工作原理,而不是将其视为在浏览器中运行的C语言。因此,我开始深入研究jQuery代码,看看真正的JS开发人员如何使用这种语言。那时,我发现了一块类似于下面代码的代码块。请注意,我从另一个堆叠的帖子In Javascript, can you extend the DOM?中拿到了这段代码。因此,这并不意味着编写此代码的人甚至知道他在说什么。
var myDOM = (function(){ // #1
var myDOM = function(elems){ // #2
return new MyDOMConstruct(elems);
},
MyDOMConstruct = function(elems) {
this.collection = elems[1] ? Array.prototype.slice.call(elems) : [elems];
return this; // #3
};
myDOM.fn = MyDOMConstruct.prototype = {
forEach : function(fn) {
var elems = this.collection;
for (var i = 0, l = elems.length; i < l; i++) {
fn( elems[i], i );
}
return this;
},
addStyles : function(styles) {
var elems = this.collection;
for (var i = 0, l = elems.length; i < l; i++) {
for (var prop in styles) {
elems[i].style[prop] = styles[prop];
}
}
return this;
}
};
return myDOM; // #4
})();
1 为什么要使用 var myDOM = (function() {})(); 声明函数,而不是使用 var myDOM = function() {};
2 为什么要在 myDOM 函数内部声明 另一个 同名函数?为什么不将所有内部 myDOM 的逻辑放在外部 myDOM 函数中?
3 为什么要明确返回 "this"?这不是会自动完成的吗?
4 这里发生了什么?它是否返回内部 myDOM 的构造函数?如果是,为什么?
更新
现在大部分都讲得通了。关于问题 #1,我以为 myDOM 被赋值为等号后面定义的函数,但实际上不是。它被赋值为该函数返回的内容。这恰好是一个函数。
我仍然不清楚问题 #3。是的,我理解像这样使用函数:
console.log(MyDomConstruct('foo'))
本来应该显示“undefined”,但它并没有这样使用。在几行之前是这个:
return new MyDomConstruct(elems);
我可以理解如果语句像这样明确返回“this”的含义。
return MyDomConstruct(elems);
但事实并非如此。
new MyDomConstruct(elems)
并不返回this
,而是一个新的MyDomConstruct
实例。也许在不同的上下文中这更容易理解。 - nre