[记录] JavaScript 中的深浅拷贝(克隆)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[记录] JavaScript 中的深浅拷贝(克隆)相关的知识,希望对你有一定的参考价值。

浅拷贝和深拷贝针对的是Object、Array这样复杂的引用类型数据
简单说:浅拷贝只复制一层的属性,而深拷贝则递归复制所有层级的属性

一、浅拷贝

1 function clone(origin, target) {
2     var result = target || {};
3     for ( var prop in origin ){
4         target[prop] = origin[prop];
5     } 
6     return result;
7 }

如果对象的属性值是数组或对象,实际上,存储的值是一个内存地址;
原始数据和拷贝的数据指向的是同一个地址,可能别篡改。

二、深拷贝
思路:
遍历对象 for (var prop in obj)
1. 判断是不是原始值 typeof() object
2. 判断是数组还是对象 instanceof constructor toString(在iframe父子作用域中依旧正确)
3. 建立相应的数组或对象 然后递归

 1 function deepClone(origin, target) {
 2     var target = target || {},
 3         toStr = Object.prototype.toString,
 4         arrStr = "[object Array]";
 5     for(var prop in origin) {
 6         // 判断对象是否包含特定的自身属性
 7         if(origin.hasOwnProperty(prop)) {
 8             // 排除null这个特殊的object并且是对象类型的引用类型数据
 9             if(origin[prop] !== null && typeof(origin[prop]) == ‘object‘){
10                 target[prop] = (toStr.call(origin[prop]) == arrStr) ? [] : {};
11                 deepClone(origin[prop], target[prop]);
12             }else{
13                 // 拷贝基本类型数据
14                 target[prop] = origin[prop];
15             }
16         }
17     }
18     return target;
19 }

深拷贝不仅将原对象的基本类型数据拷贝,而且将原对象上的引用类型数据采用递归的方式拷贝到新的对象上。这样就不会出现引用类型数据指向同一对象的问题。

jQuery提供了 $.extend() 深浅拷贝方法
浅拷贝:$.extend({}, obj1, obj2);
深拷贝:$.extend(true, obj1, obj2); 

以上是关于[记录] JavaScript 中的深浅拷贝(克隆)的主要内容,如果未能解决你的问题,请参考以下文章

从克隆(深浅拷贝)到原型设计模式

JS----对象的合并与克隆与数组的深浅克隆

记录--一种更现代的深浅拷贝方法

Python (深浅拷贝)

java开发——Cloneable接口clone()方法和深浅拷贝

JavaScript深浅拷贝