JS实现继承的几种方式

• 继承

  • 出现在两个构造函数之间的关系，当A的构造函数属性和方法被B构造函数的实例使用了，那么我们就说B继承自A的构造函数
    • A 是 B 构造函数的父类
    • B 是 A 构造函数的子类

• 构造函数

  • 一个构造函数都可以使用 new 关键字来创造出若干个实例
  • 每一个实例都可以使用这个构造函数的属性和方法

• 构造函数的意义

  • 构造函数的意义就是为了创建一个对象
  • 当函数和 new 关键字连用的时候，就拥有了创造对象的能力
  • 那么我们管这个函数叫做构造函数
  • 只是为了区分和普通函数，明显的体现出来，需要和 new 关键字连用，所以首字母要大写

• new 关键字

  • new 就是创造对象的过程
  • new 也叫做实例化对象的过程
  • new 创造出来的对象叫做构造函数的 实例对象

原型继承

• 原型继承：就是通过改变原型链的方式来达到继承
  • 子类.prototype = 父类的实例

  <script>
       //1.父类
       function Person(name){
           this.name = name
       }
       Person.prototype.say = function () {
           console.log('hell world');
           
       }

       //2.子类
       function Student (age) {
           this.age = age
       }
       // 实现Student继承Person
       Student.prototype = new Person('aa')

       var s1 = new Student(18)
       console.log(s1);
       
    </script>

• 原型继承的缺点：
  • 继承下来的属性没有继承在自己身上，而是在__proto__里面，当访问的时候就要去__proto__里面找
  • 继承的目的是为了继承属性和方法，要使用的属性和方法要在两个地方传递，这样对于代码的维护性和阅读不好

借用构造函数继承（借用继承 / call继承）

• 借用继承：
  • 为了让子类的实例使用父类的属性和方法
• 继承方案：
  • 在子类的构造函数体内，借用父类构造函数执行一下
  • 并且强行让父类的函数的this指向子类的实例

<script>

    // 1.父类
    function Person(name,gender){
        this.name = name
        this.gender = gender
    }
    Person.prototype.say = function () {
        console.log('hello world');
        
    }
    //2.子类
    function Student(age,name,gender){
        this.age = age
        //这里的this指向的是Student的当前实例（s1）
        //调用Person函数，把函数内部的this指向Student这个实例
        //也就是现在让Person函数内部的this指向s1
        Person.call(this,name,gender)
    }

    var s1 = new Student(18, 'Rose', '男')
    console.log(s1);

-借用继承的优缺点

• 优点
  • 继承来的属性写在了自己身上，就不需要去__proto__找了
  • 自己需要用到的两个属性的值，在一个构造函数的时候传递，不像原型继承需要在两个地方传递参数
• 缺点
  • 只能继承父类的属性，不能继承父类原型（prototype）上的方法，写在构造函数体内的都可以继承下来

组合继承

• 原型继承 + 借用构造函数继承
  • 利用构造函数继承，把属性继承在自己身上
  • 利用原型继承把父类 prototype 上的方法继承下来

 <script>

    //1.父类构造函数
    function Person(name,age){
        this.name = name
        this.age = age
    }
    Person.prototype.say = function(){
        console.log("hello world");
        
    }

    //2.子类构造函数
    function Student(gender,name,age){
        this.gender = gender

        //借用继承
        //call 方法的参数
        //第一个室内改变this的指向
        //第二个参数开始依次给函数传递参数
        Person.call(this,name,age)//这里的this就是Student的实例
        //调用一个Person函数，并且把Person里面的this改变成Student的实例
    }

    //原型继承
    //能继承属性和方法
    //s1的say方法是依靠这个原型继承下来的
    Student.prototype = new Person()

    var s1 = new Student('女','Jack',20)
    console.log(s1);
    
    </script>

• 缺点
  • 子类的原型上面本来的方法就没有了，必须要继承以后再添加

ES6的继承

• es6的继承语法

  • es6有自己的书写 类 的语法叫做 class

• 继承

  • 1.书写子类的时候
    • 写成：class 子类 extends 父类
  • 2.在子类的constructor里面书写 super() 来完成继承，super（）就相当于在借用父类构造函数

 <script>

    //1.准备一个父类
    class Person {
        constructor (name) {
            //等价于构造函数体
            this.name = name
        }

        //原型上的方法
        say(){
            console.log("hello world");
            
        }
    }

    //2.准备一个子类
    //一个来自Person的Student子类
    class Student extends Person {
        constructor (age,name){
            super(name) //相当于es5的借用构造函数继承
            //只不过不需要我们写 call 去改变this 指向了
            //直接帮我们改变好 this 指向，我们只需要传递参数就可以
            this.age = age
        }

        son () {
            console.log('子类的方法');
            
        }
    }

    var s1 = new Student(18,'Ary')
    console.log(s1);
    
    </script>