jQuery源码笔记——二

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.fn

console.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.fn

jQuery.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,{..})，也很简单，就不赘述了。