登录  /  注册
博主信息
博文 7
粉丝 0
评论 1
访问量 26425
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
JavaScript中的继承方式
YueLun
原创
817人浏览过

    一、前言

    面向对象特性:封装,继承,多态。

    继承,类与类之间的关系,面向对象的语言的继承是为了多态服务的。

    js不是面向对象的语言,但是可以模拟面向对象.模拟继承.为了节省内存空间。

    在js中我们可以通过原型来进行继承,它的原理是改变原型的指向

    原型的两个作用:

    原型作用1: 数据共享 ,目的是:为了节省内存空间,

    原型作用2: 为了实现继承 目的是:为了节省内存空间

    二、继承的几种方式

    1.借用构造函数继承

    优点:该方式主要解决属性的问题
    缺点:父级类别中的方法不能继承

    <script>
     function Person(name, age, sex, weight) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.weight = weight;
      }
    
      Person.prototype.sayHi = function () {
        console.log("hello!");
      };
    
      function Student(name, age, weight, sex, score,) {  //===》这里需要传入构造函数的参数
        Person.call(this, name, age, sex, weight); //=======>借用需要的构造函数,传入参数
        this.score = score;
      }
    
      var st = new Student("小明", 18, "180kg", "男", 99);
      console.log(st.name, st.age, st.sex, st.weight, st.score);
      //st.sayHi();  //父亲级类别中的方法不能继承
    
      var stu2 = new Student("小红", 20, "女", "20kg", "120");
      console.log(stu2.name, stu2.age, stu2.sex, stu2.weight, stu2.score);
    
      var stu3 = new Student("小丽", 30, "妖", "30kg", "130");
      console.log(stu3.name, stu3.age, stu3.sex, stu3.weight, stu3.score);
    </script>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    2.组合继承

    原型继承+借用构造函数继承。既能解决属性问题,又能解决方法不能继承问题。 //一般用这种,前提用构造函数创建对象

    <script>
      function Person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
      }
    
      Person.prototype.sayHi = function () {
        console.log("嘿嘿嘿嘿");
      };
    
      function Student(name, age, sex, score) {
        //借用构造函数:解决属性值重复的问题
        Person.call(this, name, age, sex);
        this.score = score;
      }
    
      //改变原型指向————继承
      Student.prototype = new Person(); //===>这里不传参数
      Student.prototype.eat = function () {
        console.log("吃试卷");
      };
    
      var st = new Student("小明", 18, "男", "100分");
      console.log(st.name, st.age, st.sex, st.score);
      st.sayHi();
      st.eat();
    
      var st1 = new Student("小黑", 28, "女", "110分");
      console.log(st1.name, st1.age, st1.sex, st1.score);
      st1.sayHi();
      st1.eat();
    
      var st2 = new Student("小白", 38, "妖", "120分");
      console.log(st2.name, st2.age, st2.sex, st2.score);
      st2.sayHi();
      st2.eat();
    </script>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    3.拷贝继承

    就是把对象中需要共享的属性或者方法,直接遍历的方式复制到另一个对象中。

    3.1 通过改变地址指向实现
      var obj1 = {
        name: "小糊涂",
        age: 20,
        sleep: function () {
          console.log("睡觉");
        }
      }
    
      //改变了地址的指向
      var obj2 = obj1;
      console.log(obj2.name, obj2.age);
      obj2.sleep();
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    3.2 通过循环实现
      var obj1 = {
        name: "小糊涂",
        age: 20,
        sleep: function () {
          console.log("睡觉");
        }
      };
    
      var obj2 = {};
      for (var key in obj1) {
        obj2[key] = obj1[key];
      }
      console.log(obj2.name);
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
                   
    本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
    全部评论 文明上网理性发言,请遵守新闻评论服务协议
    0条评论
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学