JS深拷贝和浅拷贝

1.js基本数据类型

• 基本数据类型： String,Boolean,Number,Undefined,Null\
• 引用数据类型：
  Object(Array,Date,RegExp,Function)

基本数据类型和引用数据类型的区别：

1. 保存位置不同: 基本数据类型保存在栈内存中，引用数据类型保存在堆内存中，然后在栈内存中保存了一个对堆内存中实际对象的引用，即数据在堆内存中的地址，js对引用数据类型的操作都是操作对象的引用而不是实际对象，如果obj1拷贝了obj2，那么这两个引用数据类型就指向了同一个堆内存对象，具体操作是obj1将栈内存的引用地址复制了一份给obj2，因而他们指向了一个共同的堆内存对象；

为什么基本类型保存在栈中，引用数据类型保存堆中？

• 堆比栈大，栈比堆的速度快
• 基本数据类型比较稳定，相对来说占用的内存小
• 引用数据类型大小是动态的，而且是无限的
• 堆内存是无序存储，可以根据引用直接获取

按引用访问： js不允许直接访问保存早堆内存中的对象，所以访问一个对象时，首先得到的是这个对象在栈内存中的地址，然后在按照这个地址去获得这个对象的值。

ECMAScript中所有函数的参数都是按值传递的，对于原始值，只要把变量里的值传递给参数，之后参数和这个变量互不影响，对于引用值，对象变量里面的值就是这个对象在堆内存中的内存地址，因此它传递的值是这个内存地址，这也就是为什么函数内部对这个参数修改会体现在外部的原因，因为他们指向的是同一个对象。

2. 基本数据类型使用typeof可以返回基本数据类型，但是null会返回一个object，因此null表示一个空对象指针；引用数据类型使用typeof会返回object，此时就需要用instanceof来检测引用数据类型。

3. 定义引用数据类型需要使用new操作符，后面跟一个构造函数来创建。
   1） 使用new操作符创建对象；
   var obj = new Object();
   obj.name = "Lusen"
   2） 使用对象字面量创建对象
   var obj = { name: "Lusen" }

3. 可以使用点表示法访问对象属性，也可以使用[]访问对象属性（[]可以包含变量和非法字符）

• ES6新增数据类型：Map, Set, Generator, Symbol

深拷贝和浅拷贝

浅拷贝和深拷贝都只针对引用数据类型，浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象共享同一块内存；但深拷贝会创造一个一样的对象，不会和原来的对象共享内存，修改新对象不会改变原对象。
区别：浅拷贝只复制对象的第一层属性、深拷贝可以对对象的属性进行递归复制；

• Object.assign第一级属性是深拷贝，第一级以下浅拷贝

let person = {
        name: 'Lusen',
        speak: {
            chinese: 'good',
            english: 'bad'
        }
    }

    let person2 = Object.assign({}, person)

    person2.name = 'engline'
    person2.speak.chinese = 'greet'
    console.log(person.name);  // Lusen  
    console.log(person2.name); // engline
    console.log(person.speak.chinese);  // greet
    console.log(person2.speak.chinese); // greet

• 递归实现深拷贝

function deepCopy(obj) {
        var _obj = Array.isArray(obj) ? [] : {};
        if (obj && typeof _obj === 'object') {
            for (var i in obj) {
                var prop = obj[i] // 避免互相引用造成死循环
                if (prop === obj) {continue};
                if (obj.hasOwnProperty(i)){
                    // 如果子属性为引用数据类型，则递归复制
                    if (prop && typeof prop === 'object') {
                        _obj[i] = deepCopy(prop)
                    }else {
                        // 基本数据类型，直接简单复制
                        _obj[i] = prop
                    }
                }
            }
        }
        return _obj;
    }
    var obj1 = {
        a: 1,
        b: 2,
        c: {
            d: 3
        }
    }
    var obj2 = deepCopy(obj1);
    obj2.a = 3;
    obj2.c.d = 4;
    alert(obj1.a); // 1
    alert(obj2.a); // 3
    alert(obj1.c.d); // 3
    alert(obj2.c.d); // 4

• 使用JSON.stringify和JSON.parse实现深拷贝：先把对象转化为字符串，在转成新的对象

function deepCopy(obj1){
    let _obj = JSON.stringify(obj1);
    let obj2 = JSON.parse(_obj);
    return obj2;
  }
    var a = [1, [1, 2], 3, 4];
    var b = deepCopy(a);
    b[1][0] = 2;
    alert(a); // 1,1,2,3,4
    alert(b); // 2,2,2,3,4

缺点: 会抛弃对象的constructor，深拷贝之后，不管这个对象原来的构造函数是什么，都会变成Object。这种方法只能处理对象只有Number,String,Boolean,Array,扁平对象，也就是说只有可以转成json格式的对象才能这样用，function就没办法

let obj1 = {
   fun:function(){
      alert(123);
   }
}
let obj2 = JSON.parse(JSON.stringify(obj1));
console.log(typeof obj1.fun); // function
console.log(typeof obj2.fun); // undefined

• lodash函数库有提供方法做深拷贝

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

• slice只有对一级属性的数组对象深拷贝

// 一级属性数组使用slice
var a = [1,2,3,4];
var b = a.slice();
b[0] = 2;
alert(a); // 1,2,3,4
alert(b); // 2,2,3,4

// 对有多层属性的数组对象使用slice
var a = [1,[1,2],3,4];
var b = a.slice();
b[1][0] = 2;
alert(a); // 1,2,2,3,4
alert(b); // 1,2,2,3,4

• Object.create

var obj1 = {
        a: 1,
        b: {
            c: 2
        }
    }

    var obj2 = Object.create(obj1)
    obj2.a = 22
    obj2.b.c = 333
    console.log(obj1.a); // 1
    console.log(obj2.a); // 22
    console.log(obj1.b.c); // 333
    console.log(obj2.b.c); // 333