2016-11-21 8 views
0

オブジェクトを変数にコピー/クローンした後、値を変更して別のオブジェクトに影響を与えようとしないときに参照に問題があります。Object.Assign on Composite Object

私はObject.Assignメソッドの文書を調べていますが、深いクローンのために持っているものをうまくいかないことを試みました。

私は自分をより良く表現し、適切に行う方法を知っている場合に備えて、plnkrを作成しました。 @czoselの答えを

Code Sample in here

const value = 20.20; 
 
let a = { a: 10 }; 
 
let bb = { v: value }; 
 
let b = { b: 20, bb: bb }; 
 
let c = { c: 30 }; 
 
let object1 = { name: 'cloneObject', a, b, c } 
 
let object2 = Object.assign({}, object1); 
 
let object3 = Object.assign({}, object1); 
 

 
object1.name = 'it works fine'; 
 
object1.b.bb.v = 999; // this will change same property in object2 & object3 and it shouldn't 
 

 
document.getElementById('expected1').innerHTML = object1.b.bb.v; 
 
document.getElementById('expected2').innerHTML = value; 
 
document.getElementById('expected3').innerHTML = value; 
 

 

 
document.getElementById('name1').innerHTML = object1.name; 
 
document.getElementById('name2').innerHTML = object2.name; 
 
document.getElementById('name3').innerHTML = object3.name; 
 

 
document.getElementById('value1').innerHTML = object1.b.bb.v; 
 
document.getElementById('value2').innerHTML = object2.b.bb.v; 
 
document.getElementById('value3').innerHTML = object3.b.bb.v;
<table style="width:100%; text-align: center"> 
 
    <tr> 
 
    
 
    <th>Object</th> 
 
    
 
    <th>Name</th> 
 
    
 
    <th>Value</th> 
 
    
 
    <th>Expected Value</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Object 1</td> 
 
    <td id='name1'></td> 
 
    <td id='value1'></td> 
 
    <td id='expected1'></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Object 2</td> 
 
    <td id='name2'></td> 
 
    <td id='value2'></td> 
 
    <td id='expected2'></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Object 3</td> 
 
    <td id='name3'></td> 
 
    <td id='value3'></td> 
 
    <td id='expected3'></td> 
 
    </tr> 
 
</table>

、私が得た:

JSON.parse(JSON.stringify(object1));

をだから、このようになります:

@ gon250は親クラスで実装する予定であり、デフォルトでメソッドを継承するので、私は@ gon250の方が良い答えを見つけました。再帰性がより効率的になると私は思う。

ありがとうございます! :)

答えて

1

:ここ

function cloneObject(myObj) { 
    var temp = myObj.constructor(); 
    if (myObj === null || typeof myObj !== 'object') { 
     return myObj; 
    } 
    for (var key in myObj) { 
     temp[key] = cloneObject(myObj[key]); 
    } 
    return temp; 
} 

はあなたのコードに機能を実装する例である:

https://jsfiddle.net/gon250/4qx247th/

1

Object.assign深いクローニングについては、Warning for Deep Clone (MDN)を参照してください。

代替手段については、this popular questionを参照してください。

オブジェクトのクローンを作成する簡単な関数を見ることができます以下
関連する問題