很多开发语言中都有浅拷贝和深拷贝的说法,这里简单区分一下它们在Javascript中的区别,以及jQuery中深拷贝的实现。

在谈浅拷贝和深拷贝之前,先要屡清楚Javascript中的按值访问和按引用访问这两个概念。

按值访问是针对基本类型(string、number、boolean、null、undefined)。基本类型以值的形式被存放在栈内存中,我们通过变量操作的是栈内存中实际的值。

按引用访问时针对引用类型(Object、Array、Date、RegExp、Function)。引用类型以对象的形式被存放在堆内存中,我们通过变量操作的堆内存中对象的引用,也就是说,变量中保存的是一个指针,指向内存中的某个位置。

--------------------------分割线--------------------------

浅拷贝与深拷贝的区别是针对引用类型而言的,浅拷贝只是拷贝了对象表面上的一层,而深拷贝是拷贝了对象的所有层级。

那这两种方式,区别在哪里呢?

举个例子:

var arr = ['a', 'b'];
var newArr = arr;  // newArr拷贝了arr

console.log(newArr);  // ['a', 'b']

arr.push('c');

console.log(newArr);  //['a', 'b', 'c']

以上代码是一个简单的浅拷贝。

由于arr是一个数组,数组内部保存了两个string类型的值。newArr通过直接赋值得到该数组的引用,此时newArr和arr所指向的是内存中的同一个位置,所以arr的操作反应到内存中数组的改变,也就导致了newArr的改变。

下面来看看深拷贝:

var arr = ['a', 'b'];
var newArr = [];

newArr[0] = arr[0];
newArr[1] = arr[1];

console.log(newArr);  // ['a', 'b']

arr.push('c');

console.log(newArr);  //['a', 'b']

以上代码是一个简单的深拷贝。

我们发现此时,arr的改变并没有影响到newArr,原因就在于,这次我们是先定义了一个空数组newArr(在内存中开辟了新的位置),此时newArr与arr所指向的是内存中不同的位置,然后我们对数组中的string类型的值进行赋值操作,得到了最后的newArr。

那么,我们现实中遇到的拷贝问题不会是这简单的数组,可能会像这样:

var person1 = {
    name: 'Mike',
    age: 5,
    friends: [ 'Jack', 'Candy' ]
};

对于这个例子,如果我们想实现深拷贝,就需要遍历person1的所有属性。由于name、age是基本类型,所以直接赋值没有问题,但是friends是数组,也就是引用类型,那么我们也需要遍历friends,万一friends数组的某个元素是引用类型,那么继续,以此类推......

所以,实现深拷贝并不是那么容易的,下面我们来看看jQuery中是如何处理的。

// 这是一个用来扩展jQuery的方法,jQuery.extend([boolean], arg1, arg2, ...)
// 第一个参数可选,表示进行浅拷贝或深拷贝,默认false
// 第二个参数是拷贝后的存放目标(后面简称拷贝目标)
// 第三个及以后的参数都是拷贝对象(后面简称拷贝对象)

jQuery.extend = jQuery.fn.extend = function () {
        var options, name, src, copy, copyIsArray, clone,
            target = arguments[0] || {},
            i = 1,
            length = arguments.length,
            deep = false;

        if (typeof target === "boolean") {
            deep = target;

            target = arguments[i] || {};
            i++;
        }

        if (typeof target !== "object" && !jQuery.isFunction(target)) {
            target = {};
        }

        if (i === length) {
            target = this;
            i--;
        }

        // 以下开始重点
        // 遍历arg2, arg3, ...

        for (; i < length; i++) {

            // 如果拷贝对象不是null,并存放到变量options中
            if ((options = arguments[i]) != null) {

                // 遍历拷贝对象的属性
                for (name in options) {
                    src = target[name]; // 拷贝目标中的相应属性值
                    copy = options[name]; // 拷贝对象中的相应属性值

                    // 防止循环引用
                    if (target === copy) {
                        continue;
                    }

                    // 如果deep(布尔参数)为true,也就是要进行深拷贝,并且拷贝对象中该属性值是数组或者对象
                    if (deep && copy && (jQuery.isPlainObject(copy) ||
                        (copyIsArray = Array.isArray(copy)))) {

                        if (copyIsArray) { // 如果该属性值是数组
                            copyIsArray = false;
                            clone = src && Array.isArray(src) ? src : []; // 拷贝目标中该属性值

                        } else { // 如果该属性值是对象
                            clone = src && jQuery.isPlainObject(src) ? src : {};
                        }

                        // 以该属性值作为拷贝对象,递归调用jQuery.extend()
                        target[name] = jQuery.extend(deep, clone, copy);

                    // 否则浅拷贝
                    } else if (copy !== undefined) {
                        target[name] = copy; // 直接赋值
                    }
                }
            }
        }

        // 返回最终的拷贝目标
        return target;
    };

欢迎补充和指正

Javascript中的浅拷贝和深拷贝的更多相关文章

  1. javascript中的浅拷贝和深拷贝(拷贝引用和拷贝实例)

    作者:千锋教育链接:https://www.zhihu.com/question/23031215/answer/326129003来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  2. javascript中的浅拷贝和深拷贝 分类: JavaScript 2015-05-07 15:29 831人阅读 评论(1) 收藏

    1.js对象浅拷贝 简单的赋值就是浅拷贝.因为对象和数组在赋值的时候都是引用传递.赋值的时候只是传递一个指针. 看下面的实例代码: var a = [1,2,3]; var b =a ; var te ...

  3. 【转】JAVA中的浅拷贝和深拷贝

    原文网址:http://blog.bd17kaka.net/blog/2013/06/25/java-deep-copy/ JAVA中的浅拷贝和深拷贝(shallow copy and deep co ...

  4. javascript中的堆栈、深拷贝和浅拷贝、闭包

    堆栈 在javascript中,堆内存是用来存放引用类型的空间环境 而栈内存,是存储基本类型和指定代码的环境 在对象中的属性名具有唯一性,数字属性名=字符串属性名,但是在测试的时候你会发现,好像所有属 ...

  5. javascript中的浅拷贝ShallowCopy与深拷贝DeepCopy

    拷贝,在js中,分为浅拷贝和深拷贝.这两者是如何区分的呢?又是如何实现的呢? 深浅拷贝的区分 首先说下,在js中,分为基础数据类型和复杂数据类型, 基础数据类型:Undefined.Null.Bool ...

  6. js中的浅拷贝和深拷贝

    说说最近所学:浅拷贝和深拷贝也叫做浅克隆和深克隆,深浅主要针对的是对象的"深度",常见的对象都是"浅"的,也就是对象里的属性就是单个的属性,而"深&q ...

  7. 浅谈JS中的浅拷贝与深拷贝

    前端工程师应该都比较熟悉浅拷贝和深拷贝的概念,在日常业务代码的过程中,特别是做数据处理的时候,经常行的会遇到,比如如何在不修改原对象的基础上,重新生成一个一模一样的对象,加以利用,又或是,如何巧妙地运 ...

  8. C# 中的浅拷贝与深拷贝

    Ø  简介 在 C# 中分为两种数据类型,值类型和引用类型.我们知道,值类型之间赋值是直接将值赋值给另一个变量,两个变量值的改变都互不影响:而引用类型赋值则是将引用赋值给另一个变量,其中一个变量中的成 ...

  9. Javascript/js 的浅拷贝与深拷贝(复制)学习随笔

    js变量的数据类型值分基本类型值和引用类型值. 在ES6(ECMAScript6)以前,基本数据类型包括String.Number.Boolean.Undefined.Null. 基本类型值的复制(拷 ...

随机推荐

  1. [权限相关]在PeopleSoft中查找可以使用DataMover的用户

    DataMover是一个功能非常强大的工具,它的访问权限应该被控制,特别是在PRD环境中.在每个公司,许多用户可能在一段时间内切换部门,角色和职责,所以每隔一段时间就应该检查这些用户的权限,以确认他们 ...

  2. maven引入已经拥有的jar包

    <!-- https://mvnrepository.com/artifact/jfree/jcommon --><dependency>    <groupId> ...

  3. PPK提供的浏览器类型及版本检测方法

    PPK提供的浏览器类型及版本检测方法   一个常用但是被高估的Javascript函数就是浏览器检测.有些时候,你想给出一个说明或者加载一个页面来提示用户,以免使用Safari等浏览器. 使用方法: ...

  4. 在同一个sql语句中,统计不同条件的Count数量

    前几天帮同事优化了个SQL,原写法使用多个子查询这里不再重现了,大家都遇到过这样一种情况,在项目后期的维护中, 修改别人的SQL代码,超过30行的语句,多层子查询,读起来很坑,时间久的项目伴随着人员的 ...

  5. 关于MySQL latch争用深入分析与判断

    1.latch锁是什么锁? 2.latch锁是如何保护list? 3.latch争用的现象和过程? 4.latch什么时候会产生严重的争用? 5.如何监控latch争用情况? 6.如何确认latch争 ...

  6. swift 导出测试包(Save for Ad Hoc Deployment)卡在compile bitcode处问题

    如图取消Rebuild from bitcode选中速度会快很多

  7. NYOJ--244--16进制的简单运算(C++控制输入输出)

    16进制的简单运算 时间限制:1000 ms  |  内存限制:65535 KB 难度:1   描述 现在给你一个16进制的加减法的表达式,要求用8进制输出表达式的结果.   输入 第一行输入一个正整 ...

  8. java常见排序方法

    1.java常用排序方法 1) 选择排序         原理:a. 将数组中的每个元素,与第一个元素比较          如果这个元素小于第一个元素, 就将这个         两个元素交换.   ...

  9. 使用 Node.js 搭建一个 API 网关

    原文地址:Building an API Gateway using Node.js 外部客户端访问微服务架构中的服务时,服务端会对认证和传输有一些常见的要求.API 网关提供共享层来处理服务协议之间 ...

  10. 使用ExpressionVisitor进行lambadaExpression的动态拼接

    现有如下实体 public class User { public int Id { get; set; } public string Name { get; set; } } 根据这个实体创建一个 ...