基本对象/函数链如何在javascript中工作?我正试图让jQuery风格的函数链接在我的脑海中。我的意思是:var e = f1('test').f2().f3();我有一个例子可以工作,而另一个没有。我会发布以下内容。我总是想学习第一个原理的基本原理,以便我可以在它之上构建。到目前为止,我对链接的工作方式只有一个粗略而宽松的理解,而且我遇到了一些我无法智能排除故障的错误。我知道的:函数必须返回自己,即“返回此”;可链接函数必须驻留在父函数中,也就是在jQuery中.css()是jQuery()的子方法,因此jQuery()。css();父函数应该返回自身或自身的新实例。这个例子有效:var one = function(num){
this.oldnum = num;
this.add = function(){
this.oldnum++;
return this;
}
if(this instanceof one){
return this.one;
}else{
return new one(num);
}}var test = one(1).add().add();但是这个没有:var gmap = function(){
this.add = function(){
alert('add');
return this;
}
if(this instanceof gmap) {
return this.gmap;
} else{
return new gmap();
}}var test = gmap.add();
3 回答
桃花长相依
TA贡献1860条经验 获得超8个赞
在JavaScript中,函数是第一类对象。定义函数时,它是该函数对象的构造函数。换一种说法:
var gmap = function() { this.add = function() { alert('add'); return this; } this.del = function() { alert('delete'); return this; } if (this instanceof gmap) { return this.gmap; } else { return new gmap(); }}var test = new gmap();test.add().del();
通过分配
新gmap();
在变量测试中,您现在构建了一个新对象,该对象“继承”了gmap()构造函数(类)中的所有属性和方法。如果您运行上面的代码段,则会看到“添加”和“删除”的提醒。
在上面的示例中,“this”指的是窗口对象,除非您将函数包装在另一个函数或对象中。
起初我很难理解链接,至少对我来说是这样,但是一旦我理解了它,我就意识到它可以是多么强大的工具。
慕娘9325324
TA贡献1783条经验 获得超4个赞
可悲的是,直接答案必须是“不”。即使你可以覆盖现有的方法(你可能在许多UAs中,但我怀疑不能在IE中),你仍然会遇到令人讨厌的重命名:
HTMLElement.prototype.setAttribute = function(attr) { HTMLElement.prototype.setAttribute(attr) //uh-oh; }
您可能最好的方法是使用不同的名称:
HTMLElement.prototype.setAttr = function(attr) { HTMLElement.prototype.setAttribute(attr); return this;}
繁花不似锦
TA贡献1851条经验 获得超4个赞
要“重写”一个函数,但仍然能够使用原始版本,必须先将原始函数分配给另一个变量。假设一个示例对象:
function MyObject() { };MyObject.prototype.func1 = function(a, b) { };
要重写func1
可链接性,请执行以下操作:
MyObject.prototype.std_func1 = MyObject.prototype.func1;MyObject.prototype.func1 = function(a, b) { this.std_func1(a, b); return this;};
这是一个有效的例子。您只需要在所有需要可链接性的标准对象上使用此技术。
当你完成所有这些工作时,你可能会意识到有更好的方法来完成你想要做的事情,比如使用已经内置可链接性的库。* cough * jQuery * cough *
添加回答
举报
0/150
提交
取消