JavaScript 复制对象与Object.assign方法无法实现深复(2)

let obj = { a: 123, b: { c: 456, d: { e: 789 } } }; let copy = JSON.parse(JSON.stringify(obj)); // 对obj对象无论怎么修改,都不会影响到copy对象 obj.b.c = 'hello'; obj.b.d.e = 'world'; console.log(copy); // {a: 123, b: {c: 456, d: {e: 789}}}

当然,使用这种方式实现深复制有一个缺点就是必须给JSON.parse方法传入的字符串必须是合法的JSON,否则会抛出错误

jQuery.extend || jQuery.fn.extend

jQuery.extend对象,对使用jQuery超过一定时间的朋友来说并不默认。这个$.extend方法可以用来扩展jQuery的全局对象,而$.fn.extend方法可以用来扩展实例对象。fn实际上是prototype对象的别名,所以,扩展实例对象的方法实际上就是在jQuery原型对象上添加一些方法。

$.extend方法不仅可以用来写jQuery插件,同样的,它可以用来实现对象的深浅复制。(使用$.extend与$.fn.extend实现深浅复制都可以,唯一的差别就是this的指向性不同)

在具体分析源代码之前,我在源码中看到的$.extend方法的一些特点

当不接受任何参数时,直接返回一个空对象

当只有一个参数时(这个参数可以任何数据类型(Null、Undefined、Boolean、String、Number、Object)),会返回this对象,这里会分为两种情况。如果用$.extend,会返回jQuery对象;如果用$.fn.extend,会返回jQuery的原型对象。

当接收两个参数时,并且第一个参数是Boolean值时,也会返回一个空对象。如果第一个参数不是Boolean值,那么会将源对象复制到目标对象

当接收三个参数以上时,可以分为两种情况。如果第一个参数是Boolean值表示深浅复制,那么目标对象会移动到第二个参数,源对象会移动到第三个参数。(目标对象、源对象和Object.assign方法中的相同)。如果第一个参数不是Boolean值,那么用法与Object.assign方法常规的复制相同。

在循环源对象的过程中,任何数据类型为Null、Undefined或者源对象是一个空对象时,在复制的过程中都会被忽略。

如果源对象和目标对象具有同名的属性,则源对象的属性会覆盖掉目标对象中的属性。如果同名属性是一个对象的话,则会在deep=true等其他条件下向目标对象的该同名对象添加属性

下面贴出jQuery-2.1.4中jQuery.extend实现方式的源代码

jQuery.extend = jQuery.fn.extend = function() { var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {}, // 使用||运算符,排除隐式强制类型转换为false的数据类型 // 如'', 0, undefined, null, false等 // 如果target为以上的值,则设置target = {} i = 1, length = arguments.length, deep = false; // 当typeof target =https://www.jb51.net/article/== 'boolean'时 // 则将deep设置为target的值 // 然后将target移动到第二个参数, if (typeof target =https://www.jb51.net/article/== "boolean") { deep = target; // 使用||运算符,排除隐式强制类型转换为false的数据类型 // 如'', 0, undefined, null, false等 // 如果target为以上的值,则设置target = {} target = arguments[i] || {}; i++; } // 如果target不是一个对象或数组或函数, // 则设置target = {} // 这里与Object.assign的处理方法不同, // assign方法会将Boolean、String、Number方法转换为对应的基本包装类型 // 然后再返回, // 而extend方法直接将typeof不为object或function的数据类型 // 全部转换为一个空对象 if (typeof target !== "object" && !jQuery.isFunction(target)) { target = {}; } // 如果arguments.length =https://www.jb51.net/article/== 1 或 // typeof arguments[0] =https://www.jb51.net/article/== 'boolean', 且存在arguments[1], // 这时候目标对象会指向this // this的指向哪个对象需要看是使用$.fn.extend还是$.extend if (i =https://www.jb51.net/article/== length) { target = this; // i-- 表示不进入for循环 i--; } // 循环arguments类数组对象,从源对象开始 for (; i < length; i++) { // 针对下面if判断 // 有一点需要注意的是 // 这里有一个隐式强制类型转换 undefined == null 为 true // 而undefined =https://www.jb51.net/article/== null 为 false // 所以如果源对象中数据类型为Undefined或Null // 那么就会跳过本次循环,接着循环下一个源对象 if ((options = arguments[i]) != null) { // 遍历所有[[emuerable]] =https://www.jb51.net/article/== true的源对象 // 包括Object, Array, String // 如果遇到源对象的数据类型为Boolean, Number // for in循环会被跳过,不执行for in循环 for (name in options) { // src用于判断target对象是否存在name属性 src = target[name]; // 需要复制的属性 // 当前源对象的name属性 copy = options[name]; // 这种情况暂时未遇到.. // 按照我的理解, // 即使copy是同target是一样的对象 // 两个对象也不可能相等的.. if (target =https://www.jb51.net/article/== copy) { continue; } // if判断主要用途: // 如果是深复制且copy是一个对象或数组 // 则需要递归jQuery.extend(), // 直到copy成为一个基本数据类型为止 if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) { // 深复制 if (copyIsArray) { // 如果是copy是一个数组 // 将copyIsArray重置为默认值 copyIsArray = false; // 如果目标对象存在name属性且是一个数组 // 则使用目标对象的name属性,否则重新创建一个数组,用于复制 clone = src && jQuery.isArray(src) ? src : []; } else { // 如果目标对象存在name属性且是一个对象 // 则使用目标对象的name属性,否则重新创建一个对象,用于复制 clone = src && jQuery.isPlainObject(src) ? src : {}; } // 因为深复制,所以递归调用jQuery.extend方法 // 返回值为target对象,即clone对象 // copy是一个源对象 target[name] = jQuery.extend(deep, clone, copy); } else if (copy !== undefined) { // 浅复制 // 如果copy不是一个对象或数组 // 那么执行elseif分支 // 在elseif判断中如果copy是一个对象或数组, // 但是都为空的话,排除这种情况 // 因为获取空对象的属性会返回undefined target[name] = copy; } } } } // 当源对象全部循环完毕之后,返回目标对象 return target; };

因此,可以针对分析过后的源码,给出一些例子

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/b17ef52c43f8f6a66746179832cf3c66.html