深拷贝和浅拷贝

提及深浅拷贝其实就是数据内存,堆栈问题。

基本数据类型值指保存在栈内存中的简单数据段

var a=1
1.png
操做的是变量实际保存的值。a = 2;
2.png函数

基本类型变量的复制:从一个变量向一个变量复制时,会在栈中建立一个新值,而后把值复制到为新变量分配的位置上。var b= a;
栈内存
3.pngspa

引用数据类型:引用数据类型值指保存在堆内存中的对象。也就是,变量中保存的实际上的只是一个指针,这个指针指向内存中的另外一个位置,该位置保存着对象。访问方式是按引用访问。

vara = new Object();
ulStr8.png
当操做时,须要先从栈中读取内存地址,而后再延指针找到保存在堆内存中的值再操做
a.name= 'xz';
ulS6MV.png插件

引用类型变量的复制:复制的是存储在栈中的指针,将指针复制到栈中未新变量分配的空间中,而这个指针副本和原指针指向存储在堆中的同一个对象;复制操做结束后,两个变量实际上将引用同一个对象。所以,在使用时,改变其中的一个变量的值,将影响另外一个变量。
var b= a;
ulpPL8.png3d

因此深浅拷贝。就是对堆内存(复杂数据类型)而言。

浅拷贝就是拷贝相同的引用地址,跟第六张图同样。
深拷贝则是引用地址也发生了改变。指针

对象实现深拷贝的方案

1,经过JSON对象来回转换。JSON.parse(JSON.stringify())

缺点:

1),拷贝的对象的值中若是有函数、undefined、symbol则通过JSON.stringify()序列化后的JSON字符串中这个键值对会消失
2),没法拷贝不可枚举的属性,没法拷贝对象的原型链
3),拷贝Date引用类型会变成字符串
4),拷贝RegExp引用类型会变成空对象
5),对象中含有NaN、Infinity和-Infinity,则序列化的结果会变成null
6),没法拷贝对象的循环应用(即obj[key] = obj)
因此这个通常只适合纯数据对象code

2,经过{}赋值建立,开辟新的引用地址,在将须要拷贝的键值放在新的堆内存里面。实现深拷贝

a: {
        b: 1
    },
    c: 1
};
var obj2 = {};

obj2.a = {}
obj2.c = obj1.c
obj2.a.b = obj1.a.b;
console.log(obj1); //{a:{b:1},c:1};
console.log(obj2); //{a:{b:1},c:1};
obj1.a.b = 2;
console.log(obj1); //{a:{b:2},c:1};
console.log(obj2); //{a:{b:1},c:1};

3,经过插件,或第三方库。

1.lodash
2.jQuery对象

var oldJson = {
  Name: 'quber',
  List: [1, 2, 3, 4],
  Obj: [
   { name: 'qubernet', fun: function () { return 1; } },
   { name: 'qubernet1', fun: function () { return 2; } }
  ]
};
var newJson = $.extend(true, {}, oldJson);
console.log(JSON.stringify(newJson));

4,本身封装深拷贝方法

var obj1 = {
    a:{
        b:1
    }
};
function deepClone(obj) {
    var cloneObj = {}; //在堆内存中新建一个对象
    for(var key in obj){ //遍历参数的键
       if(typeof obj[key] ==='object'){ 
          cloneObj[key] = deepClone(obj[key]) //值是对象就再次调用函数
       }else{
           cloneObj[key] = obj[key] //基本类型直接复制值
       }
    }
    return cloneObj 
}
var obj2 = deepClone(obj1);
obj1.a.b = 2;
console.log(obj2); //{a:{b:1}}

首先这个deepClone函数并不能复制不可枚举的属性以及Symbol类型
这里只是针对Object引用类型的值作的循环迭代,而对于Array,Date,RegExp,Error,Function引用类型没法正确拷贝
对象循环引用成环了的状况
网上应该有更全的方法,能够本身去尝试blog

相关文章
相关标签/搜索