Jquery源码中的Javascript基础知识（三）

这篇主要说一下在源码中jquery对象是怎样设计实现的，下面是相关代码的简化版本：

(function( window, undefined ) {
    // code 定义变量
    jQuery = function( selector, context ) {
        return new jQuery.fn.init( selector, context, rootjQuery );
    },
    // code 定义变量
    jQuery.fn = jQuery.prototype = {
        jquery: core_version,
        constructor: jQuery,
        init: function( selector, context, rootjQuery ) {
            // code 初始化、参数处理
        }
        // code 一些方法（each、ready、first、eq等）
    }
    jQuery.fn.init.prototype = jQuery.fn;
    // code 其他
    if ( typeof window === "object" && typeof window.document === "object" ) {
        window.jQuery = window.$ = jQuery;
    }
})( window );

首先，回顾一下javascript中相关知识。

在javascript中特定类型的对象是通过构造函数来创建的，例如：

function Person(name){
    this.name = name;
    this.sayName = function(){
        alert(this.name);
    }
}
// 作为普通函数使用
Person('Yanger90');
window.sayName();

// 作为构造函数使用
var person = new Person('Yanger90');
person.sayName();

更好的方式-原型模式

function Person(){}
Person.prototype = {
    name: "Yanger90",
    syaName: function(){
        console.log(this.name);
    }
};
var  person = new Person();

每一个函数都有一个prototype（原型）属性，里面包含的属性和方法，是所有通过该构造函数创建的实例对象所共享的。对于一些公用的方法，像例子中的sayName方法，就可以放在原型中共享而不用像第一种方式那样，每个实例对象都要重新创建一遍。

 

好了，基础知识就简单介绍到这，详细可参阅《javascript高级程序设计》这本书。

回到jquery中，我们一般使用jquery语法类似这样：

$(element).css();

选择元素然后执行相应方法，那么前面的$(element)就应该是一个实例对象，再调用其方法。

我们看到在源码开始的部分就定义了jQuery变量：

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

它确实返回了一个实例对象，构造函数是init，接着往下看。

jQuery.fn = jQuery.prototype = {
    jquery: core_version,
    constructor: jQuery, // 修正以字面量方式重写原型对象造成的指向问题
    init: function( selector, context, rootjQuery ) {
        // code 初始化、参数处理
    }
    // code 一些方法（each、ready、first、eq等）
}

找到init发现它是jQuery原型（prototype）中的一个方法。

 

问题来了，init方法中只是对参数进行了处理，并没有我们常用的each、ready、first、eq等方法，它们都在jQuery原型（prototype）中，所以还无法调用这些方法，那么继续往后看。

jQuery.fn.init.prototype = jQuery.fn;

这句话把init的原型指向了jQuery.fn，也就是jQuery.prototype，这样一来，jQuery原型（prototype）中的属性和方法就共享给了通过init构造函数创建的实例对象，也就实现了继承。

 

最后，在jquery源码的末尾有一句

window.jQuery = window.$ = jQuery;

jQuery是在匿名函数中定义的，所以外部是无法访问的，这里将它赋值给window对象的属性，这样我们就可以在外部直接使用了。