有关深浅拷贝

在说深浅拷贝之前先说一下Objct.assign()的用法

1.Objct.assign()将源对象的所有枚举属性复制给目标对象,他至少需要两个对象作为参数,第一个参数为目标对象,后面的对象都是源对象。

let targetObj1 = { a: 1 };
  let sourceObj1 = { b: 1 };
  let sourceObj11 = { c: 3 };
  Object.assign(targetObj1, sourceObj1, sourceObj11);
  console.log(targetObj1);

打印结果如下:
01.png

2.如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性

let targetObj1 = { a: 1, b: 2 };
        let sourceObj1 = { b: 1 };
        let sourceObj11 = { c: 3 };
        Object.assign(targetObj1, sourceObj1, sourceObj11);
        console.log(targetObj1);

打印结果如下:
02.png

3.如果只有一个参数,Object.assign会直接返回该参数。

 let targetObj1 = { a: 4 }
  Object.assign(targetObj1);
  console.log(targetObj1)

打印结果如下:
03.png
  1. 如果该参数不是对象,则会先转成对象,然后返回。(由于undefined和null无法转成对象,所以如果它们作为参数,就会报错。)
console.log(typeof (Object.assign(2)));

打印结果如下:
04.png

5.Object.assign可以用来处理数组,但是会把数组视为对象。

console.log(Object.assign([1, 2, 3], [4, 5]));

结果为[4,5,3],4代替1,5代替2,因为他们对应的位置一致。

6.Objct.assign()实行的是浅拷贝。如果源对象某个属性的值是对象,目标对象拷贝得到的是这个对象的引用。

var object1 = { a: { b: 1 } };
  var object2 = Object.assign({}, object1);
  object1.a.b = 2;
  console.log(object2.a.b);

打印结果如下:
05.png

接下来要将基本类型和引用类型

1.数据类型分为基本类型和引用类型:

基本类型:number,string,null,boolean,undifine等。
引用类型:Obj类型,也可以细分为Array类型,Obj类型,Function类型,Date类型等。

2.两种数据类型不同的存储方式

基本类型:
基本数据类型 保存在 栈内存,形式如下:栈内存中分别存储着变量的标识符以及变量的值。


即:

var a  = "A";

在栈内存中是这样的



引用类型:
引用类型保存在 堆内存 中, 栈内存存储的是变量的标识符以及对象在堆内存中的存储地址,当需要访问引用类型(如对象,数组等)的值时,首先从栈中获得该对象的地址指针,然后再从对应的堆内存中取得所需的数据。


即:

var a = {name:“jack”};

在内存中是这样的

3.不同类型的复制方式

基本类型 的复制:当你在复制基本类型的时候,相当于把值也一并复制给了新的变量。

var a = 1;
var b = a;
console.log(a === b);
var a = 2;
console.log(a);
console.log(b);

打印结果如下:

虽然改变 a 变量的值,但是并不会影响 b 的值。
内存中是这样的:

var a = 1;
var b = a;
a = 2;

引用类型 的复制:当你在复制引用类型的时候,实际上只是复制了指向堆内存的地址,即原来的变量与复制的新变量指向了同一个东西。

var a = {name:"jack",age:20};
var b = a;
console.log(a === b);
a.age = 30;
console.log(a);
console.log(b);

打印结果如下:

改变 a 变量的值,b的值也会改变。
内存中是这样的:

var a = {name:"jack",age:20};
var b = a;
a.age = 30;

最后最后要讲的就是深拷贝与浅拷贝

如果明白了上面的知识,那么就很容易理解深拷贝与浅拷贝。
那么如何区分深拷贝与浅拷贝呢?假设B复制了A,修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,如果B没变,那就是深拷贝。

概念

深拷贝:对于仅仅是复制了地址,复制了之后,原来的变量和新的变量指向同一个东西,彼此之间的操作还是会会互相影响。
浅拷贝:在堆中重新分配内存,拥有不同的地址,但是值是一样的,复制后的对象与原来的对象是完全隔离,互不影响

解决办法

那么,怎么让下面的代码实现深拷贝呢?

var a = {name:"jack",age:20};
var b = a;
console.log(a === b);
a.age = 30;
console.log(a);
console.log(b);

我们可以想象出让 b 在内存中像下图这样,肯定就是深拷贝了。


方法:1.JOSN 对象中的 stringify 可以把一个 js 对象序列化为一个 JSON 字符串,parse 可以把 JSON 字符串反序列化为一个 js 对象,这两个方法实现的是深拷贝。

var obj = {name:'xixi',age:20,company : { name : '腾讯', address : '深圳'} };
var obj_json = JSON.parse(JSON.stringify(obj));
console.log(obj === obj_json);
obj.company.name = "ali";
obj.name = "hei";
console.log(obj);
console.log(obj_json);

打印结果如下:

2.这是一种封装函数的方法,个人觉得没有第一种方法好用。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,402评论 6 499
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,377评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,483评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,165评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,176评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,146评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,032评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,896评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,311评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,536评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,696评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,413评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,008评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,815评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,698评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,592评论 2 353