前言

本篇适合前端新人,下面开始......

对于前端新手来说(比如博主),每当对js的对象做操作时,都是一种痛苦,原因就是在于对象的赋值是引用的传递,并非值的传递,虽然看上去后者赋值给了前者,他们就各奔东西了,但是他们却紧紧相连,为了解决这一问题,我们需要从根源上来切断对象赋值时就对象与新对象之间的藕断丝连......

拷贝

我们寻找方法时候,找到了拷贝这个方法,就是把要赋值的对象的属性一个一个加到新对象中去,所以我们得到了clone方法:

function clone (obj) {
  var news = {}
  for (var key in obj) {
    news[key] = obj[key]
  }
  return news
}

但是新问题又来了,我的新对象并不是空的,我的新对象还有其他属性,以上这个方法并不适用了,怎么办......

继承

对于继承这个名词,大家并不陌生,该有的留下,该继承的加进来,该覆盖的覆盖掉。于是我们稍微修改了一下上面的代码,得到了extend方法:

function extend(target, obj) {

  for (var key in obj) {
    target[key] = obj[key]
  }
  return target
}

我们把目标对象穿进去,把继承对象中的属性依依加到目标对象。最后,我们返回目标对象,虽然不比这么做目标对象已经改变,不过我们还是这样做吧。

深拷贝

问题总是不断的发现,现在我们又有问题了,我们在继承过程中,如果某一个属性值是一个对象,那么我们的继承函数仍然有引用传递,这样一来仍然联系不断!怎么办呢?这时候大牛们变引发了深拷贝这个名词,顾名思义,如果对象中还有对象,那么一层一层的拷贝下去吧,不信你能有10086层对象嵌套。

深拷贝的核心是递归继承,碰到属性值为对象,就触发递归继承。在这里,你可能想到了jQuery等功能库,的确,他们都有extend方法来实现深拷贝,但我觉得不完美,因为我们需要依靠自己的力量,不能仅仅依赖别人,因此我们又需要继续探索.....

JSON的妙用

在我们探索如果深拷贝时,JSON对象缺在偷偷地笑,我问他在笑什么,他跟我说了这样的话:

  

var obj1 = {
  name: 'xu',
  age: 21,  native: {    weight: 70,    height: 170  }
  ... //许多属性
}

var obj2 = clone(obj1) //    浅拷贝,未断开联系

var obj2 = JSON.parse(JSON.stringify(obj1))  // 深拷贝,成功断开

他告诉我说:你的clone是不行滴,我给你两个方法,分分钟让对象断子绝孙。于是,我就学会了这样进行深拷贝。但是需求还是远远不够,在现实项目中,我们需要的是在继承中深拷贝,于是我们继续探索,终于......

function deepExtend (target, obj) {
  var clone
  for (var key in obj) {
    clone = obj[key]
    if (typeof clone === 'object') {   // 只考虑数组和对象两种情况
      target[key] = JSON.parse(JSON.stringify(clone))
    } else {
      target[key] = clone
    }
  }
  return target
}

好吧,我们写出了上面这个简单的继承,不过感觉很瑕疵,万一我们需要给目标对象继承多个对象怎么办?我们如何控制是否深拷贝?低版本浏览器ie678中JSON无效怎么办?好吧,不要问了,容我再想想。

最终的继承

为了解决一系列的问题,最终我给出了一下继承方法,此继承方法类似于jQuery.extend,实际也差不多,不过相比简单易懂(个人觉得),因为加了大量汉语注释,适合新手们。

function extend () {
  //  arguments种类
  //  [deep]  可选,标注是否为深度继承
  //  target  第一个对象,则为目标对像
  //  options  之后的对象,都视为继承对象
  var args = arguments,
    target = args[0],   //  假设第一个参数为目标对象
    len = args.length,  //  获取参数总长度
    i = 1,              //  假设继承对象从下标为1开始
    deep = false,       //  初始化为浅拷贝
    tar, source, option, key
  //  如果第一个参数是布尔值,那么第二个参数做为目标对象
  if (typeof target === 'boolean') {
    deep = target
    target = args[i++]
  }
  //  遍历继承对象,并将每一个都继承到目标对象中
  for (; i < len; i++) {

    option = args[i]

    for (key in option) {
      tar = target[key]
      source = option[key]
      //  如果为深拷贝并且此时的属性值为对象,则进行递归拷贝
      if (deep && typeof source === 'object') {
        if (!tar) {   //  如果目标对象没有此属性,那么创建它
          tar = Object.prototype.call(source) === '[object Array]'? []: {}
        }
        //  将递归拷贝的结果赋值给目标对象
        target[key] = assign(deep, tar, source)
      } else{
        //  如果为浅拷贝,直接赋值
        target[key] = source
      }
    }
  }
  return target
}

最后的结尾

很遗憾本菜只能有这些本事了, 帖子内容不少,大多是废话,新人可以看一下,如果觉得有帮助,就点个赞吧~~~~

javascript中的继承与深度拷贝的更多相关文章

  1. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  2. 浅谈JavaScript中的继承

    引言 在JavaScript中,实现继承的主要方式是通过原型链技术.这一篇文章我们就通过介绍JavaScript中实现继承的几种方式来慢慢领会JavaScript中继承实现的点点滴滴. 原型链介绍 原 ...

  3. JavaScript中的继承(原型链)

    一.原型链 ECMAScript中将原型链作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 实例1: function SupType() { this.pro ...

  4. javascript 中的继承实现, call,apply,prototype,构造函数

    javascript中继承可以通过call.apply.protoperty实现 1.call call的含义: foo.call(thisObject, args...) 表示函数foo调用的时候, ...

  5. javascript中的继承实现

    javascript虽然是一门面向对象的语言,但是它的继承机制从一开始设计的时候就不同于传统的其他面向对象语言,是基于原型的继承机制,但是在这种机制下,继承依然有一些不同的实现方式. 方法一:类式继承 ...

  6. javascript中的继承方法

    从Javascript面向对象编程(二):构造函数的继承这里,可以看到详细的说明. 我只是将其中的例子做成html文件,便于调试罢了. 1. 构造函数绑定 <html> <head& ...

  7. JavaScript 中的继承(读书笔记思维导图)

    继承是 OO 语言中的一个最为人津津乐道的概念.许多 OO 语言都支持两种继承方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.由于函数没有签名,在 ECMAScript ...

  8. javascript中关于继承的理解

    首先,你要理解在javascript中,每当一个新函数创建时,都会生成一个prototype属性,我们管它叫做原型对象.看一个例子: function foo(){ this.name='qiangq ...

  9. javascript中的继承用法

    本文实例汇总了javascript关于继承的用法,希望本文所述对大家的javascript程序设计有所帮助.分享给大家供大家参考.具体如下:代码如下: /** * 实现子类继承父类,但不会产生多余的属 ...

随机推荐

  1. 关键帧动画:@keyframes

    关键帧动画:@keyframes: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  2. 为你的Android App实现自签名的 SSL 证书(转)

    介绍 网络安全已成为大家最关心的问题. 如果你利用服务器存储客户资料, 那你应该考虑使用 SSL 加密客户跟服务器之间的通讯. 随着这几年手机应用迅速崛起. 黑客也开始向手机应用转移, 原因有下列3点 ...

  3. Debian 8中dpkg -i自动解决依赖关系

    dpkg -i 后#apt-get update &&apt-get -f install

  4. java.math.RoundingMode 几个参数详解

    java.math.RoundingMode里面有几个参数搞得我有点晕,现以个人理解对其一一进行总结: 为了能更好理解,我们可以画一个XY轴 RoundingMode.CEILING:取右边最近的整数 ...

  5. Android Studio构建系统基础

    基础知识 项目创建成功后会自动下载Gradle,这个过程特别慢,建议FQ.下载的Gradle在Windows平台会默认在 C:\Documents and Settings\<用户名>.g ...

  6. MapReduce实现二度好友关系

    一.问题定义 我在网上找了些,关于二度人脉算法的实现,大部分无非是通过广度搜索算法来查找,犹豫深度已经明确了2以内:这个算法其实很简单,第一步找到你关注的人:第二步找到这些人关注的人,最后找出第二步结 ...

  7. BZOJ 2124: 等差子序列

    Sol 线段树+Hash. 首先暴力 等差子序列至少3项就可以了,就枚举中项,枚举公差就可以了,只需要一个数在中项前出现,另一个数在中项前没出现过就可以了.复杂度 \(O(n^2)\) 然后我想了一个 ...

  8. 解决sqlite3_key的问题

    报错内容显示如下: ld: warning: ignoring file /Users/rowling/Library/Developer/Xcode/DerivedData/zhinengbango ...

  9. 时间:UTC时间、GMT时间、本地时间、Unix时间戳

    转自:http://blog.csdn.net/u012102306/article/details/51538574 1.UTC时间 与 GMT时间 我们可以认为格林威治时间就是时间协调时间(GMT ...

  10. nginx location配置

    nginx location配置   location在nginx中起着重要作用,对nginx接收到的请求字符串进行处理,如地址定向.数据缓存.应答控制.代理转发等location语法location ...