JS 继承

JS 继承

搬运
https://segmentfault.com/a/1190000000766541
http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html

为什么js没有类？

截止ES5， JS并没有类的概念， 为何呢
class太正式了， 增加了初学者的难度 因此没有引入class 的概念

为什么要有prototype

function DOG(name){
　　　　this.name = name;
　　　　this.species = '犬科';
　　　　this.say = function(){ ... }
}
　　var dogA = new DOG('大毛');
　　var dogB = new DOG('二毛');　　

生成的每一个对象都有自己的属性和方法副本!! 方法副本！！
造成资源浪费，因此引入prototype属性
这个属性包含一个对象（以下简称"prototype对象"），所有实例对象需要共享的属性和方法，都放在这个对象里面；那些不需要共享的属性和方法，就放在构造函数里面。
实例对象一旦创建，将自动引用prototype对象的属性和方法。也就是说，实例对象的属性和方法，分成两种，一种是本地的，另一种是引用的。

原型继承在开发中经常用到。它有别于类继承是因为继承不在对象本身，而在对象的原型上（prototype）。每一个对象都有原型(字面量对象也有 只不过其__proto__是object)，在浏览器中它体现在一个隐藏的__proto__属性上。在

Object.create()

Object.create()创建的对象, 拥有指定的原型和属性

Object.create(prototype, optionalObjects)

var rectangle = {
    area : function(){
        return this.width * this.height ;
    }
} ;
var rect = Object.create(rectangle) ;

这里rect的原型是 rectangle

对象的继承 使用原型链

把子对象的prototype属性，指向父对象，从而使得子对象与父对象连在一起。

	function object(o) {
	　　　　function F() {}
	　　　　F.prototype = o;
	　　　　return new F();
	}

比如医生继承中国人

var Chinese = {
　　nation:'中国'
};

var doctor ={
　　career:'医生'
}
var doctor = object(Chinese);
alert(doctor.nation); //中国

对象继承 使用deepcopy

　　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);

经典的额原型继承

var Father = function(name) {
   this.name = name;
}
 
Father.prototype.a = function() {
	console.log(this.name)
}
 
var Child = function(name){
    this.name = name;
}
 
//开始继承 
Child.prototype = new Father(); 
var man = new Child('huhu'); 
man.a();

借用构造函数的继承

原型继承不是挺好的么 为什么还要有一个构造函数的继承呢?
最大的弊病, 就是父类构造函数中的东东 , 子类还要再写一遍, 很明显不符合逻辑

所以借用父类构造函数
Father.apply(this, arguments); 这样就好啦

  var Father = function(name, age) {
    this.name = name;
    this.age = age;
  }
  Father.prototype.a = function() {
    console.log(this.name + ' ' +this.age)
  }
  var Child = function(name, age, hehe) {
    Father.apply(this, arguments);
    this.hehe = hehe;
  }

  Child.prototype = new Father();
  var man = new Child('huhu',22,'hehe');
  man.a();
  console.log(man.hehe);

另外需要注意的是此刻man.constructor == Father 而不是Children
因为Child.prototype = xxx 的方式改了整个prototype的指向
所以还要再加上一个 Child.prototype.constructor = Child;

看起来挺完美了 然而父类的构造函数被调用了两次
第一次是 Child.prototype = new Father(); 第二次Child的构造函数又call了父类构造函数
所以肯定不能用 Child.prototype = new Father() 了

临时构造函数

使用临时的构造函数 避免了父类构造函数被调用2次的问题

  var Father = function(name, age) {
    this.name = name;
    this.age = age;
  }
  Father.prototype.a = function() {
    console.log(this.name + ' ' +this.age)
  }
  var Child = function(name, age, hehe) {
    Father.apply(this, arguments);
    this.hehe = hehe;
  }
  var Temp = function(){}
  Temp.prototype = Father.prototype;
  Child.prototype = new Temp();
  var man = new Child('huhu',22,'hehe');
  man.a();

前面不是提到了Object.create嘛 他可以创建指定原型的对象
也可以避免父类函数被多次调用

  var Father = function(name, age) {
    console.log('father constructor');
    this.name = name;
    this.age = age;
  }
  Father.prototype.a = function() {
    console.log(this.name + ' ' +this.age)
  }
  Father.prototype.obj = {b:1};
  var Child = function(name, age, hehe) {
    Father.apply(this, arguments);
    this.hehe = hehe;
  }
  Child.prototype = Object.create(Father.prototype);
  Child.constructor = Child;
  var man = new Child('huhu',22,'hehe');

Child.prototype = Father.prototype 有什么问题

  var Father = function(name, age) {
    console.log('father constructor');
    this.name = name;
    this.age = age;
  }
  Father.prototype.a = function() {
    console.log(this.name + ' ' +this.age)
  }
  Father.prototype.obj = {b:1};
  var Child = function(name, age, hehe) {
    Father.apply(this, arguments);
    this.hehe = hehe;
  }
  Child.prototype = Father.prototype;
  Child.constructor = Child;
  var man = new Child('huhu',22,'hehe');
  Child.prototype.a = function(){
    console.log(this.name + ' ' +this.age + ' '+ this.hehe);
  }
  new Father('hehe', 44).a(); //hehe 44 undefined //父类的a方法被改了
  //Child.prototype = Father.prototype; 导致任何对Child原型上的改动都会影响到Father

所以前面提到的经典原型继承 借用构造函数 Object.create() 就没有问题了吗?
注意上面那句话 导致任何对Child原型上的改动都会影响到Father
是 "任何" 也就是说经典原型等上述三种在某些情况下 也会影响到父类的原型

比如

  var Father = function(name, age) {
    // console.log('father constructor');
    this.name = name;
    this.age = age;
  }
  Father.prototype.a = function() {
    console.log(this.name + ' ' +this.age)
  }
  Father.prototype.obj = {b:1};
  var Child = function(name, age, hehe) {
    Father.apply(this, arguments);
    this.hehe = hehe;
  }
  Child.prototype = Object.create(Father.prototype);
  Child.constructor = Child;
  var man = new Child('huhu',22,'hehe');

  //这样是肯定不会影响到父类原型的  不论是不是糟糕的原型直接赋值都不会
  //因为下面的做法不过是给man对象增加了一个a属性
  // man.a = function(){
  //   console.log(this.name + ' ' +this.age + ' '+ this.hehe);
  // }
  // man.a();

  //这种当然也不会影响
  Child.prototype.a = function(){
    console.log(this.name + ' ' +this.age + ' '+ this.hehe);
  }
  man.a();
  new Father('hehe',55).a();

  // 这种也不会  因为等于给man对象增加一个属性
  // 你也可以认为man的obj这个指针指向了另一个值
  // man.obj = {b:2}; console.log(new Father().obj.b);//1


  // 影响到父类的原型   因为obj指向的就是 父类原型中的obj对象  我试图修改了这个obj中的值
  // man.obj.b = 2;
  // console.log(new Father().obj.b);//2  被改了

  Child.prototype.obj.b = 2;
  console.log(new Father().obj.b);//2  被改了

也就是说稍微对子类的原型做了一些稍微深层的改动 父类的原型就会被影响
只有说子类的原型和父类原型彻底的不存在指向关系, 才有可能解决

Copy继承

　　function Animal(){}
　　Animal.prototype.species = "动物";

function extend2(Child, Parent) {
　　　　var p = Parent.prototype;
　　　　var c = Child.prototype;
　　　　for (var i in p) {
　　　　　　c[i] = p[i];
　　　　　　}
　　　　c.uber = p;
}


extend2(Cat, Animal);
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物

当然这个copy还不是很完善, 毕竟深层次的copy就不行了
于是用一个深度clone来处理吧

  var Father = function(name, age) {
    this.name = name;
    this.age = age;
  }
  Father.prototype.a = function() {
    console.log(this.name + ' ' +this.age)
  }
  var Child = function(name, age, hehe) {
    Father.apply(this, arguments);
    this.hehe = hehe;
  }
  var Temp = function(){}
  Child.prototype = deepClone(Father.prototype);
  var f = new Father('heh',55);
  var man = new Child('huhu',22,'hehe');
  man.a = function(){
    console.log(this.name + ' ' +this.age + ' '+ this.hehe);
  }
  f.a();
  man.a();
  // man.obj.b = 2; console.log(new Father().obj.b);// 仍是1






  function deepClone(origin) {
    var isObj = function(o) {
      return Object.prototype.toString.call(o) == '[object Object]';
    }
    var isArr = function(o) {
      // return [].toString.call(o) == '[object Array]';// 数组的toString本身就被Array改写了
      return Object.prototype.toString.call(o) == '[object Array]'
    }
    function clone(origin) {
      var rs = isArr(origin) ? [] : {};
      for (key in origin) {
        if (isObj(origin[key]) || isArr(origin[key])) {
          rs[key] = clone(origin[key]);
        } else {
          if (origin.hasOwnProperty(key)) {
            rs[key] = origin[key];
          }
        }
      }
      return rs;
    }
    return clone(origin);
  }