jQuery源码笔记——二

浏览数：30 / 时间：2015年06月09日

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();