jQuery源碼筆記——二

標籤：style   blog   io   color   ar   使用   java   for   sp   

jQuery選擇這樣返回對象

var jQuery = function( selector, context ) {        return new jQuery.fn.init( selector, context );//從jQuery.fn裡調用的方法};jQuery.fn = jQuery.prototype = { //這裡jQuery.prototype，目前可以刪除。    init: function(){        console.log("初始化完成");        return this;    }
　　//功能方法}jQuery.fn.init.prototype = jQuery.fn //讓所有執行個體化jQuery.fn.init都繼承這個原型中的方法。console.log(jQuery());//{...}

這裡有一個重要的知識點,new 到底做了什麼：new 建構函式jQuery.fn.init，將返回一個對象，這個對象會繼承建構函式的原型jQuery.fn.init.prototype,而這個原型被我所們改寫，指向jQuery.fn，也就是一個對象，對象裡擁有init和所有的功能方法。這就實現了我們想返回一個擁有所有功能方法的對象。

我們也可以這樣

var jquery = function(){    if(!(this instanceof jquery)) return new jquery();    console.log("初始化完成");}jquery.fn = jquery.prototype = {    //功能方法}console.log(jQuery());//{...}

其實，根本要解決的問題是返回一個對象，這個對象預設要擁有功能方法。為了最大效率，兩個例子都選擇不把功能方法寫在對象裡，而是通過對原型的改寫，讓執行個體化預設繼承。

鏈式調用

var jQuery = function( selector, context ) {        return new jQuery.fn.init( selector, context );};jQuery.fn = jQuery.prototype = {    init: function(){        console.log("初始化完成");        return this;    },    add:function(){        console.log("add完成")        return this;    }}jQuery.fn.init.prototype = jQuery.fnconsole.log(jQuery().add().add());

javascript中，函數中的this指向調用它的對象。本例，jQuery()執行個體化了一個對象，這個對象調用了add()方法,輸出add，然後返回this，這個this實際就是調用它的對象jQuery()，因此無論執行了多少方法，只要返回this,那之前的結果都是最初的對象，都可以繼續使用最初這個對象裡功能方法。

向對象裡添加方法的函數

var object = {    name: "winderby"}object.extend = function(obj){    for (var key in obj)        this[key] = obj[key];    return this;}object.extend({    getName:function(){        console.log(this.name);    }})object.getName();

合并對象

function extend() {    for (var i = 1; i < arguments.length;i++){        for(var key in arguments[i]){            arguments[0][key] = arguments[i][key]        }    }}var student = {    name:"winderby",    age: "18"}var arrangement = {    name:"winderby",    lesson:"english"}extend(student,arrangement);console.log(student)

jQuery的extend

var jQuery = function( selector, context ) {        return new jQuery.fn.init( selector, context );};jQuery.fn = jQuery.prototype = {    init: function(){        return this;    }}jQuery.fn.init.prototype = jQuery.fnjQuery.fn.extend = jQuery.extend = function(){//指向同一個方法    var i = 1;    var target = arguments[0];    var length = arguments.length;    if(length === 1){ //1個參數時        target = this;        i--;    }    for (; i < arguments.length;i++){ //主要功能體，遍曆，賦值        for(var key in arguments[i]){            target[key] = arguments[i][key]        }    }}//jQuery.extend合并對象測試var student = {    name:"winderby",    age: "18"}var arrangement = {    name:"winderby",    lesson:"english"}jQuery.extend(student,arrangement);console.log(student);//jQuery.fn.extend添加jQuery方法測試jQuery.fn.extend({    setName: function(myName) {        this.myName = myName        return this;    },    getName: function() {        console.log(this.myName)        return this;    }})jQuery().setName("winderby").getName();

將前面兩個功能合并到一個jQuery函數裡就成了jQuery的extend。目前這個extend可以通過jQuery.extend合并對象，也可以通過jQuery.fn.extend，向jQuery.fn添加方法。

至於第三種用法jQuery(true,{..})，也很簡單，就不贅述了。

jQuery源碼筆記——二