/* 浅拷贝 */
function extend(parent, child) {
var i;
child = child || {};
for (i in parent) {
if (parent.hasOwnProperty(i)) {
child[i] = parent[i];
}
}
return child;
} var dad = { name: "Adam" };
var kid = extend(dad);
console.log(kid.name); // "Adam" var dad = {
counts: [1, 2, 3],
reads: { paper: true }
};
var kid = extend(dad);
kid.counts.push(4);
console.log(dad.counts.toString()); // "1,2,3,4"
console.log(dad.reads === kid.reads); // true

存在问题:你可以发现dad和kid的reads是一样的,也就是他们使用的是同一个引用,这也就是浅拷贝带来的问题。

/* 深拷贝 */
function extendDeep(parent, child) {
var i,
toStr = Object.prototype.toString,
astr = "[object Array]"; child = child || {}; for (i in parent) {
if (parent.hasOwnProperty(i)) {
if (typeof parent[i] === 'object') {
child[i] = (toStr.call(parent[i]) === astr) ? [] : {};
extendDeep(parent[i], child[i]);
} else {
child[i] = parent[i];
}
}
}
return child;
} var dad = {
counts: [1, 2, 3],
reads: { paper: true }
};
var kid = extendDeep(dad); kid.counts.push(4);
console.log(kid.counts.toString()); // "1,2,3,4"
console.log(dad.counts.toString()); // "1,2,3" console.log(dad.reads === kid.reads); // false
kid.reads.paper = false;

深拷贝以后,两个值就不相等了,bingo!

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

  1. JS面试题-<变量和类型>-JavaScript浅拷贝与深拷贝

    前言 最开始了解到深浅拷贝是因为准备面试,但那个时候因为在学校做的项目比较少需求也比较简单,所以没有在项目中遇到这类问题,所以对这个问题就属于知道这个知识点,看过相关内容,却没有自己的总结,也没有深入 ...

  2. Javascript 浅拷贝与深拷贝

    在了解JS的浅拷贝与深拷贝之前,我们需要先知道什么是值传递与引用传递. 在JS中,基本类型值的拷贝是按值传递的,而引用类型值的拷贝则是按引用传递的.通过值传递的变量间不会有任何牵连,互相独立:但是引用 ...

  3. 浅谈Javascript 浅拷贝和深拷贝的理解

    javascript中存储对象都是存地址的. 浅拷贝:浅拷贝是都指向同一块内存区块,浅拷贝共用同一内存地址,你改值我也变.如果拷贝的对象里面的值是一个对象或者数组,它就是浅拷贝,拷贝的知识引用地址.  ...

  4. 关于JavaScript的浅拷贝和深拷贝

    在 JS 中有一些基本类型像是Number.String.Boolean,而对象就是像这样的东西{ name: 'Larry', skill: 'Node.js' },对象跟基本类型最大的不同就在于他 ...

  5. Javascript中的浅拷贝和深拷贝

    很多开发语言中都有浅拷贝和深拷贝的说法,这里简单区分一下它们在Javascript中的区别,以及jQuery中深拷贝的实现. 在谈浅拷贝和深拷贝之前,先要屡清楚Javascript中的按值访问和按引用 ...

  6. javascript篇-浅拷贝与深拷贝

    理解javascript 的浅拷贝与深拷贝,首先看一下js的数据类型: js有5种基本数据类型:undefined,null,boolean,number,string 还有一种复杂的数据类型(也叫引 ...

  7. javascript浅拷贝深拷贝理解记录

    javascript的深拷贝和浅拷贝问题几乎是面试必问的问题.好记性不如烂笔头,特此来记录一下自己对深拷贝浅拷贝的理解. 顾名思义,拷贝就是copy复制,在js中可以浅而理解为对一个对象或者数组的复制 ...

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

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

  9. JavaScript 数据结构与算法之美 - 栈内存与堆内存 、浅拷贝与深拷贝

    前言 想写好前端,先练好内功. 栈内存与堆内存 .浅拷贝与深拷贝,可以说是前端程序员的内功,要知其然,知其所以然. 笔者写的 JavaScript 数据结构与算法之美 系列用的语言是 JavaScri ...

随机推荐

  1. 【剑指Offer】俯视50题之1-10题

    面试题1赋值运算符函数  面试题2 实现Singleton模式  面试题3 二维数组中的查找   面试题4 替换空格   面试题5 从头到尾打印链表   面试题6 重建二叉树   面试题7 用两个栈实 ...

  2. 优雅的使用Laravel之phpstorm配置

    优雅的使用Laravel之phpstorm配置 先打开一个Laravel 项目,然后在project tool 窗口选择根节点.然后右键->Composer | Init composer . ...

  3. mydumper原理介绍

      mydumper的安装:http://www.cnblogs.com/lizhi221/p/7010174.html   mydumper介绍   MySQL自身的mysqldump工具支持单线程 ...

  4. 转载Liferay PortletPreference store()方法研究

    我们对于PortletPreference 的store()用的非常广泛,很多情况下,我们一般对其进行一些设定,然后最后调用store()存储之,类似以下代码: PortletPreferences ...

  5. 32Sql数据库的插入

    上一节讲了数据库的连接,本例直接将数据库的插入操作,重点还是QSqlQuery类 QSqlQuery query; //新建二维表 query.exec("CREATE TABLE stud ...

  6. “4K云字库”基本框架图

    "4K云字库"基本框架图   谷歌的web-font,令"云字库"成为IT热点.   云字库,只是云计算的一个细小分支 ,而云计算的基础,是"大数据& ...

  7. laravel 中间件排除

    public function __construct(){ //除了主页之外 $this->middleware('auth', ['except' => ['index','show' ...

  8. Mac下将C程序创建为动态链接库再由另一个C程序调用

    写C的时候需要调用之前的一个C程序,想用动态链接库的方式.Mac下的动态链接库是dylib,与Linux下的.os或Windows下的.dll不同.由于之前没有接触过,所以翻了大量的博客,然而在编译过 ...

  9. ifconfig源码分析之与内核交互数据

    <ifconfig源码分析之与内核交互数据>本文档的Copyleft归rosetta所有,使用GPL发布,可以自由拷贝.转载,转载时请保持文档的完整性.参考资料:<Linux设备驱动 ...

  10. ubuntu16.04更新源的时候显示:由于没有公钥,无法验证下列签名: NO_PUBKEY 3D5919B448457EE0【学习笔记】

    平台:ubuntu16.04 作者:庄泽彬(欢迎转载,请注明作者) 在添加了bazel的源之后执行sudo apt-get update出现下面的错误 echo "deb [arch=amd ...