如何安全的修改對象 · 前端筆記

## 如何安全的修改對象不知你是否遇到過這類問題：將一個變量（對象）賦值給另一個變量，結果修改這個變量，另外一個也跟著變了，無論修改哪一個，另外一個都會受影響。先來看這個例子： ```javascript // javascript代碼 var s = {"a":1}; var a = s; s; // Object {a: 1} a; // Object {a: 1} s.a = 2; // set s.a = 2; s; // Object {a: 2} a; // Object {a: 2} ``` s是一個對象，變量a是由s賦值的，s對象更改后，a也更改了。你知道了，對象是引用指針，所以才會這樣。再看看數據的情況： ```javascript // javascript代碼 var s = [1]; var a = s; a[0]; // 1 s[0]; // 1 s[0] = 2; // set s[0] = 2; a[0]; // 2 a[0]; // 2 ``` 沒想到換數據也是這樣，其實js中的數組也是對象：`[] <=>new Array();` * * * * * **我們再來用PHP做一個跟這一樣的實驗：** ```php // 對象實驗： class A { public $v = 0; public function set($v) { $this->v = $v; } } $a = new A(); echo '$a = new A(); '; $b = $a; echo '$b = $a; '; echo '$a->v: ', $a->v, ' '; echo '$b->v: ', $b->v, ' '; $b->set(2); echo '$b->set(2); '; echo '$a->v: ', $a->v, ' '; echo '$b->v: ', $b->v, ' '; // -------- // 輸出結果： // $a = new A(); // $b = $a; // $a->v: 0 // $b->v: 0 // $b->set(2); // $a->v: 2 // $b->v: 2 ``` ```php // 變量實驗： $a = 1; $b = $a; $a = 2; echo $b; // 1 ``` ```php // 數組實驗： $a = [1]; $b = $a; $a[0] = 2; echo $b[0]; // 1 ``` 可以看見，php對象和js對象是一樣的，賦值的變量是一個對象應用。知道了這個原因，那么問題就好解決了，用對象克隆。 ```php // 對象實驗： class A { public $v = 0; public function set($v) { $this->v = $v; } } $a = new A(); echo '$a = new A(); '; $b = clone $a; echo '$b = $a; '; echo '$a->v: ', $a->v, ' '; echo '$b->v: ', $b->v, ' '; $b->set(2); echo '$b->set(2); '; echo '$a->v: ', $a->v, ' '; echo '$b->v: ', $b->v, ' '; // -------- // 輸出結果： // $a = new A(); // $b = $a; // $a->v: 0 // $b->v: 0 // $b->set(2); // $a->v: 0 // $b->v: 2 ``` 繼續回到問題，同樣的JS中使用 `clone` 克隆關鍵字也可以。但是js沒有這個 `clone` 關鍵字。但到這里，相信你也已經知道了怎么解決JS中克隆對象的問題。 *提示：自行百度 js對象克隆、js深拷貝/淺拷貝* * * * * * ### 參考： [JS對象深度克隆 - yxz_turing - 博客園](https://www.cnblogs.com/yxz-turing/p/4784861.html) [js如何復制一個對象？ - CSDN博客](http://blog.csdn.net/liyujia6636/article/details/52198128) [JavaScript 深拷貝性能分析](http://mp.weixin.qq.com/s/VoiuMnM-VVY6A894UA-K9Q) last update：2018-2-7 18:47:05