网上发现一个比较好的博客 阮一峰的感觉很不错推荐大家看看。

http://www.ruanyifeng.com/blog/it/javascript/

接下来看一下这两个拷贝方法

1.浅拷贝

拷贝就是把父对像的属性,全部拷贝给子对象。

下面这个函数,就是在做拷贝:

var Chinese = {
  nation:'中国'
}
var Doctor = {
  career:'医生'
}  
function extendCopy(p) {
    var c = {};
    for (var i in p) {
      c[i] = p[i];
    }
    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[i] === 'object') {
        c[i] = (p[i].constructor === Array) ? [] : {};
        deepCopy(p[i], c[i]);
      } else {
         c[i] = p[i];
      }
    }
    return c;
  }

看一下使用方法:

  var Doctor = deepCopy(Chinese);

现在,给父对象加一个属性,值为数组。然后,在子对象上修改这个属性:

Chinese.birthPlaces = ['北京','上海','香港'];
Doctor.birthPlaces.push('厦门'); alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
alert(Chinese.birthPlaces); //北京, 上海, 香港

这样就完成了拷贝;

jquery 中$.extend()如同。

js 对象 浅拷贝 和 深拷贝的更多相关文章

  1. js对象浅拷贝和深拷贝详解

    js对象浅拷贝和深拷贝详解 作者:i10630226 字体:[增加 减小] 类型:转载 时间:2016-09-05我要评论 这篇文章主要为大家详细介绍了JavaScript对象的浅拷贝和深拷贝代码,具 ...

  2. [转] js对象浅拷贝和深拷贝详解

    本文为大家分享了JavaScript对象的浅拷贝和深拷贝代码,供大家参考,具体内容如下 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷贝: var Chinese = ...

  3. js 对象浅拷贝和深拷贝

    var model={name:"boy",age:13}; var CopyModel=model; console.log(CopyModel.name); model.nam ...

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

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

  5. js实现浅拷贝和深拷贝

    实现浅拷贝和深拷贝 1. 浅拷贝和深拷贝的区别 简单点说,浅拷贝拷贝完后,修改拷贝的内容可能会对源内容产生影响.而深拷贝就是拷贝前后的内容相互不影响.       那为什么拷贝前后的内容会相互影响呢? ...

  6. js中浅拷贝和深拷贝以及深拷贝的实现

    前言:2019年的第一篇分享... 一.什么是基本类型值和引用类型值?ECMAScript包括两个不同类型的值:基本数据类型和引用数据类型.基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构 ...

  7. js的浅拷贝和深拷贝和应用场景

    为什么会用到浅拷贝和深拷贝 首先来看一下如下代码 let a = b = 2 a = 3 console.log(a) console.log(b) let c = d = [1,2,3] let e ...

  8. 小tips:JS之浅拷贝与深拷贝

    浅拷贝: function extendCopy(p) { var c = {}; for (var i in p) { c[i] = p[i]; } return c; } 深拷贝: functio ...

  9. JS的浅拷贝与深拷贝

    浅拷贝 //这样的拷贝有一个问题.那就是,如果父对象的属性等于数组或另一个对象,//那么实际上,子对象获得的只是一个内存地址,而不是真正拷贝,因此存在父对象被篡改的可能. function exten ...

随机推荐

  1. 电商模式O2O、C2C、B2B、B2C

    电商模式O2O.C2C.B2B.B2C o2o o2o 是 online to offline 分为四种运营模式 1.online to offline 是线上交易到线下消费体验 2.offline ...

  2. Entitlements

    [Entitlements] Entitlements confer specific capabilities or security permissions to your iOS or OS X ...

  3. SESSION的知识

    android模拟表单用到了httpclient,但是需要了解Jsessionid的相关知识 如下是从一篇博文摘抄来的 在web应用的开发中我们会经常看到这样的url:http://www.xxx.c ...

  4. Leetcode:ZigZag Conversion分析和实现

    问题的大意就是将字符串中的字符按锯齿状(倒N形)垂直由上向下放置,最后水平从左向右读取.比如 ABCDEFGHIJKLMN,4表示 A          G      M B      F  H    ...

  5. 刷题向》POJ2823 单调队列裸题(<不会做,请自裁>系列)

    最近BZOJ炸了,而我的博客上又更新了一些基本知识,所以这里刷一些裸题,用以丰富知识性博客 POJ2823   滑动的窗口 这是一道经典的单调队题,我记得我刚学的时候就是用这道题作为单调队列的例题,算 ...

  6. 【总结整理】pv、uv

    1.pv的全称是page view,译为页面浏览量或点击量,通常是衡量一个网站甚至一条网络新闻的指标.用户每次对网站中的一个页面的请求或访问均被记录1个PV,用户对同一页面的多次访问,pv累计.例如, ...

  7. 【总结整理】关于房产app的比较

    从切换城市的分类方式就能看出来,因覆盖城市很多,搜房网(房天下)跟安居客都用上了拼音选房,而链家因城市很少,只需简单罗列即可. 搜房网(房天下)覆盖城市多达651个,覆盖范围最广,安居客为500个,两 ...

  8. Qt入门-第一个Qt程序

    在安装完之后,迫不及待创建第一个Qt  demo

  9. Luogu 2597 [ZJOI2012]灾难

    BZOJ 2815. 解法还是挺巧妙的. 放上写得很详细很好懂的题解链接  戳这里. 一个物种$x$如果要灭绝,那么沿着它的入边反向走走走,一定可以走到一个点$y$,如果这个点$y$的物种灭绝了,那么 ...

  10. PyV8在服务端运行自动崩溃问题

    近来想在服务端架设WSGI + PyV8去自动解析JavaScript代码,然后返回解析后的数据给客户端.但是发现,在nginx配置后,客户端一请求,服务端的python脚本自动崩溃. 见代码: de ...