[JavaScript知识库]JavaScript高级-原型链继承-构造函数继承-组合继承

7.原型链继承

1. 流程
   1. 定义父类型构造函数
   2. 给父类型的原型添加方法
   3. 定义子类型的构造函数
   4. 创建父类型的实例赋值给子类型的原型
   5. 为子类型的原型添加方法
2. 关键
   1. 子类型的原型为父类型的实例对象

示例

    //父类型
    function Supper(){
        this.supProp = 'Supper property'
    }
    Supper.prototype.showSupperProp = function(){
        console.log(this.supProp);
    }

    //子类型
    function Sub(){
        this.subProp = 'Sub property'
    }
    
    var supper = new Supper()
    Sub.prototype = new Supper()
    Sub.prototype.showSubProp = function(){
        console.log(this.subProp);
    }
    var sub = new Sub()
    sub.showSupperProp()// Supper property
    sub.showSubProp() //  Sub property

解释

1.对原型链继承的解释

• 当我们的子类需要继承父类的变量或者方法时,我们可以用到原型链继承,继承的关键是将子类的prototype指向父类的__ proto __ ,也就是子类的原型为父类的实例对象
• 原型链的继承可以使得子类的原型链上拥有父类的原型属性,实际上是对子类原型链的修改

2.为什么子类的原型要指向父类的实例对象而不是指向父类的原型(构造函数)?

• 如果指向父类本身，那么我们在给子类的原型添加方法时,父类也会得到相同的方法,这样会造成引用混乱，例如

  function Person(name,age){
      this.name = name;
      this.age = age;
  }
  
  Person.prototype.sayHi = function (){
      console.log("Hi,I'm "  + this.name);
  }
  
  function Student(name, age, grade){
      Person.call(this, name, age);
      this.grade = grade;
  }
  Student.prototype = Person.prototype
  Student.prototype.sayHello =function(){
      console.log("Hello, I'm "+ this.name +", I'm in grade " + this.grade + ", nice to meet you.");
      };
  
  var wang_son = new Student('老王儿子',8,'二年级');
  var wang = new Person('老王',30);
  wang_son.sayHi();//Hi,I'm 老王儿子
  wang_son.sayHello();//Hello, I'm 老王儿子, I'm in grade 二年级, nice to meet you.
  wang.sayHello()//Hello, I'm 老王, I'm in grade undefined, nice to meet you.
  
  

  如上所示,如果指向父类的原型,那么我们可以在父类中调用子类的方法,这明显是不应该出现的

  ---

  借用构造函数实现继承

实现：

1. 定义父类构造函数
2. 定义子类构造函数
3. 在子类构造函数中调用父类构造函数

关键

1. 在子类构造函数使用call调用父类构造函数,改变父类构造函数的this指向

示例

    function Person(name,age){
        this.name = name
        this.age = age
    }
    function Student(name,age,price){
        Person.call(this,name,age)
        this.price = price
    }
    var s = new Student('Tom',20,14000)
    console.log(s.name);//Tom

组合继承

定义：

1. 利用原型链实现对父类对象的方法的继承
2. 利用call()借用父类构造函数的属性

示例

function Person(name,age){
        this.name = name
        this.age = age
    }
    Person.prototype.setName =function(name){
        this.name = name
    }
    function Student(name,age,price){
        Person.call(this,name,age)//传入this,将person的this指向变成Student
        this.price = price
    }
    Student.prototype = new Person()
    Student.prototype.constructor = Student
    var s = new Student('tom',15,14000)
    s.setName('bob')
    console.log(s.name);//bob

如上所示，利用原型继承 继承父类的方法,利用call()方法继承父类的属性(call方法可以改变函数的this指向)