js object对象赋值bug和对象复制clone方法

本文转载自查看原文 2017-06-09 16:06 2208 对象/ clone/ js/ object

最近在写程序的时候发现，如果新建一个object对象objb，初始化值为obja，如果改变了objb对象的字段值，那么obja也会随之改变，看来对象赋值传递的是一个引用。

代码重现：

 1 <script>
 2     var obja = {
 3         'apple':{'key':'apple','name':'苹果'},
 4         'banana':{'key':'banana','name':'香蕉'},
 5     };
 6 
 7     var objb = obja;
 8 
 9     console.log(obja);
10     delete(objb['apple']);
11     console.log(obja);
12 </script>

执行结果：

Object {apple: Object, banana: Object}
Object {banana: Object}

解决办法clone，生成一个新的对象，而不是对原对象的引用。

代码如下：

 1 <script>
 2     function clone(obj) {
 3         var o;
 4         if (typeof obj == "object") {
 5             if (obj === null) {
 6                 o = null;
 7             } else {
 8                 if (obj instanceof Array) {
 9                     o = [];
10                     for (var i = 0, len = obj.length; i < len; i++) {
11                         o.push(clone(obj[i]));
12                     }
13                 } else {
14                     o = {};
15                     for (var j in obj) {
16                         o[j] = clone(obj[j]);
17                     }
18                 }
19             }
20         } else {
21             o = obj;
22         }
23         return o;
24     }
25 
26     var obja = {
27         'apple':{'key':'apple','name':'苹果'},
28         'banana':{'key':'banana','name':'香蕉'},
29     };
30 
31     var objb = clone(obja);
32 
33     console.log(obja);
34     delete(objb['apple']);
35     console.log(obja);
36 </script>

执行结果：

Object {apple: Object, banana: Object}
Object {apple: Object, banana: Object}

纯文字：

代码重现：

var objb = obja;

console.log(obja);
delete(objb['apple']);
console.log(obja);
</script>

执行结果：

Object {apple: Object, banana: Object}
Object {banana: Object}

解决办法clone，生成一个新的对象，而不是对原对象的引用。

代码如下：

var obja = {
'apple':{'key':'apple','name':'苹果'},
'banana':{'key':'banana','name':'香蕉'},
};

var objb = clone(obja);

console.log(obja);
delete(objb['apple']);
console.log(obja);
</script>

执行结果：

Object {apple: Object, banana: Object}
Object {apple: Object, banana: Object}

done!

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 java Object对象的clone方法【转】JavaScript中的对象复制(Object Clone) js对象等号赋值的bug 【PHP】对象的复制(拷贝)与__clone()方法 JavaScript 中的对象深度复制(Object Deep Clone) 对象的赋值和复制（转） Object.assign方法复制或合并对象关于Java的Object.clone()方法与对象的深浅拷贝 java对象clone()方法 Object 对象方法学习之（1）—— 使用 Object.assign 复制对象、合并对象