文档章节

js浅拷贝、深拷贝

wlc534
 wlc534
发布于 2017/09/12 09:50
字数 462
阅读 1
收藏 0
点赞 0
评论 0

1.浅拷贝
拷贝就是把父对像的属性,全部拷贝给子对象。
下面这个函数,就是在做拷贝:
var Chinese = {  nation:'中国'}
var Doctor = {  career:'医生'}  
function extendCopy(p) {    
var c = {};    
for (var i in p) {       
  c= p;    
}    
c.uber = p;    
return c; 
}
使用的时候,这样写:
var Doctor = extendCopy(Chinese);  
Doctor.career = '医生';  
alert(Doctor.nation); // 中国
但是,这样的拷贝有一个问题。那就是,如果父对象的属性等于数组或另一个对象,那么实际上,子对象获得的只是一个内存地址,而不是真正拷贝,因此存在父对象被篡改的可能。
请看,现在给Chinese添加一个"出生地"属性,它的值是一个数组。
Chinese.birthPlaces = ['北京','上海','香港'];
通过extendCopy()函数,Doctor继承了Chinese。
var Doctor = extendCopy(Chinese);
然后,我们为Doctor的"出生地"添加一个城市:
Doctor.birthPlaces.push('厦门');
看一下输入结果
alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门  
alert(Chinese.birthPlaces); //北京, 上海, 香港, 厦门

结果是两个的出生地都被改了。
所以,extendCopy() 只是拷贝了基本类型的数据,我们把这种拷贝叫做“浅拷贝”。
2.深拷贝
因为浅深拷有如此弊端所以我们接下来看一下深拷贝
所谓"深拷贝",就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难,只要递归调用"浅拷贝"就行了。
function deepCopy(p, c) {
    var c = c || {};
    for (var i in p) {
      if (typeof p === 'object') {
        c= (p.constructor === Array) ? [] : {};
        deepCopy(p, c);      
   } else {
     c= p;
   }
  }
  return c;  
}
看一下使用方法:
var Doctor = deepCopy(Chinese);
现在,给父对象加一个属性,值为数组。然后,在子对象上修改这个属性:
Chinese.birthPlaces = ['北京','上海','香港'];
Doctor.birthPlaces.push('厦门');
alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
alert(Chinese.birthPlaces); //北京, 上海, 香港
这样就完成了拷贝;

© 著作权归作者所有

共有 人打赏支持
wlc534
粉丝 4
博文 31
码字总数 33237
作品 0
WEB前端学习JavaScript知识点:说清楚深拷贝和浅拷贝的区别

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/28 ⋅ 0

低门槛彻底理解JavaScript中的深拷贝和浅拷贝

在说深拷贝与浅拷贝前,我们先看两个简单的案例: 按照常规思维,应该和一样,不会因为另外一个值的改变而改变,而这里的 却随着的改变而改变了。同样是变量,为什么表现不一样呢?这就要引入...

lunaqi ⋅ 05/11 ⋅ 0

Javascript对象的深浅拷贝

开门见山,有人叫对象的复制为深复制浅复制,也有人叫深拷贝浅拷贝。 其实都是copy。 深拷贝(递归复制,复制所有层级,独立副本,一个完全和原来对象属性无关的副本) 返回对象:一个。 传入对...

趁你还年轻233 ⋅ 04/11 ⋅ 0

从JS对象开始,谈一谈“不可变数据”和函数式编程

文章转载自:https://segmentfault.com/a/1190000008780076 作为前端开发者,你会感受到JS中对象(Object)这个概念的强大。我们说“JS中一切皆对象”。最核心的特性,例如从String,到数组,再...

朱先忠老师 ⋅ 05/20 ⋅ 0

JS中的深拷贝与浅拷贝了解一下

在使用Vue做项目的时候,通常会有许多组件间传递对象的情况。如果只是简单的赋值的话(浅拷贝),是很危险的,因为你不知道什么情况下这个值就被修改了,还一脸蒙蔽,所以我们需要进行深拷贝...

tinaawang ⋅ 05/28 ⋅ 0

JavaScript带你彻底搞清楚深拷贝、浅拷贝和循环引用

JavaScript带你彻底搞清楚深拷贝、浅拷贝和循环引用 一、为什么有深拷贝和浅拷贝? 指的是那些保存在栈内存中的简单数据段,即这种值是完全保存在内存中的一个位置。包含,,,, ,。 指的是...

推荐码发放 ⋅ 05/27 ⋅ 0

JavaScript深拷贝与浅拷贝

1.先看一个例子: 从中可以看出,obj1拷贝了obj的值,但只是进行了地址的引用,修改obj1的值也影响到了obj的值,没有创建新对象。 浅拷贝:对基本数据类型进行值传递,对引用数据类型进行引用...

好好学习en ⋅ 04/16 ⋅ 0

js基本数据类型不妨回头再看看

JS的基本数据类型有哪些呢? js基本数据类型: es5中的基本数据类型有:Undefined、Null、Boolean、Number、String、Object。 es6中新加一个数据类型 symbol 检测当前变量的数据类型方法 ty...

不空大的Timo ⋅ 05/26 ⋅ 0

2018-01-06 关于javascript的深拷贝浅拷贝 思考

目录: 什么是复制? 一个简单的浅复制 一个深复制的例子 普遍的深浅复制的几种实现方法 深拷贝,浅拷贝 什么是复制? 下面是一个简单的浅复制 var shallowObj = shallowCopy(obj); function ...

_panda ⋅ 01/06 ⋅ 0

JavaScript基础心法——深浅拷贝

原文地址:JavaScript基础心法——深浅拷贝 欢迎star。 如果有错误的地方欢迎指正。 浅拷贝和深拷贝都是对于JS中的引用类型而言的,浅拷贝就只是复制对象的引用,如果拷贝后的对象发生变化,...

axuebin ⋅ 2017/11/01 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 55分钟前 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node,就不免得提到JavaScript。JavaScript自诞生以来,经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力,JavaScript不断被类聚和抽象,...

小草先森 ⋅ 昨天 ⋅ 0

Java桌球小游戏

其实算不上一个游戏,就是两张图片,不停的重画,改变ball图片的位置。一个左右直线碰撞的,一个有角度碰撞的。 左右直线碰撞 package com.bjsxt.test;import javax.swing.*;import j...

森林之下 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部