JavaScript 中的基本对象/函数链是如何工作的？

Question

我试图在脑海中直接理解 jQuery 风格的函数链接的原理。 我的意思是：

var e = f1('test').f2().f3();

我已经找到一个可以工作的例子，而另一个则不行。 我将在下面发布这些内容。 我总是想学习一些东西如何工作的首要原理，这样我就可以在此基础上进行构建。 到目前为止，我对链接的工作原理只有粗略和松散的了解，并且遇到了无法智能解决的错误。

我所知道的是：

1. 函数必须返回自己，又名“返回这个；”
2. 可链接函数必须驻留在父函数中，即在 jQuery 中，.css() 是 jQuery() 的子方法，因此 jQuery().css();
3. 父函数应该返回其自身或自身的新实例。

这个例子有效：

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

Answer 1

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

to the variable test you have now constructed a new object that "inherits" all the properties and methods from the gmap() constructor (class). If you run the snippet above you will see an alert for "add" and "delete".

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

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

Answer 2

可悲的是，直接的答案必须是“不”。 即使你可以覆盖现有的方法（在许多 UA 中你可能可以，但我怀疑在 IE 中不能），你仍然会被讨厌的重命名所困扰：

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

最好的方法可能就是使用不同的名称：

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

Answer 3

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

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 *咳嗽*}

Answer 4

首先，我要声明，我是用我自己的话来解释这一点的。

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

$('#demo');

此 jquery 函数选择并返回带有 id demo 的 DOM 元素的 jquery 对象。 如果元素是文本节点（元素），我们可以链接返回的对象的方法。 例如：

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

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

至于为什么后者不起作用，请注意关键字 this 在何时何地使用。 这很可能是上下文问题。 当您调用 this 时，请确保 this 引用的是该函数对象本身，而不是窗口对象/全局范围。

希望有帮助。

Answer 5

只需将该方法调用为 var test = gmap().add();

因为 gmap 是一个函数而不是变量