02.md

jQuery源码分析(2) - 链式调用

版本：1.7.2；时间：181113

1. 链式调用基础-最简单的链式调用

每次通过原型链访问方法，返回实例对象，便能实现链式访问

代码

function Fn(params) {
    return Fn.prototype.init(params);
}
Fn.prototype.init = function (params) {
    this.ele = 1;
    // this.ele.push(params);
    return this;
};
Fn.prototype.say = function(params) {
    console.log(this.ele );
    this.ele += params;
    return this;
}
Fn.prototype.speak = function(params) {
    console.log(this.ele);
    return this;
}
new Fn(1).say(2).speak();
// 1 => 3 

---

2. jQuery的链式调用

简要代码

var jQuery = (function () {
    var jQuery = function (selector, context) {
        return new jQuery.fn.init(selector, context);
    };

    // 核心属性和方法
    jQuery.fn = jQuery.prototype = {
        constructor: jQuery,
        // 简陋版的css选择器，而真正的jquery是用sizzle。
        init: function (selector, context) {
            context = context || document;
            var ele = context.querySelectorAll(selector);
            this.length = ele.length;
            for (var i = 0; i < ele.length; i++) {
                this[i] = ele[i];
            }
            return this;
        },

        context: "",
        size: function () {
            return this.length;
        },
    };
    
    //为init函数提供zQ原型以供以后实例化
    jQuery.fn.init.prototype = jQuery.fn;
    return jQuery;
})();

详解

1. jQuery的容器

jQuery 的容器是个类数组对象，如arguments

jQuery实例初始化，返回一个类数组对象的容器-jQuery对象

var jQuery = function (selector, context) {
    // 如果返回引用类型则构造函数返回引用类型
    return new jQuery.fn.init(selector, context);
};
// 返回的对象如下所示:
{
    0: h1,
    1: h2,
    2. h3,
    length: 3,
    say: function() {...},
    ...
}

类数组对象的好处

1. 可以在类数组对象上应用数组的操作方法。
2. 可以像对象一样保存私有方法和属性，且有原型对象
3. 构造函数不返回值或者返回非引用类型（如string,number,boolean,null,undefined）的值，会返回实例对象;
4. 如果返回引用类型则构造函数返回引用类型，

2. jQuery初始化函数-init

 // 简陋版的css选择器，而真正的jquery是用sizzle。
init: function (selector, context) {
    context = context || document;
    var ele = context.querySelectorAll(selector);
    this.length = ele.length;
    for (var i = 0; i < ele.length; i++) {
        this[i] = ele[i];
    }
    return this;
},

3. jQuery.fn = jQuery.prototype

1. 将jQuery的原型对象挂载在jQuery的fn方法上
2. jQuery.fn是jQuery.prototype的别名，标注jQuery.prototype的意义（jQuery方法）且缩短代码书写长度

4. jQuery链式调用

1. 我们已经返回了一个jQuery的类数组对象，但须要访问原型链上的方法，还需要最重要的一步：

//为init函数提供zQ原型以供以后实例化
    jQuery.fn.init.prototype = jQuery.fn;

2. 把jQuery构造函数的原型对象绑定到new jQuery.fn.init生成的对象的原型上，从而实现链式访问，共享jQuery.fn上的公有方法和属性。
3. 我们来看看jQuery的原型链图