之前的文章《你值得了解的JavaScript“繼承之jquery”使用方法（代碼詳解）》中，給大家了解了JavaScript“繼承之jquery”使用方法。下面本篇文章給大家了解一下JS中對象拷貝方法，有需要的朋友可以參考一下。

說到javascript中的對象拷貝，首先我們想到的是Object.assign()

JSON.parse(JSON.stringify()),還有ES6的展開操作符[...]

因為在js中=運算符 對于對象來說，不能創(chuàng)建副本，只是對該對象的引用

運算符

var x = {   a: 1,   b: 2, }; y = x; x.a = 10; console.log(x); //{a:10, b:2} console.log(y); //{a:10, b:2}

所以在進行對象操作時，運算符等于號（=）不可取

Object.assign()

var x = {   a: 1,   b: 2, }; y = Object.assign({}, x); x.a = 10; console.log(x); //{a:10, b:2} console.log(y); //{a:1, b:2}

初看，不會發(fā)現(xiàn)異常，因為所要的就是我們所要的結(jié)果，把對象結(jié)構(gòu)弄再稍微復(fù)雜些再看

var x = {   a: 1,   b: 2,   c: {     d: 3,   }, }; y = Object.assign({}, x);  x.a = 5; console.log(x); //{a:5, b:2, c:{d:3}} console.log(y); //{a:5, b:2, c:{d:3}}  x.c.d = 10; console.log(x); //{a:5, b:2, c:{d:10}} console.log(y); //{a:5, b:2, c:{d:10}}

此時就發(fā)現(xiàn)坑了，那么已經(jīng)證明了Object.assign()只是實現(xiàn)了對象的淺拷貝

Object.assign()還需要注意的一點是，原型鏈上屬性的不可枚舉對象是無法復(fù)制的，看一下代碼：

var x = {   a: 1, }; var y = Object.create(x, {   b: {     value: 2,   },   c: {     value: 3,     enumerable: true,   }, }); var z = Object.assign({}, y); console.log(z); //{c:3}

拿到z的值很讓人意外，因為x是y的原型鏈，所以x不會被復(fù)制

屬性b是不可枚舉屬性，也不會被復(fù)制

只有c具有可枚舉描述，他可以被枚舉，所以才能被復(fù)制

以上的坑也可以很好的被解決，且往下看：

深拷貝JSON.parse(JSON.stringify())

解決淺拷貝的坑

var x = {   a: 1,   b: 2,   c: {     d: 3,   }, }; y = JSON.parse(JSON.stringify(x)); x.a = 5; x.c.d = 10; console.log(x); //{a:5, b:2, c:{d:10}} console.log(y); //{a:1, b:2, c:{d:3}}

當(dāng)然普通的對象，此種復(fù)制方式已經(jīng)是基本是完美了，那么他的坑在哪里呢

var x = {   a: 1,   b: function b() {     return "2";   }, }; y = JSON.parse(JSON.stringify(x)); z = Object.assign({}, x);  console.log(y); //{a:1} console.log(z); //{a:1, b:function b(){return '2'}}

從結(jié)果看來，Object.assign()可以復(fù)制方法，JSON.parse(JSON.stringify())不可以

再來看第第二個坑：

var x = {   a: 1,   b: {     c: 2,     d: 3,   }, };  x.c = x.b; x.d = x.a; x.b.c = x.c; x.b.d = x.d;  var y = JSON.parse(JSON.stringify(x)); console.log(x);  /* Uncaught TypeError: Converting circular structure to JSON      at JSON.stringify (<anonymous>)     at <anonymous>:8:25  */

報錯了，其結(jié)果表明JSON.parse(JSON.stringify()),不能拷貝循環(huán)引用對象

再來看看Object.assign()

var x = {   a: 1,   b: {     c: 2,     d: 3,   }, };  x.c = x.b; x.d = x.a; x.b.c = x.c; x.b.d = x.d;  var y = Object.assign({}, x); console.log(x); /* [object Object]{ a:1,  b:[object, Object],  d:[object, Object],  d:1 } */

使用展開操作符[… ]

對象字面量的展開操作符目前是ECMAScript的第 3 階段提案，拷貝對象更加簡單了

var x = [   "a",   "b",   "c",   "d",   {     e: 1,   }, ]; var y = [...x]; console.log(y); //['a', 'b', 'c', 'd', {'e':1}]  var m = {   a: 1,   b: 2,   c: ["d", "e"], }; var n = {   ...m, }; console.log(n); //{a:1, b:2, c:['d', 'e']}

需要注意的是展開操作符也是淺拷貝。那么復(fù)制對象這廝真的這么難搞嗎？

自己造輪子：

function copy(x) {   var y = {};   for (m in x) {     y[m] = x[m];   }   return y; } var o = {   a: 1,   b: 2,   c: {     d: 3,     e: 4,   }, }; var p = copy(o);

有人說這么干應(yīng)該沒多大問題了吧。那么只能呵呵了，繼續(xù)走

var x = {};  Object.defineProperty(x, "m", {   value: 5,   writable: false, });  console.log(x.m); //5 x.m = 25; //這一步?jīng)]報錯，但是也沒執(zhí)行 console.log(x.m); //5

那么這樣一來，展開操作符復(fù)制對象到這里也會遇到坑。

到處都是坑，防不勝防….我寫到這估計還有許多坑都沒完全列出來

之后再寫吧

[完]

推薦學(xué)習(xí)：JavaScript視頻教程