jQuery对象扩展方法(Extend)深度解析

1、这几天在写自己的Js工具类库,所以在编写对象扩展方法,参考了jQuery的对象扩展方法,在编写该方法前,需要掌握js深拷贝和浅拷贝的相关知识,下面是jQuery3.2.1版本对象扩展方法的源码:

jQuery.extend = jQuery.fn.extend = function() {
    var options, name, src, copy, copyIsArray, clone,
        target = arguments[ 0 ] || {},
        i = 1,
        length = arguments.length,
        deep = false;

    // Handle a deep copy situation
    if ( typeof target === "boolean" ) {
        deep = target;

        // Skip the boolean and the target
        target = arguments[ i ] || {};
        i++;
    }

    // Handle case when target is a string or something (possible in deep copy)
    if ( typeof target !== "object" && !jQuery.isFunction( target ) ) {
        target = {};
    }

    // Extend jQuery itself if only one argument is passed
    if ( i === length ) {
        target = this;
        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;
                }

                // Recurse if we're merging plain objects or arrays
                if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
                    ( copyIsArray = Array.isArray( copy ) ) ) ) {

                    if ( copyIsArray ) {
                        copyIsArray = false;
                        clone = src && Array.isArray( src ) ? src : [];

                    } else {
                        clone = src && jQuery.isPlainObject( src ) ? src : {};
                    }

                    // Never move original objects, clone them
                    target[ name ] = jQuery.extend( deep, clone, copy );

                // Don't bring in undefined values
                } else if ( copy !== undefined ) {
                    target[ name ] = copy;
                }
            }
        }
    }

    // Return the modified object
    return target;
};

下面是我的解释代码:

zcHtmlHelper.extend=zcHtmlHelper.fn.extend=function(){
    var target=arguments[0]||{},//第一个参数
        deep = false,//是否开启深拷贝功能,默认不是
        i=1,
        length=arguments.length,
        options,
        name,
        src,
        copy,
        copyIsArray,
        clone;

    //处理深拷贝场景
    if(typeof target==="boolean"){
        deep=true;
        target=arguments[i] || {};//将紧随其后的存放拷贝值的集合
        i++;//加1的原因是,一旦开启深拷贝功能,那么传入的参数就至少有两个,一个是深拷贝的开关另一个是扩展参数,否则当只传如一个深拷贝的开关,那么方法将返回空集合
    }

    if(typeof target!=="object"){
        target = {};
    }

    //这个判断有两种情况
    //1、当传入的参数只有一个(不能是true或者false),那么就扩展当前命名空间
    //2、当传入的参数有个两个,分别是深拷贝的开关(true或者false)和扩展参数,那么就扩展当前命名空间
    if(i==length){
        target=this;
        i--;
    }
    for(;i<length;i++){
        //只处理非空和非null的值
        if((options=arguments[i])!=null){
            for(name in options){
                src=target[name];//判断传入的参数(存放拷贝值的集合)
                copy=options[name];

                //当嵌套数组或者对象深拷贝完毕,跳出当前属性,开始拷贝下一属性
                if ( target === copy ) {
                    continue;
                }

                //如果传入的合并对象里面嵌套数组或者对象,那么递归扩展对象
                if(deep && copy && (zcHtmlHelper.isPlainObject(copy) || (copyIsArray = Array.isArray(copy))))
                {
                    if ( copyIsArray ) {
                        copyIsArray = false;
                        clone = src && Array.isArray( src ) ? src : [];
                    }
                    else {
                        clone = src && zcHtmlHelper.isPlainObject( src ) ? src : {};
                    }
                    target[ name ] = zcHtmlHelper.extend( deep, clone, copy );
                }
                else if(copy!=undefined)
                {
                    target[name]=copy;//覆盖添加
                }
            }
        }
    }
    return target;
}

2、代码验证

(1)、浅拷贝代码:

var names=[1,3,4,5,6];
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { names: names};
var settings = zcHtmlHelper.extend(false,defaults,options);
alert(names==settings.names);

首先对象拷贝成功,settings是两个对象的合集,但是name数组对象和settings.name属性是同一个引用,所以,这是前拷贝

(2)、深拷贝代码:

var names=[1,3,4,5,6];
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { names: names};
var settings = zcHtmlHelper.extend(true,defaults,options);
alert(names==settings.names);
console.log(settings);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏拭心的安卓进阶之路

JavaScript 的闭包用于什么场景

本文翻译自 MDN ( Mozilla Developer Network ): 原文地址:MDN 译文地址:shixinzhang 的博客 词法作用域 考虑如...

2288
来自专栏互联网杂技

JS中Null与Undefined的区别

Undefined类型只有一个值,即undefined。当声明的变量还未被初始化时,变量的默认值为undefined。 Null类型也只有一个值,即null。n...

3144
来自专栏Pythonista

golang之流程控制(注意点)

1192
来自专栏前端桃园

看完这几道 Promise 面试题,还被面试官问倒算我输

最近在复习 Promise 的知识,所以就做了一些题,这里挑出几道题,大家一起看看吧。

1091
来自专栏Web行业观察

DOM中历史遗留的那些天坑 ...

即时到了DOM3.0时代, 为了同时满足浏览器的向下兼容和ES6的最新街口, DOM还是保留了很多古老的,极易和新类型引起混淆的类比如HTMLCollectio...

1526
来自专栏达摩兵的技术空间

js代码规范

20. 判断是否相等时候 采用=== 判断包括类型的相等 21. 尽量使用语法严格模式 消除代码之中的不友好;代码运行更快 ;保证运行的安全 ;为新版本的...

1863
来自专栏柠檬先生

VUE 入门基础(4)

四,计算属性   基础例子     <div id=‘example’>       <p>0riginal message: “{{message}}”</p...

2196
来自专栏耕耘实录

Bash shell中四种算术运算方式的区别与联系简介

版权声明:本文为耕耘实录原创文章,各大自媒体平台同步更新。欢迎转载,转载请注明出处,谢谢

762
来自专栏Linux驱动

汇编指令-CMP、TEQ(5)

 cmp:(compare)指令进行比较两个操作数的大小  格式: cmp oprd1,oprd2 比较oprd1和oprd2操作数,然后通过助记符来实现想要的...

19610
来自专栏青玉伏案

算法与数据结构(十三) 冒泡排序、插入排序、希尔排序、选择排序(Swift3.0版)

本篇博客中的代码实现依然采用Swift3.0来实现。在前几篇博客连续的介绍了关于查找的相关内容, 大约包括线性数据结构的顺序查找、折半查找、插值查找、Fibon...

1897

扫码关注云+社区

领取腾讯云代金券