javascript代码实例教程-分析了一下JQuery中的extend方法实现原理

发布时间:2019-01-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-分析了一下JQuery中的extend方法实现原理脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

分析了一下jquery中的extend方法实现原理。今天突然分析了一下JQuery中的extend方法实现原理。目的为了提高自己对JQuery的认识,也想了解JavaScript高手是如何编写JS的,如有不足请指正。谢谢!

下面是JQuery.extend方法代码:

代码如下:


jQuery.extend = jQuery.fn.extend = function() { 
    VAR options, name, src, copy, copyIsArray, clone, 
        target = arguments[0] || {}, // 目标对象 
        i = 1, 
        length = arguments.length, 
        deep = false; 
    // 处理深度拷贝情况(第一个参数是boolean类型且为true) 
    if ( tyPEof target === "boolean" ) { 
        deep = target; 
        target = arguments[1] || {}; 
        // 跳过第一个参数(是否深度拷贝)和第二个参数(目标对象) 
        i = 2; 
    } 
    // 如果目标不是对象或函数,则初始化为空对象 
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) { 
        target = {}; 
    } 
    // 如果只指定了一个参数,则使用jQuery自身作为目标对象 
    if ( length === i ) { 
        target = @L_304_2@; 
        --i
    } 
    for ( ; i < length; i++ ) { 
        // Only deal wITh non-null/undefined values 
        if ( (options = arguments[ i ]) != null ) { 
            // Extend the base object 
            for ( name in options ) { 
                src = target[ name ]; 
                copy = options[ name ]; 
                // Prevent never-ending loop 
                if ( target === copy ) { 
                    continue; 
                } 
                // 如果对象中包含了数组或者其他对象,则使用递归进行拷贝 
                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) { 
                    // 处理数组 
                    if ( copyIsArray ) { 
                        copyIsArray = false; 
                        // 如果目标对象不存在该数组,则创建一个空数组; 
                        clone = src && jQuery.isArray(src) ? src : []; 
                    } else { 
                        clone = src && jQuery.isPlainObject(src) ? src : {}; 
                    } 
                    // 从不改变原始对象,只做拷贝 
                    target[ name ] = jQuery.extend( deep, clone, copy ); 
                // 不拷贝undefined值 
                } else if ( copy !== undefined ) { 
                    target[ name ] = copy; 
                } 
            } 
        } 
    } 
    // 返回已经被修改的对象 
    return target; 
};

 从上面的分析可以看出extend函数支持深度拷贝,那么在JS中什么是深度拷贝呢?
 
    我的理解如下:如果一个对象中包含引用对象(如:数组或对象),那么拷贝该对象时不是简单的进行引用对象的地址拷贝,而是将引用对象的内容复制过来保存成一个单独的对象(如下图)。

javascript代码实例教程-分析了一下JQuery中的extend方法实现原理

 从上图可以看出两个学生对象共用好友对象,一方对好友对象的操作同时另一方也可见。如:你将好友的姓成了“zhangsan”那么另一个对象也能看见。

javascript代码实例教程-分析了一下JQuery中的extend方法实现原理

 从上图可以看出两个学生对象都有自己的好友对象,一方的修改对另一方完全是透明的(无任何影响)。以上就是我对深度复制的理解,有什么不对的请不要笑话,谢谢。

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-分析了一下JQuery中的extend方法实现原理全部内容,希望文章能够帮你解决javascript代码实例教程-分析了一下JQuery中的extend方法实现原理所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。