js 中的 function.prototype 在jQuery中的运用

在jQuery源码中，jQuery是一个构造函数，
而这个特殊的构造函数使得 “ jQuery() ” 就可以构造出jQuery对象，而不用 “ new jQuery() ”
其中jQuery的构造函数非常特殊，今天看了一位大神的博文，收获很多，稍加整理
写成今天这篇笔记。今天是我第一次感受到，js 中 this 的魅力;

jQuery 的构造函数结构大概是这样的


(function(window){

    var jQuery = function( selector, context ) {    //jquery 的构造函数.
        return new jQuery.fn.init( selector, context );
    };

  jQuery.fn = jQuery.prototype = {    //jQuery的原型链.
        b:3
    };
    //定义jQuery原型链下的init函数.
    var init = jQuery.fn.init = function( selector, context, root ){ 
        this.a = 3;
    }
    //通过window将闭包函数中的jQuery变量，变为公共变量.
    window.$ = window.jQuery = jQuery;
    
})(window)

console.log($().a) //3
console.log($().b) //结果为undefined

问题出现了，new jQuery.fn.init( selector, context )

语句并没有将jQuery.prototype 下的属性初始化，而仅仅是将

init函数下面的属性初始化了，问题出现在了 "init.prototype" 上;

关键的语句

init.prototype = jQuery.fn;

这样完整的代码应该是这样的：

(function(window){

    var jQuery = function( selector, context ) {    //jquery 的构造函数.
        return new jQuery.fn.init( selector, context );
    };

  jQuery.fn = jQuery.prototype = {    //jQuery的原型链.
        b:3
    };
    //定义jQuery原型链下的init函数.
    var init = jQuery.fn.init = function( selector, context, root ){ 
        this.a = 3;
    }
    //将jQuer.prototype 赋给 init.prototype
    init.prototype = jQuery.fn;

    //通过window将闭包函数中的jQuery变量，变为公共变量.
    window.$ = window.jQuery = jQuery;
    
})(window)

console.log($().b) //3

在改变了 init.prototype 后输出正常了。

因为在js构造函数中，this指向的是构造的新对象 , 所以 在init函数下面定义的

a属性是可以在对象中找到的，但是因为init.prototype 不是 jquery.prototype 所以

新对象将不会拥有jquery.prototype 下面大量重要的方法和属性。

---