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

 

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