如何安全的修改对象 · 前端笔记

## 如何安全的修改对象不知你是否遇到过这类问题：将一个变量（对象）赋值给另一个变量，结果修改这个变量，另外一个也跟着变了，无论修改哪一个，另外一个都会受影响。先来看这个例子： ```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