本文思维导图

前言

　　最近在读 zepto 的源码，深有感触，感觉随便一段代码都可以延伸出一大堆的知识点，在看到深拷贝和浅拷贝的时候，之前只是了解过什么是深拷贝什么是浅拷贝，并没有对齐实现进行探索，所以本文主要讲一下什么是深拷贝、什么是浅拷贝、深拷贝与浅拷贝的区别，以及怎么进行深拷贝和怎么进行浅拷贝。

堆和栈的区别

　　其实深拷贝和浅拷贝的主要区别就是其在内存中的存储类型不同。堆和栈都是内存中划分出来用来存储的区域。

　　栈（stack）为自动分配的内存空间，它由系统自动释放；而堆（heap）则是动态分配的内存，大小不定也不会自动释放。

ECMAScript 的数据类型

　　在将深拷贝和浅拷贝之前，我们先来重新回顾一下 ECMAScript 中的数据类型。主要分为基本数据类型与引用数据类型

　　基本数据类型: String、Number、Boolean、Null、Undefined、Symbel (ES6)

　　基本数据类型存放在栈中：存放在栈内存中的简单数据段，数据大小确定，内存空间大小可以分配，是直接按值存放的，所以可以直接访问。

　　基本数据类型值不可变：javascript中的原始值（undefined、null、布尔值、数字和字符串）与对象（包括数组和函数）有着根本区别。原始值是不可更改的：任何方法都无法更改（或“突变”）一个原始值。对数字和布尔值来说显然如此 —— 改变数字的值本身就说不通，而对字符串来说就不那么明显了，因为字符串看起来像由字符组成的数组，我们期望可以通过指定索引来假改字符串中的字符。实际上，javascript 是禁止这样做的。字符串中所有的方法看上去返回了一个修改后的字符串，实际上返回的是一个新的字符串值。

　　基本数据类型的值是不可变的，动态修改了基本数据类型的值，它的原始值也是不会改变的，例如：

    var str = "abc";

    console.log(str[1]="f");    // f

    console.log(str);           // abc

　　引用数据类型：Object（在JS中除了基本数据类型以外的都是对象，纯对象是对象，数组是对象，函数是对象，正则表达式是对象）；是存放在堆内存中的，变量实际上是一个存放在栈内存的指针，这个指针指向堆内存中的地址。每个空间大小不一样，要根据情况开进行特定的分配，例如。

ar person1 = {name:‘jozo‘};
var person2 = {name:‘xiaom‘};
var person3 = {name:‘xiaoq‘};

引用类型值可变：引用类型是可以直接改变其值的，例如

    var a = [1,2,3];
    a[1] = 5;
    console.log(a[1]); // 5

　　引用类型的比较是引用的比较：所以每次我们对 js 中的引用类型进行操作的时候，都是操作其对象的引用（保存在栈内存中的指针），所以比较两个引用类型，是看其的引用是否指向同一个对象。例如：

var a = [1,2,3];
var b = [1,2,3];
console.log(a === b); // false

　　虽然变量 a 和变量 b 都是表示一个内容为 1，2，3 的数组，但是其在内存中的位置不一样，也就是说变量 a 和变量 b 指向的不是同一个对象，所以他们是不相等的。

　　传值与传址： 了解了基本数据类型与引用类型的区别之后，我们就应该能明白传值与传址的区别了。
在我们进行赋值操作的时候，基本数据类型的赋值（=）是在内存中新开辟一段栈内存，然后再把再将值赋值到新的栈中。例如：

var a = 10;
var b = a;

a ++ ;
console.log(a); // 11
console.log(b); // 10

　所以说，基本类型的赋值的两个变量是两个独立相互不影响的变量。

　　但是引用类型的赋值是传址。只是改变指针的指向，例如，也就是说引用类型的赋值是对象保存在栈中的地址的赋值，这样的话两个变量就指向同一个对象，因此两者之间操作互相有影响。例如：

var a = {}; // a保存了一个空对象的实例
var b = a;  // a和b都指向了这个空对象

a.name = ‘jozo‘;
console.log(a.name); // ‘jozo‘
console.log(b.name); // ‘jozo‘

b.age = 22;
console.log(b.age);// 22
console.log(a.age);// 22

console.log(a == b);// true

浅拷贝

　　在深入了解之前，我认为上面的赋值就是浅拷贝，哇哈哈，真的是图样图森破。上面那个应该只能算是“引用”，并不算是真正的浅拷贝。

赋值（=）和浅拷贝的区别

　　那么赋值和浅拷贝有什么区别呢，我们看下面这个例子：

    var obj1 = {
        ‘name‘ : ‘zhangsan‘,
        ‘age‘ :  ‘18‘,
        ‘language‘ : [1,[2,3],[4,5]],
    };

    var obj2 = obj1;


    var obj3 = shallowCopy(obj1);
    function shallowCopy(src) {
        var dst = {};
        for (var prop in src) {
            if (src.hasOwnProperty(prop)) {
                dst[prop] = src[prop];
            }
        }
        return dst;
    }

    obj2.name = "lisi";
    obj3.age = "20";

    obj2.language[1] = ["二","三"];
    obj3.language[2] = ["四","五"];

    console.log(obj1);  
    //obj1 = {
    //    ‘name‘ : ‘lisi‘,
    //    ‘age‘ :  ‘18‘,
    //    ‘language‘ : [1,[4,5]],
    //};

    console.log(obj2);
    //obj2 = {
    //    ‘name‘ : ‘lisi‘,
    //    ‘age‘ :  ‘18‘,
    //    ‘language‘ : [1,[4,5]],
    //};

    console.log(obj3);
    //obj3 = {
    //    ‘name‘ : ‘zhangsan‘,
    //    ‘age‘ :  ‘20‘,
    //    ‘language‘ : [1,[4,5]],
    //};

　　先定义个一个原始的对象 obj1，然后使用赋值得到第二个对象 obj2，然后通过浅拷贝，将 obj1里面的属性都赋值到 obj3 中。也就是说

• obj1：原始数据
• obj2：赋值操作得到
• obj3：浅拷贝得到

    // 内部方法：用户合并一个或多个对象到第一个对象
    // 参数：
    // target 目标对象  对象都合并到target里
    // source 合并对象
    // deep 是否执行深度合并
    function extend(target, source, deep) {
        for (key in source)
            if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
                // source[key] 是对象，而 target[key] 不是对象， 则 target[key] = {} 初始化一下，否则递归会出错的
                if (isPlainObject(source[key]) && !isPlainObject(target[key]))
                    target[key] = {}

                // source[key] 是数组，而 target[key] 不是数组，则 target[key] = [] 初始化一下，否则递归会出错的
                if (isArray(source[key]) && !isArray(target[key]))
                    target[key] = []
                // 执行递归
                extend(target[key], source[key], deep)
            }
            // 不满足以上条件，说明 source[key] 是一般的值类型，直接赋值给 target 就是了
            else if (source[key] !== undefined) target[key] = source[key]
    }

    // Copy all but undefined properties from one or more
    // objects to the `target` object.
    $.extend = function(target){
        var deep, args = slice.call(arguments, 1);

        //第一个参数为boolean值时，表示是否深度合并
        if (typeof target == ‘boolean‘) {
            deep = target;
            //target取第二个参数
            target = args.shift()
        }
        // 遍历后面的参数，都合并到target上
        args.forEach(function(arg){ extend(target, arg, deep) })
        return target
    }

深拷贝 vs 浅拷贝

原文：https://www.cnblogs.com/aidixie/p/12817518.html