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 復制對象、合並對象