标签：function ES5 name Person 继承 sex Stu 构造函数

1、原型继承

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

stu1的原型指向已经发生改变

  <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、借用构造函数继承

借用构造函数继承的问题：只能继承属性,不能继承方法

 // 借用构造函数实现的继承,只能继承属性,不能继承方法
    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>

标签：function,ES5,name,Person,继承,sex,Stu,构造函数
来源： https://blog.csdn.net/weixin_42943920/article/details/122262855

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。