js继承最实用的2种方式：Es5对比Es6，学会这2种可以解放人生了

前言

js 的继承老生常谈了，网上也总结了很多继承方法，有原型继承、原型链继承、寄生继承、构造函数继承、组合继承等，各种方法各有利弊，现在ES6提出了新的继承机制，完美摆平了这乱七八糟的局面，但是ES6还没能兼容所有浏览器，所以笔者分别用ES5和ES6写出2种完整继承的方法，学会这2个即可。

实例代码

具体看代码和注释，不明的地方百度即可，可以把代码拷贝到本地运行，看效果：

  //ES5组合继承
  ~function(){
      //定义父类
      function Father(name){
          this.name=name;
      }
      Father.prototype.speak=function(str){
          console.log(str);
      }

      //定义子类
      function Son(name,age){
          Father.call(this,name);
          this.age=age;
      }
      Son.prototype = Object.create(Father.prototype); //创建新的原型对象
      Son.prototype.constructor = Son; //构造器重新指定

      //子类继承并扩展父类同名方法
      Son.prototype.speak = function(str){
          str="儿子说：我的名字叫"+this.name;
          Father.prototype.speak.call(this,str);//继承父亲的speak方法
      }

      //创建子类实例
      let son = new Son("ES5",5);
      console.log("ES5继承效果");
      console.log(son);
      son.speak("这是ES5继承方法");
  }()

  console.log("----------------------------");

  //ES6继承
  ~function(){
      //定义父类
      class Father{
          constructor(name){
              this.name=name;
          }
          speak(str){
              console.log(str);
          }
      }
      //定义子类
      class Son extends Father{
          constructor(name,age){
              super(name); //必须在this前使用super调用父类的构造函数
              this.age=age;
          }
          //子类继承并扩展父类同名方法
          speak(str){
              str="儿子说：我的名字叫"+this.name;
              super.speak(str);//使用super调用/继承父类的speak方法
          }
      }

      //创建子类实例
      let son = new Son("Es6",5);
      console.log("ES6继承效果");
      console.log(son);
      son.speak("这是ES6继承方法");
  }()

运行效果

看输出效果，2者原型链是完整的，整体基本一致，区别地方有：

• 构造函数constructor类别不同，ES5是function，ES6是class。
• 部分对象例如speak，2者着色不一样，ES5的是高光，ES6是暗光，按道理，暗光代表隐式属性。

总结

以后需要用到继承的时候，按需要复制使用其中一个作为基础即可。