关于引用类型值的详解,请看另一篇随笔 https://www.cnblogs.com/jinbang/p/10346584.html

深拷贝和浅拷贝,也就是引用数据类型栈和堆的知识点。深浅拷贝的原型都是Object,深拷贝指向的堆内存不一样,浅拷贝指向的堆内存一样):
如何区分深拷贝与浅拷贝,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B没有发生变化,说明是深拷贝。如果B也跟着发生了变化,说明是浅拷贝。
      let obj = { name: "jin", arr: ["red","blue","black"]};
let obj1 = {};
Object.defineProperties(obj1, Object.getOwnPropertyDescriptors(obj)); // 深拷贝
Object.assign(obj1, obj); // 深拷贝
obj1 = JSON.parse(JSON.stringify(obj)); // 深拷贝
obj1 = deepCopy(obj); // 使用到深拷贝函数
obj1 = obj; // 浅拷贝
obj1 = Object.assign(obj); // 浅拷贝

下面是deepCopy()深拷贝函数,其中使用到了判断变量的类型函数

      // 判断变量的类型
function getType(obj){
let str = Object.prototype.toString.call(obj); // 检测基本类型值,引用类型值的类型
let map = {
'[object Boolean]': 'boolean',
'[object Number]': 'number',
'[object String]': 'string',
'[object Function]': 'function',
'[object Array]': 'array',
'[object Date]': 'date',
'[object RegExp]': 'regExp',
'[object Undefined]': 'unfefined',
'[object Null]': 'null',
'[object Object]': 'object'
};
if(obj instanceof Element){
return 'element';
}
return map[str];
} // 深拷贝函数
function deepCopy(p){
let obj;
let str = getType(p);
if(str === 'array'){
obj = [];
for(let i=0;i<p.length;i++){
// obj.push(p[i]); // 不能这样写,因为会把array的堆内存也会复制过去
obj.push(arguments.callee(p[i])); //回调自己
}
}else if(str === 'object'){
obj = {};
for(let i in p){
// obj[i] = p[i]; // 不能这样写,因为会把object的堆内存也会复制过去
obj[i] = arguments.callee(p[i]); //回调自己
}
} else {
return p;
}
return obj;
}

需要特别注意的是,使用JSON.parse(JSON.stringify(x))不是一个很好的选择,也算是它们的坑吧:

对象是由构造函数生成的:会丢弃对象的constructor,因为JSON.stringify()只能序列化对象的可枚举的自有属性
时间对象:变成字符串
RegExp,Error对象:变成空对象
函数,undefined:会被丢失
NaN,Infinity和-Infinity:变成null
function Person(name){
this.name = name;
}
var person = new Person('liai'); var test = {
name: 'jin',
person: person, //对象是由构造函数生成的:会丢弃对象的constructor
date: new Date(), //序列化后返回是字符串,不是时间对象
regexp: new RegExp('\\w+'), //序列化后返回空对象:{}
err: new Error(), //序列化后返回空对象:{}
fun: function(){}, //序列化后会丢失
undef: undefined, //序列化后会丢失
nun: NaN, //序列化后返回null
};
console.log(test);
console.log(JSON.parse(JSON.stringify(test)));

javascript实现引用数据类型的深拷贝和浅拷贝详解的更多相关文章

  1. 【转】 c++拷贝构造函数(深拷贝,浅拷贝)详解

     c++拷贝构造函数(深拷贝,浅拷贝)详解 2013-11-05 20:30:29 分类: C/C++ 原文地址:http://blog.chinaunix.net/uid-28977986-id-3 ...

  2. 【C++】拷贝构造函数(深拷贝,浅拷贝)详解

    一.什么是拷贝构造函数  首先对于普通类型的对象来说,它们之间的复制是很简单的,例如: ; int b = a; 而类对象与普通对象不同,类对象内部结构一般较为复杂,存在各种成员变量. 下面看一个类对 ...

  3. **Python中的深拷贝和浅拷贝详解

    Python中的深拷贝和浅拷贝详解   这篇文章主要介绍了Python中的深拷贝和浅拷贝详解,本文讲解了变量-对象-引用.可变对象-不可变对象.拷贝等内容.   要说清楚Python中的深浅拷贝,需要 ...

  4. c++拷贝构造函数(深拷贝,浅拷贝)详解

    一.什么是拷贝构造函数      首先对于普通类型的对象来说,它们之间的复制是很简单的,例如: ; int b=a;   而类对象与普通对象不同,类对象内部结构一般较为复杂,存在各种成员变量.  下面 ...

  5. OC细节 - 1.深拷贝与浅拷贝详解

    概述 拷贝:复制一个与源对象内容相同的对象 实现拷贝,需要遵守以下两个协议 NSCopying NSMutableCopying 拷贝返回对象的种类 可变,mutableCopy消息返回的对象 不可变 ...

  6. python的拷贝方式以及深拷贝,浅拷贝详解

    python的拷贝方法有:切片方法, 工厂方法, 深拷贝方法, 浅拷贝方法等. 几种方法都可以实现拷贝操作, 具体区别在于两点:1.代码写法不同. 2.内存地址引用不同 代码演示: import co ...

  7. C++ 深拷贝和浅拷贝详解

    前言 在对象拷贝过程中,如果没有自定义拷贝构造函数,系统会提供一个缺省的拷贝构造函数,缺省的拷贝构造函数对于基本类型的成员变量,按字节复制,对于类类型成员变量,调用其相应类型的拷贝构造函数. 位拷贝( ...

  8. GoLang基础数据类型--->字典(map)详解

    GoLang基础数据类型--->字典(map)详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.   可能大家刚刚接触Golang的小伙伴都会跟我一样,这个map是干嘛的,是 ...

  9. GoLang基础数据类型-切片(slice)详解

    GoLang基础数据类型-切片(slice)详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 数组的长度在定义之后无法再次修改:数组是值类型,每次传递都将产生一份副本.显然这种数 ...

随机推荐

  1. NYOJ-768移位密码,最简单的代替密码;

    移位密码 时间限制:1000 ms  |  内存限制:65535 KB 难度:0 ->   Link   <- 还有1个半小时考信息安全导论,昨晚心血来潮在oj上看到这几个题,简直就是水啊 ...

  2. spark streaming 踩过的那些坑

      系统背景 spark streaming + Kafka高级API receiver 目前资源分配(现在系统比较稳定的资源分配),独立集群 --driver-memory 50G   --exec ...

  3. CodeForces - 425E Sereja and Sets 题解

    题目大意: 我们有一个集合 S,其中包含了 m 个不完全相同的区间[l1,r1],[l2,r2]…[lm,rm] (1≤li≤ri≤n,li,ri 都为整数). 定义 f(S)=k,表示集合 S 中能 ...

  4. jquery如何通过ajax请求获取后台数据显示在表格上

    1.引入bootstrap和jquery的cdn <link rel="stylesheet" type="text/css" href="ht ...

  5. JS中的双等和全等号比较机制

    JavaScript中的"==" 和 "===" 的用法: "=="判断相等的隐式转换机制 1. 判断是否有NaN(not a Number ...

  6. Java函数式接口Function

    Function 提供了一个抽象方法  R apply(T t) 接收一个参数 返回 一个值,还有两个默认方法和一个静态方法 compose 是一个嵌套方法,先执行before.apply() 得到运 ...

  7. 洛谷 P1457 城堡 The Castle

    P1457 城堡 The Castle 题目描述 我们憨厚的USACO主人公农夫约翰(Farmer John)以无法想象的运气,在他生日那天收到了一份特别的礼物:一张“幸运爱尔兰”(一种彩票).结果这 ...

  8. Jsp标签字典开发_基于Spring+Hibernate

    目录 1. Jsp标签字典开发_基于Spring+Hibernate 1.1. 简述 1.2. 定义DictItem实体 1.3. 定义字典的@interface 1.4. 定义字典缓存类 1.5. ...

  9. Storm计算结果是怎样存放的

    Storm计算的结果存放在哪里? 刚開始接触Storm的时候.往往都会有这么一个疑问:"Storm处理后 的计算结果是保存在哪里呢?"是内存中还是在其他的地方? 官方给出的解释是: ...

  10. SSLStrip 终极版 —— location 瞒天过海

    之前介绍了 HTTPS 前端劫持 的方案,尽管非常有趣.然而现实却并不理想. 其唯一.也是最大的缺陷.就是无法阻止脚本跳转.若是没有这个缺陷,那就非常完美了 -- 当然也就没有必要写这篇文章了. 说究 ...