一网打尽js继承

继承方式知多少

过完年，立刻又到了金三银四的季节，这段时间不管是身经百战的老鸟，仍是在程序界中杀个七进七出的高手，抑或是菜鸟都在这段时间内，疯狂的恶补本身的知识面，以便于在跳槽的时候拿到一个趁心如意的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继承的基本实现方式是同样的，我想这就是所谓的万变不离其宗吧

若是有错误的地方 欢迎指正批评