Javascript浅拷贝和深拷贝 - HelloWorld开发者社区

前言

浅拷贝和深拷贝在前端开发中是非常重要的知识点，有时候面试官也非常喜欢问到这点，相信很多人只是听过这两个词，不明白他们的意思和涵义，这里将会浅显的讲解浅拷贝和深拷贝。总结学习的同时，希望大家也会有点收获。

Javascript的两种变量类型

1、JavaScript变量的类型分为两种：基本类型和引用类型。

基本类型是指简单的数据段，有5种类型： Undefined、Null、Boolean、Number 和String
引用类型是指可能有多个值构成的对象，一般为： Object、 Array、 function 等

2、JavaScript内存模型图：

Javascript浅拷贝和深拷贝

基本数据类型的特点：直接存储在栈(stack)中的数据
引用数据类型的特点：存储的是该对象在栈中引用即地址，真实的数据存放在堆内存里

3、基本类型是按值访问的，不会影响到其他数据，而引用类型的值是按地址访问的，简单的赋值，实际上只是把地址复制了一遍，修改任意一个值会影响到另外一个。

// 1、基本数据类型，不影响其他变量
var a = '没修改'
var b = a
a = '被修改'
b // '没修改'

// 2、引用数据类型修改，会影响其他变量
var obj1 = {a: '没修改'}
var obj2 = obj1
obj1.a = '被修改'
console.log(obj2) // {a: '被修改'}

从上面可以看出，基本数据类型，不影响其他变量，所以基本类型的值没有深拷贝的概念。而对象obj1 赋值给了数组obj2,JavaScript引擎只是将obj1的地址赋值给了obj2，他们指向同一个内存地址，并没有开辟新的栈，当修改obj1的值，obj2也被影响了，这就是浅拷贝当然很多时候我们并不希望这样。

深拷贝和浅拷贝

深拷贝和浅拷贝的示意图大致如下：

Javascript浅拷贝和深拷贝
浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

浅拷贝、深拷贝和赋值的区别

赋值操作则是两个对象一起指向一个对象，无论谁改变了对象里面的内容，都会互相影响。

浅拷贝和深拷贝都是将拷贝的内容放入新的对象中去，区别在于浅拷贝只会新增一个外层对象来放要拷贝对象的所有内容，所以如果要拷贝的对象里面的属性是对象则拷贝的是对象的引用，而深拷贝则是被拷贝对象包含多少对象，深拷贝就会对应生成多少对象来一一对应往里装被拷贝对象里的内容，所有的对象都是独立全新的拷贝一份。

简单来说：

赋值操作两个变量指向同一个对象，两者互相影响。
浅拷贝新生成一个对象，对象里面的属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址。
深拷贝会新生成所有对象（值对象里面层层嵌套对象），对象里面的属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），会新生成一个对象将内容拷贝进去。

浅拷贝的实现方式

1、Object.assign()实现

Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是Object.assign()进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。

var obj1 = { a: {a: "hello", b: 21} };

var obj2 = Object.assign({}, obj1);

obj2.a.a = "changed";

console.log(obj1.a.a); //  "changed"

如果对象里面的属性不是对象，则进行的是深拷贝。

var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = Object.assign({}, obj1);
obj2.b = 100;
console.log(obj1);
// { a: 10, b: 20, c: 30 } <-- 没有受到影响
console.log(obj2);
// { a: 10, b: 100, c: 30 }

深拷贝的实现方式

1、JSON.parse(JSON.stringify())实现

用JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象。

var obj1 = { a: { b: 10 } };
var obj2 = JSON.parse(JSON.stringify(obj1));
obj2.a.b = 20;
console.log(obj1);
// { a: { b: 10 } } <-- 沒被修改
console.log(obj2);
// { a: { b: 20 } }
console.log(obj1 === obj2);
// false
console.log(obj1.a === obj2.a);
// false

2、递归拷贝

递归方法实现深度克隆原理：遍历对象、数组直到里边都是基本数据类型，然后再去复制，就是深度拷贝。

var obj1 = {a: {name: '小红'}, b: 2, arr:[1,2]}
var obj2 = {}        
//参数：初始值，完成值
function deepClone(initalObj, finalObj) {    
  var obj = finalObj || {};    
  for (var i in initalObj) {       
    //判断是否引用类型，object,Array 的typeof检测 都是object
    if (typeof initalObj[i] === 'object') {
        //递归前，判断是对象还是数字，初始化
      obj[i] = (initalObj[i].constructor === Array) ? [] : {};            
      //递归自己
      arguments.callee(initalObj[i], obj[i]);
    } else {
    //基础类型值 直接复制
      obj[i] = initalObj[i];
    }
  }    
  return obj;
}

deepClone(obj1, obj2)
console.log(obj2)  //{a: {name: '小红'}, b: 2, arr:[1,2]}

3、lodash

该函数库也有提供_.cloneDeep用来做 Deep Copy

var _ = require('lodash');
var obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]
};
var obj2 = _.cloneDeep(obj1);
console.log(obj1.b.f === obj2.b.f);
// false

4、Object.create()实现

直接使用var newObj = Object.create(oldObj)，可以达到深拷贝的效果。

function deepClone(initalObj, finalObj) {    
  var obj = finalObj || {};    
  for (var i in initalObj) {        
    var prop = initalObj[i]; 
    if(prop === obj) {            
      continue;
    }        
    if (typeof prop === 'object') {
      obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
    } else {
      obj[i] = prop;
    }
  }    
  return obj;
}