基本对象/函数链接如何在JavaScript中工作？

问题描述：

我试图让我直接在脑海中做jQuery风格的函数链接的原则。我的意思是：基本对象/函数链接如何在JavaScript中工作？

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

函数不返回它们自己，它们返回支持您链接的方法的对象。在jQuery的情况下，它是正在运行的节点。 – drudru 2009-07-08 18:00:52

让每个函数以`return this;`结尾。 – 2012-06-10 01:30:46

@MarcB - 我知道，但是怎么样？ – 2012-06-10 01:31:32

答

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

通过分配

new gmap();

给变量测试你现在建立一个新的对象，“继承”的所有属性和方法，从GMAP（）构造函数（类）。如果您运行上面的代码段，则会看到“添加”和“删除”的提醒。

在上面的示例中，“this”指的是窗口对象，除非将函数包装在另一个函数或对象中。

链接起初对我来说很难理解，至少对我来说是这样，但是一旦我理解了它，我意识到它可以是一个多么强大的工具。

答

不幸的是，直接的答案是'不'。即使您可以覆盖现有的方法（这你也许可以在许多UA，但我怀疑不能在IE浏览器），你仍然可以坚持与讨厌的重命名：

HTMLElement.prototype.setAttribute = function(attr) { 
    HTMLElement.prototype.setAttribute(attr) //uh-oh; 
}

你也许可以逃脱最好使用不同的名称：

HTMLElement.prototype.setAttr = function(attr) { 
    HTMLElement.prototype.setAttribute(attr); 
    return this; 
}

答

要“重写”某个功能，但仍然能够使用原始版本，必须先将原始功能分配给不同的变量。假设一个例子对象：

function MyObject() { }; 

MyObject.prototype.func1 = function(a, b) { };

要为chainability改写func1，这样做：

MyObject.prototype.std_func1 = MyObject.prototype.func1; 
MyObject.prototype.func1 = function(a, b) { 
    this.std_func1(a, b); 
    return this; 
};

这里有一个working example。你只需要在你感觉需要可链接性的所有标准对象上使用这种技术。

通过你做的这一切工作的时候，你可能会发觉有更好的方式来完成你想要做什么，喜欢使用已经有chainability建在库中。_{*咳嗽* jQuery *咳嗽*}

答

只需将该方法调用为var test = gmap（）。add（）;

为GMAP不是一个函数的变量

答

首先，我要指出，我在我自己的话解释这一点。

方法链接几乎是调用另一个函数/方法返回的对象的方法。例如（使用jquery）：

$('#demo');

这个jQuery函数选择并返回一个jquery对象id为演示的DOM元素。如果元素是文本节点（元素），我们可以链接返回的对象的方法。例如：

$('#demo').text('Some Text');

所以，只要一个函数/方法返回一个对象，你可以链接返回对象的方法，以原来的语句。

至于为什么后者不起作用，请注意使用关键字this的时间和地点。这很可能是一个背景问题。当您致电this时，请确保this引用该函数对象本身，而不是窗口对象/全局范围。

希望有所帮助。

基本对象/函数链接如何在JavaScript中工作？

相关推荐