继承方式知多少

过完年，马上又到了金三银四的季节，这段时间无论是身经百战的老鸟，还是在程序界中杀个七进七出的高手，抑或是菜鸟都在这段时间内，疯狂的恶补自己的知识面，以便于在跳槽的时候拿到一个称心如意的offer —— 而js继承不必说必然是一个非常高频的基础面试题

说它基础是因为绝大部分都能说出几点来，接下来我就带大家全面的回顾一下这个知识点

JS是一种弱类型的面向对象语言（抽象，封装，继承，多态），所以在实现继承上还是一如既往的灵活

//父类
      function Person(name) {
           this.name = name || '无名'
           this.sayHello = function () {
               console.log('hello everyBody i am ' + this.name)
           }
       }
       Person.prototype.doWork = function (work) {
           console.log(this.name + '的工作是--' + work)
       }

ES5继承

第一种 —— 原型继承

原型继承基本上是人人都会的功能无非就是 将父类的实例当作子类的原型，其中牵扯到的知识点有两个

this的指向
原型的链条继承

      //子类
       function Teacher() {}
       Teacher.prototype = new Person('张三')

       var ls = new Teacher() 
       console.log(ls.name)   // 张三
       ls.sayHello()          //hello everyBody i am 张三
       ls.doWork('教师')      //张三的工作是--教师 

       var zs = new Teacher()
       console.log(zs.name)   // 张三
       zs.sayHello()          //hello everyBody i am 张三
       zs.doWork('教师')     //张三的工作是--教师

优点：

简单，只要是父类原型上的方法和属性都可以访问使用

缺点：

优点即缺点，多个子类实例共享父类的属性
实例不能传参即 var lisi = new Teacher('李四')，参数李四不会传到父类，输出依然是张三
不能实现多继承（多继承是指继承多个父类）

第二种 —— 通过构造函数继承

通过call来调用父类构造函数，所以每一个子类都会有一个父类实例的副本

知识点

通过call实现对象冒充

//子类
      function Teacher(name) {
           Person.call(this,name)
           this.name = name || '无名'
       }
       
       var zs = new Teacher('张三')
       console.log(zs.name)
       zs.sayHello()
       zs.doWork('教师')  //报错

优点

通过call实现后，子类的实例拷贝的是父类的副本，不存在属性共享的问题
可实现多继承，通过多个call调用

缺点

优点类似于拷贝赋值，所以实例化的对象只是子类的实例，而不是父类的实例
无法复用父类原型链上的方法

第三种拷贝继承

这个有点类似于上面，就是把父类的实例化遍历，通过赋值的方式赋值给子类的原型

      //子类
      function Teacher(name) {
           var example = new Person();
           for(var p in example){
               Teacher.prototype[p] = example[p];
           }
           Teacher.prototype.name = name || 'Tom';
       }

优点

可实现多继承，即把多个父类的实例化通过遍历的方式赋值给子类

缺点

麻烦，因为要遍历父类原型占用内存高

第四种 —— 把父类的实例当作子类返回值

通过实例化父类，然后为这个实例添加新的属性

//子类
      function Teacher(name) {
           let example = new Person()
           example.name = name || '无名'
           return example
       }

       var zs = new Teacher('张三')
       console.log(zs.name)
       zs.sayHello()
       zs.doWork('教师')

优点

因为有return返回的值所以不管是new Teacher()还是函数调用Teacher()返回的结果是一样的

缺点

因为返回的是父类的实例，所以实例化对象zs只是父类的实例，不是子类的实例
不能实现多继承

小结一下

上面的四种方法都各有自己的优缺点，但是总体来看要么是不全面要么是麻烦或者占内存，一般在开发中不建议这样使用，但是也根据你自己的实际情况，比如上面的某个方式很符合你的业务场景，而又不考虑扩展之类的其它东西，也是可以使用的

当然除了这些，js发展了这么多年肯定是有比上面四种更好的方法，我们接着介绍

第五种 —— 组合继承（构造 + 实例）继承

通过call拷贝来父类的属性给子类使用，并且通过原型链的方式实现原型链的继承

//子类
      function Teacher(name) {
           Person.call(this，name)
           this.name = name || '无名'
       }
    
       Teacher.prototype = Object.create(Person.prototype)
       Teacher.prototype.constructor = Teacher

      var zs = new Teacher('张三')
       console.log(zs.name)
       zs.sayHello()
       zs.doWork('教师')

优点

解决了构造继承和原型继承的缺点

第六种寄生组合式继承

这种方式可以理解为第五种方法的优化

//子类
function Teacher(name) {
           Person.call(this，name)
           this.name = name || '无名'
       }
       (function(){
           let Example = function(){};
           Example.prototype = Person.prototype;
           Teacher.prototype = new Example();
           Teacher.prototype.constructor = Teacher
       })();


       var zs = new Teacher('张三')
       console.log(zs.name)
       zs.sayHello()
       zs.doWork('教师')

优点

堪称完美

缺点

有点复杂

ES6 继承

  class Person{
        constructor(name){
            this.name = name
        }
        sayName(){
            console.log('my name is ' + this.name)
        }
    }
    class Teacher extends Person{
        constructor(name){
            super()
            this.name = name
        }
    }
   console.log(new Teacher('zs'))
    new Teacher('zs').sayName()

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工，如果不调用super方法，子类就得不到this对象。因此，只有调用super之后，才可以使用this关键字

底层实现：一个继承语句同时存在两条继承链：一条实现属性继承，一条实现方法的继承

class A extends B{}
A.__proto__ === B;  //继承属性
A.prototype.__proto__ == B.prototype;//继承方法

从上面可以看到不管是ES5还是ES6继承的基本实现方式是一样的，我想这就是所谓的万变不离其宗吧

如果有错误的地方欢迎指正批评