拷贝

在上一节中我们将了js继承的几种方式。这一节我们来讲一下，js对象的拷贝。为什么会出现拷贝。我们来看一个列子，您大致就明白了。

var a = {b:1}
var b = a
a.b =2
console.info(b.b) //2

我们可以看到，两个对象是同一个内存地址，我们改变了a.b然而我们的b.b被动的改变了。所以这时候出现了一个东西叫对象的拷贝。此时我们又要引出两个概念：浅拷贝，深拷贝

浅拷贝

顾名思义，浅拷贝是说只是拷贝表层，并不会深入的拷贝对象。换句话说一个对象，它只会拷贝一层，而不会拷贝对象中的子对象。让我们看下几种浅拷贝的实现方式。

对象

对象的拷贝

遍历实现浅拷贝

var obj1 ={
	a:1
}
var obj2 = {
	b:2
};

function extendCopy(p,s) {
	var c = {};
	for (var i in p) { 
		c[i] = p[i];
	}
	for (var j in s) { 
		c[j] = s[j];
	}
	return c;
}

var newObj = extendCopy(obj1,obj2);
console.info(newObj); // {a: 1, b: 2}

es6中Object.assign实现浅拷贝

// 对象浅拷贝， 复制所有可枚举属性
const obj1 = {a: 1};
const obj2 = {b: 2};
// copy obj1 and obj2 to a new obj;
const newObj = Object.assign({}, obj1, obj2)
console.log(newObj) //// {a: 1, b: 2}

es6中结构赋值实现浅拷贝

const obj1 = {a: 1, b: 2};
// obj2 equal obj1
const obj2 = {...obj1};
console.log(obj2) // {a: 1, b: 2}

数组

数组的拷贝。

遍历拷贝。

const arr = [1,2,3];
let newarr = [];
arr.map((data)=>{
	newarr.push(data)
});
console.log(newarr); //[1,2,3]

Array.from(要复制的数组);

const arr=[1,2,3];
const newarr =Array.from(arr);
console.info(newarr); //[1,23]

...结构赋值

const arr=[1,2,3];
const newarr=[...arr];
console.info(newarr); //[1,2,3]

深拷贝

好了我们大概已经知道几种浅拷贝的方式和方法。下面我们来介绍下复杂的数据怎么办，很简单深拷贝。目前深拷贝有很多实现方式，比如lodash啊，jq啊，还有原生的js，我们这里大概枚举一些常用的。

Underscore库 _.clone()

var x = {
    a: 1,
    b: { z: 0 }
};
var y = _.clone(x);

jQuery —— $.extend()

var x = {
    a: 1,
    b: { f: { g: 1 } },
    c: [ 1, 2, 3 ]
};

var y = $.extend({}, x),          //shallow copy
    z = $.extend(true, {}, x);    //deep copy

lodash _.cloneDeep(value)

var objA = { "name": "colin" };
var objB = _.cloneDeep(objA);

原生js字符串

var obj = {"a":1,"b":2}
var newObj = JSON.parse((JSON.stringify(obj)))

自己来封装一个diy

var cloneObj = function(obj){
    var str, newobj = obj.constructor === Array ? [] : {};
    if(typeof obj !== 'object'){
        return;
    } else if(window.JSON){
        newobj = JSON.parse(JSON.stringify(obj));
    } else {
        for(var i in obj){
            newobj[i] = typeof obj[i] === 'object' ? 
            cloneObj(obj[i]) : obj[i]; 
        }
    }
    return newobj;
};

结语

好了，今天的拷贝内容终于完结了，记录代码记录知识，本博客就是快准狠，直接上代码片段，希望喜欢的朋友给点支持多多转发，不说了，抽烟去了。

浅谈js中的继承和拷贝（下）

拷贝

浅拷贝

对象

数组

深拷贝

结语