每天 10 分钟，学习 JavaScript —— （二十一）继承

原型链继承

• 创建步骤
  • 定义父类型构造函数
  • 给父类型的原型添加方法
  • 定义子类型的构造函数
  • 创建父类型的对象赋值给子类型的原型
  • 将子类型原型的构造属性设置为子类型
  • 给子类型原型添加方法
  • 创建子类型的对象：可以调用父类型的方法
• 关键
  • 子类型的原型为父类型的一个实例对象

    // 父类型
    function Supper() {
      this.supProp = 'Supper property'
    }
    Supper.prototype.showSupperProp = function() {
      console.log(this.supProp)
    }
    // 子类型
    function Sub() {
      this.subProp = 'Sub property'
    }
    // 子类型的原型为父类型的一个实例对象
    Sub.prototype = new Supper()
    // 让子类的原型的constructor指向子类型
    Sub.prototype.constructor = Sub
    Sub.prototype.showSubProp = function() {
      console.log(this.subProp)
    }
    var sub = new Sub()
    sub.showSupperProp() // Supper property

• 图例

组合继承

• 原型链 + 借用构造函数
  • 利用原型链实现对父类型对象的方法继承
  • 利用super()借用父类型构建函数初始化相同属性

    function Person(name, age) {
      this.name = name
      this.age = age
    }
    Person.prototype.setName = function (name) {
      this.name = name
    }

    function Student(name, age, sex) {
      Person.call(this, name, age) // 为了得到父类的属性
      this.sex = sex
    }
    Student.prototype = new Person() // 为了能看到父类型的方法
    Student.prototype.constructor = Student // 修正constructor属性
    Student.prototype.setSex = function (sex) {
      this.sex = sex
    }

    var s = new Student('Tom', 20, 'm')
    s.setName('Jenny')
    s.setSex('f')
    console.log(s.name, s.age, s.sex) // Jenny 20 f