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

对于变量 test，您现在已经构建了一个新对象，它“继承”了 gmap() 构造函数(类)的所有属性和方法。如果您运行上面的代码片段，您将看到“添加”和“删除”的警报。

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

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