深度克隆---js对象引用

首先,我们要知道,javascript中除了基本类型(number,string,boolean,null,undefined)之外就是引用类型了,也可以说就是js对象了。

引用类型的赋值其实是对象保存在栈区地址指针的赋值,因此两个变量指向同一个对象,任何的操作都会相互影响。

在探讨到深度克隆之前,我们先来看一下下面的例子:

example01:

1     var a = [1,2,3];
2     var b = a; // a b共用一个引用
3     b.push(4);
4     alert(b); // [1,2,3,4]
5     alert(a); // [1,2,3,4]

example02:

1     var a = [1,2,3];
2     var b = a;
3     b = [1,2,3,4]; // b新开了一个引用
4     alert(b); // [1,2,3,4]
5     alert(a); // [1,2,3]

example03:

1     var obj = {
2         a: 10
3     };
4     var obj2 = obj;
5     obj2.a = 20;
6     alert(obj.a); // 20

example04:

 1     var obj = {
 2         a: 10
 3     };
 4     function copy(obj){ // 浅拷贝, 只拷贝的一层
 5         var newObj = {};
 6         for(var attr in obj){
 7             newObj[attr] = obj[attr];
 8         }
 9         return newObj;
10     }
11     var obj2 = copy(obj);
12     obj2.a = 20;
13     alert(obj.a); // 10

example05:

 1     var obj = {
 2         a: {
 3             b: 10
 4         }
 5     }
 6     function copy(obj){  //浅拷贝, 只拷贝了一层
 7         var newObj = {};
 8         for(var attr in obj){
 9             newObj[attr] = obj[attr];
10         }
11         return newObj;
12     }
13     var obj2 = copy(obj);
14     obj2.a.b = 20;
15     alert(obj.a.b); // 20

看完上面几个例子之后,想必对js对象引用有了一定的认识。接下来,我们来看js里面另外一个重要的应用---递归。

递归定义可以分为两点:(1).函数调用函数自身,执行递的动作;(2).最后一次判断一个终止条件,可以执行归的动作。

example06:

1     //求nX(n-1)X(n-2)X...X2X1
2
3      function test(n){
4          if(n == 1){
5             return 1;
6          }
7         return n*test(n-1);
8      }
9      alert(test(5)); // 120

所以,深拷贝也用到了递归。

对象的子对象也是引用,所以遍历赋值的时候要判断,子元素是否是对象,如果子元素是对象,则继续对子元素进行遍历赋值

example07:

 1     //深拷贝
 2     function deepClone(obj){
 3         var newObj = {};
 4         if(typeof obj != ‘object‘){
 5             return obj;
 6         }
 7         for(var attr in obj){
 8             newObj[attr] = deepClone(obj[attr]);
 9         }
10         return newObj;
11     }
12     var obj = {
13         a: {
14             b: 10
15         }
16     };
17     var obj2 = deepClone(obj);
18     obj2.a.b = 20;
19     alert(obj.a.b); // 10
时间: 2024-10-15 09:27:03

深度克隆---js对象引用的相关文章

深入浅出设计模式 ------ Prototype(原型模式)之深度克隆

继上篇深入浅出设计模式 ------ Prototype(原型模式)的浅克隆实现, 本文进入Prototype(原型模式)的进阶篇----深度克隆. 深度克隆 ---- 序列化方式实现 把对象写到流里的过程是序列化(Serilization)过程,而把对象从流中读出来的过程则叫做反序列化(Deserialization).写在流里的是对象的一个克隆(新的, 独立的), 而原对象仍存在于JVM内存模型里.因此, 以下代码采用序列化方式实现深度克隆. 第一步: 将上篇的代码做些许改动, 加入对象引用

Js深度克隆解析

Js克隆(clone),就是数据拷贝,包括基础类型的数据和引用类型的数据,而深度克隆(deepClone)就是针对引用类型,如数组和对象. 两种拷贝的区别在于:浅拷贝时,拷贝出的对象指向原对象的地址,当其值发生改变时,原对象的值也发生改变:        深度拷贝,拷贝出的对象指向一个新的地址,当其值发生改变时,原对象的值不受影响. 下面列出深度拷贝的代码及其详细注释: var obj = {//待拷贝的对象 name:"abc", age:"123", card:

js深度克隆对象

js深度克隆对象简单的记录一下,如下代码: var obj = { typeOf: function(obj) { const toString = Object.prototype.toString; const map = { '[object Boolean]': 'boolean', '[object Number]': 'number', '[object String]': 'string', '[object Function]': 'function', '[object Arr

JS的深度克隆,利用构造函数原型深度克隆

我爱撸码,撸码使我感到快乐!大家好,我是Counter.今天来写写,JS中的深度克隆,这个在笔面试中,考的还是比较多的,主要是对象与数组的赋值,如果直接赋值的话,那么得到的是对象或者数组在堆里的地址,那么原有的的数据修改的话,那么克隆的数据也会随着修改,这就是浅克隆,所以这边就要使用到枚举,然后再每一项赋值,这样就可以完成一份深度克隆,这样原对象里修改属性,如果你在这对象修改之前已经克隆的话,那么你这个克隆的对象,对象里的属性是不变,这就是深度克隆.话不多说了,直接上代码: // 假设要克隆的对

js 深度克隆

js中赋值主要有两种赋值形式,一种是值引用,另一种是址引用(地址). 一般对象赋值的时候,都是地址引用,所以在修改新对象的时候,其实修改了在内存区地址上的值. 为了达到值引用的效果,所以有 深度克隆的概念.   ps:自己理解的,被误导了别怪我 实现方式一: function deepClone(origin, target) { var target = target || {}, toStr = Object.prototype.toString, arrStr = '[object Arr

JS对象深度克隆

首先看一个例子: 1 var student = { 2 name:"yxz", 3 age:25 4 } 5 var newStudent = student; 6 newStudent.sex = "male"; 7 console.log(student); //{name:"yxz",age:25,sex:"male"} 由此可见,将一个对象通过简单的传递赋值传递给一个新的变量时,仅仅是给该对象增添了一个别名.所以,对

js学习随笔一:对象简单、深度克隆(复制)

javascript的一切实例都是对象,只是对象之间稍有不同,分为原始类型和合成类型.原始类型对象指的是字符串(String).数值(Number).布尔值(Boolean),合成类型对象指的是数组(Array).对象(Object).函数(Function). 既然对象分为这两类,他们之间的最大差别是复制克隆的差别.普通对象存储的是对象的实际数据,而引用对象存储的是对象的引用地址,而把对象的实际内容单独存放,因为引用对象通常比较庞大,这是数据开销和内存开销优化的手段.通常初学者很难理解这部分内

javascript中对象的深度克隆

零.寒暄 又是一个月多月没有更新博客了,这段时间回学校处理下论文的事情,实习的生活也暂时告一段落(在公司上班,才发现学校里面的生活简直如天堂一般,相信很多已经毕业的小伙伴肯定被我说中了,说中了请给本文点个赞,哈哈!).希望接下来自己的更新进度能加快,马上又是一年校招时,被虐也好.大牛虐别人也罢,总之祝福各位今年要找工作的小伙伴们好运.那么,今天就聊一下一个常见的笔试.面试题,js中对象的深度克隆.翻了下这个题目,在很多地方出现过,已经算一个老的题目了,但是每年的校招中总会考到,其实想想,这个题目

深度克隆

如何使用原生 Javascript 代码深度克隆一个对象(注意区分对象类型) 对于深度克隆,我的理解是:在克隆或扩展一个对象时,当该对象是一个包括子对象的对象,也会遍历该子对象的属性并进行复制拷贝.所以深度克隆适用于对象的属性也是对象的情况. 贴出js代码: /** * 深度扩展对象--适用于对象的属性也是对象的情况 * @param {Object} * @return {Object} */ var deepextend = function (destination, source) {