Jquery源码中的Javascript基础知识(三)

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

 1 (function( window, undefined ) {
 2     // code 定义变量
 3     jQuery = function( selector, context ) {
 4         return new jQuery.fn.init( selector, context, rootjQuery );
 5     },
 6     // code 定义变量
 7     jQuery.fn = jQuery.prototype = {
 8         jquery: core_version,
 9         constructor: jQuery,
10         init: function( selector, context, rootjQuery ) {
11             // code 初始化、参数处理
12         }
13         // code 一些方法(each、ready、first、eq等)
14     }
15     jQuery.fn.init.prototype = jQuery.fn;
16     // code 其他
17     if ( typeof window === "object" && typeof window.document === "object" ) {
18         window.jQuery = window.$ = jQuery;
19     }
20 })( window );

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

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

 1 function Person(name){
 2     this.name = name;
 3     this.sayName = function(){
 4         alert(this.name);
 5     }
 6 }
 7 // 作为普通函数使用
 8 Person('Yanger90');
 9 window.sayName();
10 
11 // 作为构造函数使用
12 var person = new Person('Yanger90');
13 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对象的属性,这样我们就可以在外部直接使用了。

posted @ 2014-12-05 14:55  Yanger90  阅读(1129)  评论(1编辑  收藏  举报