JavaScript中的继承与深度拷贝

前言

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

对于前端新手来说（比如博主），每当对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无效怎么办？好吧，不要问了，容我再想想。

扫描二维码关注公众号，回复： 2014520 查看本文章

最终的继承

为了解决一系列的问题，最终我给出了一下继承方法，此继承方法类似于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
}

最后的结尾

很遗憾本菜只能有这些本事了，帖子内容不少，大多是废话，新人可以看一下。