总结继承的几种方式

简单总结继承的几种方式

JavaScript作为一门弱类型的语言，本着精简的原则，它取消了类的概念，只有对象的概念，

更是有万物皆对象的说法。在基于类的面向对象方式中，对象（object）依靠类（class）来产生。

而在基于原型的面向对象方式中，对象（object）则是依靠构造器（constructor） 利用 原型（prototype）

构造出来的。而JavaScript语言正是如此，它是通过一种叫做原型（prototype）的方式来实现面向对象编程的。

它和其他的面向对象类编程语言一样，只是它的实现方式不同而已，或者说他们采用了不同的面向对象设计哲学。

那么下面就让我们来简单总结一下继承的几种方式：

1. 扩展原型对象实现继承

构造函数有一个 prototype 属性，指向的就是原型对象，通过给原型对象添加属性和方法，让构造函数的实例

都可以访问到，从而实现继承

function Animal(name,color,say){
  this.name = name;
  this.color = color;
  this.say = function(){
    console.log('喵喵喵');
  }
}

var cat = new Animal('cat','white');
// 如果给Animal的prototype属性上添加个 cry 方法 ，那么实例对象 cat将也会有 cry方法 
Animal.prototype.cry = function(){
  console.log('呜呜呜');
}

1. 替换原型对象实现继承 (常用类型)

• 为什么会有该方式呢？
  其实上面扩展原型对象的方法已经很方便了，但是为什么我们还需要使用该方式呢？试想一下，
  当我们需要给构造函数的原型对象添加许多属性和方法的时候，岂不是要写很多冗余（重复）的代码。例如上面的例子
  看下面代码：

      // 我们要给 构造函数Animal 添加很多的方法 即：
      Animal.prototype.aaa = function(){};
      Animal.prototype.bbb = function(){};
      Animal.prototype.ccc = function(){};
      Animal.prototype.ddd = function(){};
      Animal.prototype.eee = function(){};
      ......  // 诸如这样的话，代码就显得不那么优雅，高效了吧。
  

• 实现方式？
  重新给构造函数的prototype属性（原型对象）赋值，指向一个全新的对象，在这个对象中添加属性和方法，注：
  一定要添加一个constructor属性，并且指向构造函数本身 具体看代码：

      Animal.prototype = {
        // 一定要指明constructor属性，不然的话，会根据原型链查找一直到Object.prototype
        constructor : Animal;  
        saying : function(){},
        crying : function(){},
        doing : function(){}
       ......
      }
  

1. 混入继承

• 混入继承的使用场景：已知对象 o1, o2, 需要把 o1中的功能（属性方法）拷贝到 o2 中去

• 实现方式 ：用 for...in... 对 o 进行遍历(可以将混入继承的模式封装成函数)，如下所示

    // target : 目标对象（接收数据的对象）
    // source : 接收对象 （数据从哪个对象中来）
    function mixin(target,source){
        for(var key in source){
          target[key] = source[key];
        }
        return target;
    }
  

• 原理其实很简单，jQuery中的$.extend 方法利用的就是混入继承的原理

1. 原型 + 混入继承

• 本质上就是对混入继承的一次运用

• 只不过目标对象为原型对象而已

        // 运用上面封装的混入继承的函数  将对象{a:10,b:20,c:function(){}}的功能考本到Animal原型对象上去
        mixin(Animal.prototype, {a:10,b:20,c:function(){}} );  
        // 还可以 这样操作 给Animal构造函数 的原型对象添加一个extend方法，在该方法中调用mixin函数，这样的话也可以实现
        Animal.prototype.extend = function(){
             mixin(Animal.prototype, source);
        }
        // 不过两种方法没有本质之差，看大家易于接受哪个了
  

1. 经典继承 —> 道格拉斯《JavaScript语言精粹》中提到的一种继承模型

• 实现的功能：已知一个对象 o1 需要创建一个新的对象 o2 ，这个新的对象需要继承自对象 o1，代码如下：

      // 可以将经典继承 封装成一个函数
      function create(o){
        function F(){};    // 创建一个构造函数
        F.prototype = o;   // 将F 的原型指向 对象 o;
        return new F();    // 将 构造函数的实例 返回出去，这样的话 F的实例对象，就会继承自 o
      }
      var o2 = create(o1);  // 即：o2 继承于 o1 ;  o2.__proto__ = o1;
  

• 使用场景 ：要创建一个对象（不需要关心构造函数）,新对象需要继承自另一个指定的对象

• ES5中 ：Object.create( ) 的实现原理就源自于经典继承

1. 借用构造函数 实现继承

• 先看一下代码　再解释：

    // 需要两个构造函数
    function Person(name,age，gender){  
     this.name = name;
     this.age = age;
     this.gender = gender;
    }
    // function Student(name,age,){
    //  this.name = name;
    // this.age = age;
    //  this.gender = gender;
    // }
    // 这样的话 name，age 属性都一样，就会产生重复的代码 我们可以巧妙的利用call 来简单的实现
    function Student(name,age){
     Person.call(this,name,age);     // 其实就是用 call的方法，call借用Person的功能
     this.gender = gender;
    }
  

  • 借用Person中的构造函数的功能，this表示构造函数的实例，即Student的实例对象可以继承name,age属性；

  • 借用构造函数实现继承，子构造函数借用父构造函数来完成，给子类Student的实例添加属性

  • 注意：由于要借用父类构造函数，所以父类构造函数的功能对子类对象要适用，例如下面情况就最好不用call

    // 需要两个构造函数
    function Person(name,age，gender){  
     this.name = name;
     this.age = age;
     this.gender = gender;
    }
    // function Student(name,age,){
    //  this.name = name;
    // this.age = age;
    // }
    function Student(name,age){
     Person.call(this,name,age);     
    }
    

• 上述情况，就最好不要使用call来借用父类构造函数Person的功能了，因为，gender属性是Student子类构造函数
  并不需要的，这样的话，就会在Student中产生不必要的属性和方法，如果子类函数还要有gender方法的话，那么就会和之前的产生冲突，交叉污染

• 其他情况：遇到需要实现功能，该对象上没有这个功能，可以适当地去寻找已经有功能的对象