JS：对象的浅克隆、深克隆

JS中对象的深浅克隆

一、对象的浅克隆
1.浅克隆：只克隆对象的“表层”，如果对象的某些属性值又是引用类型值，则不进一步克隆它们，只是传递它们的引用
2.使用for…in…循环即可实现对象的浅克隆

var obj1 = {a: 1,b: 2,c: [44, 55, 66]
};
// 实现浅克隆
var obj2 = {};for(var k in obj1){// 每遍历一个k属性，就给obj2也添加一个同名的k属性// 值和obj1的k属性值相同obj2[k] = obj1[k];
}// 为什么叫浅克隆呢？比如c属性的值是引用类型值，那么本质上obj1和obj2的c属性是内存中的同一个数组，并没有被克隆分开。
obj1.c.push(77);
console.log(obj2);                  // obj2的c属性这个数组也会被增加77数组
console.log(obj1.c == obj2.c);      // true，true就证明了数组是同一个对象

二、对象的深克隆
1.克隆对象的全貌，不论对象的属性值是否又是引用类型值，都能将它们实现克隆
2.和数组的深克隆类似，对象的深克隆需要使用递归（面试常考）

var obj1 = {a: 1,b: 2,c: [33, 44, {m: 55,n: 66,p: [77, 88]}]
};// 深克隆
function deepClone(o) {// 要判断o是对象还是数组//要注意if语句的判断顺序，因为数组的typeof也是object，即如果先检测typeof o == 'object'//数组和对象都为object ，先检测数组if (Array.isArray(o)) {// 数组var result = [];for (var i = 0; i < o.length; i++) {result.push(deepClone(o[i]));}} else if (typeof o == 'object') {// 对象var result = {};for (var k in o) {result[k] = deepClone(o[k]);}} else {// 基本类型值var result = o;}return result; }
var obj2 = deepClone(obj1);
console.log(obj2); //被克隆console.log(obj1.c == obj2.c);      // false说明被克隆了，内存中不同的对象obj1.c.push(99);
console.log(obj2);                  // obj2不变的，因为没有“藕断丝连”的现象obj1.c[2].p.push(999);
console.log(obj2);                  // obj2不变的，因为没有“藕断丝连”的现象

想了解数组的浅克隆和深克隆点击即可

JS：对象的浅克隆、深克隆相关推荐

js对象深拷贝（深克隆）
我们首先看下面的例子: var userInfo = {username:"zhangsan",age:20}var copyUserInfo = userInfo;userInf ...
js 对象的clone(）函数
function clone(Obj){var buf;if(Obj instanceof Array){buf=[];var i=Obj.length;while(i--){buf[i]=clone ...
JS 对象封装的常用方式
JS是一门面向对象语言,其对象是用prototype属性来模拟的,下面,来看看如何封装JS对象. 常规封装 function Person (name,age,sex){ this.name = na ...
js对象，原型，call，apply浅析
//对象直接量,创建对象最简单的方式是在js里使用对象直接量var book = {"main title": "js", //属性里有空格,要用引号" ...
JS对象和JSON字符串相互转化总结
在web开发中,一般情况下需要前端和服务器的交换数据,我们一般使用JSON来完成数据的传输,JavaScript操作的对象是一般是变量:因此我们需要将JSON字符串转换为JS变量,下面总结JS对象和J ...
JS 对象机制深剖——new 运算符
其实关于 new 的讨论,早有众多前辈做了先行.然而作为 JS 对象机制系列的一个重要成员,这一篇不可少,而且按照自己的惯例,我将首先引用语言规范的内容.另外,本篇引用到的规范内容比较多,不过我会做详 ...
在js对象上绑定js数组原生方法
在js对象上绑定js数组原生方法在js对象上绑定数组方法会给当前对象添加一个lenght:0属性例: var o = {}; [].pop.call(o) console.log(o)//返回结果 ...
JQuery对象和JS对象区别与转换|| 事件绑定入口函数样式控制
JQuery对象和JS对象区别与转换 1. JQuery对象在操作时,更加方便. 2. JQuery对象和js对象方法不通用的. 3. 两者相互转换 * jq -- ...
从JS对象开始，谈一谈“不可变数据”和函数式编程
文章转载自:https://segmentfault.com/a/1190000008780076 作为前端开发者,你会感受到JS中对象(Object)这个概念的强大.我们说"JS中一切皆对 ...

JS：对象的浅克隆、深克隆

JS中对象的深浅克隆

JS：对象的浅克隆、深克隆相关推荐

最新文章

热门文章