JavaScript复制对象误区

如果不了解JavaScript数据类型,那么也许你会以为对象的复制是相互独立的,其实它们都是一个指针,而这个指针指向存储在堆中的一个对象。复制结束后,两个变量实际上将引用同一个对象。因此改变其中一个变量会影响另外一个变量。

普通变量复制,相互独立

也就是变量只是引用,并不是真正的地址

// 声明一个变量str1
var str1 = '琼台博客';
 
// 将变量str1赋值给str2
var str2 = str1;
 
// 再改变str1的值
str1 = 'www.qttc.net'
 
// 打印str1与str2的结果
console.log('str1:' + str1 + ', str2:' + str2); // Output: str1: www.qttc.net, str2: 琼台博客

声明一个str1的初始值是琼台博客,当使用str1的值来赋给str2时,str2的值也同样是琼台博客。最后,str1改变了值,但str1与str2是完全独立,在内存中分别是两个对象,所以改变任何一个变量的值都不会影响到别的变量。

对象变量复制,共用一个指针

// 声明一个对象obj1
var obj1 = {};
 
// 将对象obj1复制给obj2
var obj2 = obj1;
 
// 给对象obj1增加的website属性值为:www.qttc.net
obj1.website = 'www.qttc.net';
 
// 打印obj1与obj2的website属性结果
console.log('obj1.website:'+obj1.website+',obj2.website:'+obj2.website);

// Output: obj1.website:www.qttc.net,obj2.website:www.qttc.net

许多人会误以为只给obj1添加website属性,所以obj2的website属性是undefined。

首先,变量obj1保存了一个对象的新实例。然后,这个值被复制到obj2中。而JavaScript中的对象属于引用类型,所以复制引用类型的值时同样也会在栈中分配一个空间,但obj1与obj2实际上都指向堆内存的一个地址。所以操作obj1也等于操作obj2。obj1添加website属性,obj2也同样拥有website属性。

分享

TITLE: JavaScript复制对象误区

LINK: https://www.qttc.net/149-javascript-object-notes.html

NOTE: 原创内容,转载请注明出自琼台博客