jQuery2.0.3源码学习---继承方法

  jQuery中的extend()方法主要有三种用法:

// 扩展插件 调用方法:$.a()
$.extend({
    a : function{
        alert(1)
    }
})  
// 合并对象到第一个
$.extend(a,{name:'nick'},{age:'30'})
//拷贝
 var a = {}; 
 var b = {nage: 'nick'}
$.extend(a, b) //浅拷贝
$.extend(true,a, b) //深拷贝

  其源码部分如下所示:

jQuery.extend = jQuery.fn.extend = function() {
    var options, name, src, copy, copyIsArray, clone,
        target = arguments[0] || {}, //参数列表的第一个  即目标值
        i = 1,
        length = arguments.length,
        deep = false;  //深拷贝与浅拷贝 默认时浅拷贝
    if ( typeof target === "boolean" ) {  //判断是否拷贝,更换目标值
        deep = target;
        target = arguments[1] || {};
        i = 2;
    }
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) { //判断参数是否正确
        target = {};
    }
    if ( length === i ) {  //参数只有一个对象,表明插件调用
        target = this;
        --i;
    }
    for ( ; i < length; i++ ) {
        if ( (options = arguments[ i ]) != null ) {  //判断有意义
            for ( name in options ) {
                src = target[ name ];
                copy = options[ name ];
                if ( target === copy ) {
                    continue; //防止循环引用 如果target和copy的值相等,就会导致一致循环下去
                }
                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) { //deep为真 深拷贝
                    if ( copyIsArray ) {  //递归结束
                        copyIsArray = false;
                        clone = src && jQuery.isArray(src) ? src : [];
                    } else {
                        clone = src && jQuery.isPlainObject(src) ? src : {};
                    }
                    target[ name ] = jQuery.extend( deep, clone, copy );  //递归调用
                } else if ( copy !== undefined ) {  //浅拷贝
                    target[ name ] = copy;
                }
            }
        }
    }
    return target;
};

  首先 ,jQuery.extend = jQuery.fn.extend = function(){...},jQuery是一个函数,把一个方法添加到函数下面,叫做扩展静态方法,jQuery.fn是jQuery.prototyped的一个引用,也就是jQuery的原型,把方法添加到原型下面叫做扩展实例方法。这样在调用扩展静态方法时直接$.fn()就可以了,而调用实例方法需要$().fn()。随后源码又定义了一些变量,代码的注释里已经写明了变量的含义。接着又开始判断目标值是否为布尔值,如果为布尔值,就表明需要进行拷贝,把目标值换为第二个参数。变量src存为target的值,

  深复制与浅复制,知乎上看到了一个比较好的说法:对于字符串类型,浅复制是对值的复制,对于对象来说,浅复制是对对象地址的复制,并没有开辟新的栈,也就是复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,则另一个对象的属性也会改变,而深复制则是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。这里实现深复制的代码主要在一个for循环里面:首先遍历参数列表,因为第一个参数是布尔值,所以i直接从2开始;然后就对每一个对象进行枚举,变量src存为target的值copy存放的是目标值后面的对象的值,这里判断:如果copy和target如果相等,就终止本次循环,防止循环引用;随后就开始递归调用,copyIsArray是判断cope是否为数组的一个布尔值,isArray()方法也是原生数组的方法,紧接着就判断该布尔值,如果是真的,就赋值为false,同时变量clone=src,如果是false,clone赋值为空对象,随后就开始递归调用该函数,

 

posted @ 2019-07-31 23:25  有梦想的咸鱼·-·  阅读(181)  评论(0编辑  收藏  举报