ES5之继承的三种方法(原型、构造函数继承、组合继承)

1、原型继承

原型继承的问题:会出现多个实例属性相同的情况

stu1的原型指向已经发生改变
ES5之继承的三种方法(原型、构造函数继承、组合继承)

  <script>
    function Stu(sco){
      this.sco = sco
    }
    function Person(name,sex){
      this.name = name
      this.sex = sex
    }
    Person.prototype.sleep = function(){
      console.log('今天是21年最后一天');
    }
    // 改变Stu原型的指向
    Stu.prototype = new Person('kelly','女')
    // 创建学生对象
    let stu1 = new Stu(100)
    console.log(stu1);
  </script>

2、借用构造函数继承

借用构造函数继承的问题:只能继承属性,不能继承方法
ES5之继承的三种方法(原型、构造函数继承、组合继承)

 // 借用构造函数实现的继承,只能继承属性,不能继承方法
    function Person(name,sex){
      this.name = name
      this.sex = sex
    }
    Person.prototype.sleep = function(){
      console.log('今天是21年最后一天');
    }
    function Stu(sco,name,sex){
      // 学生对象实例中的this指向实例对象
      // Person构造函数通过call方法,改变this指向
      Person.call(this,name,sex)
      this.sco = sco
    }
    // 创建学生对象
    let stu1 = new Stu(100,'kk','man')
    let stu2 = new Stu(98,'hh','female')
    console.log(stu1);
    console.log(stu2);
    // stu1.sleep() //  stu1.sleep is not a function

3、组合继承

// 组合继承:改变原型指向和和借用构造函数实现继承组合使用
    // 人的构造函数
    function Person(name,sex){
      this.name = name
      this.sex = sex
    }
    Person.prototype.sleep = function(){
      console.log('今天是21年最后一天');
    }
    // 学生的构造函数
    function Stu(sco,name,sex){
      // 学生对象实例中的this指向实例对象
      // Person构造函数通过call方法,改变this指向,实现Stu继承Person的属性
      Person.call(this,name,sex)
      this.sco = sco
    }
    // 改变Stu原型指向,实现Stu继承Person的方法
    Stu.prototype = new Person()
    Stu.prototype.constructor = Stu
    // 创建学生对象
    let stu1 = new Stu(100,'kk','man')
    let stu2 = new Stu(98,'hh','female')
    console.log(stu1);
    console.log(stu2);
    console.log(stu1.sleep == stu2.sleep)
  </script>
上一篇:ES5


下一篇:js笔记寒假01