基本对象/函数链接在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();

---

在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（）构造函数（类）的所有属性和方法。如果运行上面的代码段，您将看到“添加”和“删除”的警报

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

---

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

遗憾的是，直接的答案必须是“不”。即使您可以覆盖现有的方法（在许多UAs中可能可以覆盖，但我怀疑在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) { };

要为链接性重写

func1

，请执行以下操作：

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

这是一个例子。您只需要在所有您认为需要可链接性的标准对象上使用此技术

---

当您完成所有这些工作时，您可能会意识到有更好的方法来完成您正在尝试的工作，比如使用一个内置了可链接性的库*cough**cough*

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

---

由于gmap是一个函数而不是一个变量，首先，请允许我声明，我将用自己的话对此进行解释

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

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

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

因此，只要函数/方法返回对象，就可以将返回对象的方法链接到原始语句

至于为什么后者不起作用，请注意何时何地使用关键字

this

。这很可能是一个背景问题。调用

this

时，请确保

this

引用的是该函数对象本身，而不是窗口对象/全局范围

---

希望这会有所帮助。

函数不会自行返回，而是返回支持链接方法的对象。在jQuery的情况下，它是正在操作的节点。让每个函数以

结尾，并返回此值。要想使现有方法可链接，您可以尝试以下方法：related：看起来我将坚持使用jQuery进行链接！请注意，这个答案是这样的，因为
add
不是在
gmap（）
上定义的，而是只在
new gmap（）
上定义的。我想如果。。。否则…

，这对我来说没什么意义。默认情况下，构造函数返回

此

，也可以显式返回。我相信

this.gmap

将是未定义的，而

new gmap（）

将使构造函数永远循环，所以我不知道为什么它对OP有效。

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