/* 浅拷贝 */
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. redhat 6.6 离线安装docker

    本机环境:redhat6.6 uname -a Linux host- -.el6.x86_64 # SMP Tue Sep :: EDT x86_64 x86_64 x86_64 GNU/Linux ...

  2. 【python】BeautifulSoup的应用

    from bs4 import BeautifulSoup#下面的一段HTML代码将作为例子被多次用到.这是 爱丽丝梦游仙境的 的一段内容(以后内容中简称为 爱丽丝 的文档): html_doc = ...

  3. stm8s 时钟库函数选择内部RC初始化

    //本文选择16M内部RC震荡.分频为1 即系统时钟为16M void CLK_HSICmd(FunctionalState NewState) { /* Check the parameters * ...

  4. 001-Spring的设计理念和整体架构

    一.概述 1.1.Spring的各个子项目 网站:https://spring.io/ 基于Spring的项目:https://spring.io/projects 文档列表:https://spri ...

  5. 华硕主板M2N-电源跳线怎么接

    华硕主板M2N 详细参数 http://detail.zol.com.cn/91/90618/param.shtml 电源跳线的连接方法:1.把所有排线理在一起,根据上面的标注,先来明确每根线的定义: ...

  6. [3D]1.绘制三角形

    作为一个.Net程序员学习3D开发好尴尬啊,因为不论是OpenGL还是Direct3D都是用C/C++开发的比较多.虽然有计划使用C++进行开发,但是平时还是C#使用的多.很少用C++做东西,如果仅仅 ...

  7. 29张截图-全新安装CentOS7.5-超详细!

    目录 全新安装CentOS7.5 配置虚拟机 调整网卡名称 配置时区,分区,关闭安全工具 配置网络参数 配置root账户密码 参考链接 全新安装CentOS7.5 可以到这里下载镜像https://m ...

  8. Visual Studio Code常用设置

    Visual Studio Code常用设置 • 自动保存设置 ▶ 文件(F) -> 首选项(P) -> 用户设置(U) ▶ 将"files.autoSave": &q ...

  9. Django之MTV

    一.MTV模型 Django的MTV分别代表: Model(模型):负责业务对象与数据库的对象(ORM) Template(模版):负责如何把页面展示给用户 View(视图):负责业务逻辑,并在适当的 ...

  10. 机器学习实战python3 K近邻(KNN)算法实现

    台大机器技法跟基石都看完了,但是没有编程一直,现在打算结合周志华的<机器学习>,撸一遍机器学习实战, 原书是python2 的,但是本人感觉python3更好用一些,所以打算用python ...