[javascript]深拷贝和浅拷贝

我对「前端面试题系列9」浅拷贝与深拷贝的含义、区别及实现（文末有岗位内推哦~）里的深拷贝进行一些总结

这个更容易理解

首先，深拷贝和浅拷贝的目的是想拷贝一个变量，拷贝后的新变量与旧变量是独立的。

JS中的变量类型分为值类型（基本类型）和引用类型。值类型：存的是数据，引用类型：存的是地址。

对值类型进行复制操作会对值进行拷贝，而对引用类型赋值，则会对地址进行拷贝，最终两个变量指向同一份数据。

因此对值类型的复制用浅拷贝即可，而对引用类型进行浅拷贝的话只能拷贝地址，拷贝前与拷贝后对象将公用同一组数据，不符合我们的目的。因此需要深拷贝。

递归 

function deepClone(obj) {
    if(!obj && typeof obj !== 'object'){// ①
        return;
    }
    var newObj= toString.call(obj) === '[object Array]' ? [] : {}; //②
    for (var key in obj) { //③
        if (obj[key] && typeof obj[key] === 'object') {
            newObj[key] = deepClone(obj[key]);
        } else {
            newObj[key] = obj[key];
        }
    }
    return newObj;
}

①：根据这篇文章可以得出，typeof obj为'object'的有：null、Object示例、{}（对象）、[]（数组）和正则式

为什么typeof null = 'object'：来源

先谈谈关于 typeof 的原理吧，js 在底层是怎么存储数据的类型信息呢？或者说，一个 js 的变量，在它的底层实现中，它的类型信息是怎么实现的呢？

其实，js 在底层存储变量的时候，会在变量的机器码的低位1-3位存储其类型信息?

• 000：对象
• 010：浮点数
• 100：字符串
• 110：布尔
• 1：整数

but, 对于 undefined 和 null 来说，这两个值的信息存储是有点特殊的。

null：所有机器码均为0

undefined：用 −2^30 整数来表示

所以，typeof 在判断 null 的时候就出现问题了，由于 null 的所有机器码均为0，因此直接被当做了对象来看待。

②：同样是上面给出的文章，加上这篇：为什么用Object.prototype.toString.call(obj)检测对象类型?

使用{}.toString.call(obj)可以很好的区分各种类型：（无法区分自定义对象类型，自定义类型可以采用instanceof区分）

console.log({}.toString.call(1))//[object Number]
console.log({}.toString.call("11"))//[object String]
console.log({}.toString.call(/123/))//[object RegExp]
console.log({}.toString.call({}))//[object Object]
console.log({}.toString.call(function(){}))//[object Function]
console.log({}.toString.call([]))//[object Array]
console.log({}.toString.call(true))//[object Boolean]
console.log({}.toString.call(new Date()))//[object Date]
console.log({}.toString.call(new Error()))//[object Error]
console.log({}.toString.call(null))//[object Null]
console.log({}.toString.call(undefined))//[object Undefined]
console.log(String(undefined))//undefined
console.log(String(null))//null

所以可以得出：toString.call(obj) 是Object的一个方法，实际上就是Object.prototype.toString.call(obj)

③：当obj是对象时，key值是对象的属性；当obj是数组时，key值是数组的索引（就是下标）
       当内层依旧是数组或者对象时，进入递归

不过，这个方法貌似会存在 引用丢失 的的问题。比如这样：（什么是引用丢失？？？

var b = {};
var a = {a1: b, a2: b};

a.a1 === a.a2 // true

var c = clone(a);
c.a1 === c.a2 // false

如果我们的需求是，应该丢失引用，那就可以用这个方法。反之，就得想办法解决。

还有一个好理解的代码

var deepCopy = function(obj) {
    if (typeof obj !== 'object') return;
    var newObj = obj instanceof Array ? [] : {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
        }
    }
    return newObj;
}

一行代码的深拷贝

当然，还有最简单粗暴的深拷贝方法，就是利用 JSON 了。像这样：

let newArr2 = JSON.parse(JSON.stringify(arr));
console.log(arr[0]); // {a:1, b:2}
newArr2[0].a = 123;
console.log(arr[0]); // {a:1, b:2}

但是，JSON 内部用了递归的方式。数据一但过多，就会有递归爆栈的风险。

// Maximum call stack size exceeded

 

记录一下过程中遇到的新的问题：基本类型里有number、string、boolean，但引用类型中的基本包装类型也有这三个，有什么区别吗？基本类型中的typeof会是什么值？（高程P119

额外的参考链接：【ES6学习笔记之】Object.assign()