JavaScript类的继承多种实现方法


Posted in Javascript onMay 30, 2020

类的继承

1 子承父业

extends(继承父类的普通函数)(方法)

class Father {
      constructor() {
      }
      money() {
        console.log(100);  
      }
    }
    class Son extends Father {
    }
    class sunzi extends Son {

    }
    var yxf = new Father;
    var lbw = new Son;
    var bb = new sunzi;
    console.log(yxf.money());
    console.log(lbw.money());
    console.log(bb.money());

super的用法

用于访问和调用对象父类上的函数。可以调用父类的构造函数,也可以调用父类的普通函数(方法)

class Father1 {
      constructor(x,y) {
        this.x = x;
        this.y = y;
      }
      sum() {
        console.log(this.x + this.y);
      }
    }
    class Son1 extends Father1 {
      constructor(x,y){
        super(x,y);
      }
    }
    var yxf = new Son1(1,2);
    yxf.sum();

super关键字调用就近原则

<script>
    //super关键字调用父类普通函数
    class Father {
      say() {
        return '我是爸爸';
      }
    }
    class Son extends Father {
      say() {
      //   return '我是儿子';
      console.log( super.say());
      
      }
    }
    var yxf = new Son();
    yxf.say();//返回结果:我是儿子 就近原则
    //继承中的属性或方法查找原则:就近原则
    //1.继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类;
    //2.继承中,如果子类里面没有,就去查找父类有没有如果有就用父类
  </script>

子类继承父类,同时扩展自己的方法

注意:子类子构造函数使用super 必须放到this的前面(必须先调用父类的构造方法 再使用子类的构造方法)父亲永远是第一位的!!!!

<script>
    class Father {
      constructor(x,y){
        this.x = x;
        this.y = y;
      }
      sum() {
        console.log(this.x + this.y);
      }
    }
    // 子类继承父类加法 同时扩展减法
    class Son extends Father {
      constructor(x,y) {
        //利用super调用父类的构造函数
        //super 必须在子类this之前调用
        super(x,y);
        this.x = x;
        this.y = y;
      }
      sub() {
        console.log(this.x - this.y);
      }
    }
    var son = new Son(1,2);
    son.sum();
    son.sub();
  </script>
<script>
    //super关键字调用父类普通函数
    class Father {
      say() {
        return '我是爸爸';
      }
    }
    class Son extends Father {
      say() {
      //   return '我是儿子';
      console.log( super.say());
      }
    }
    var yxf = new Son();
    yxf.say();//返回结果:我是儿子 就近原则
    //继承中的属性或方法查找原则:就近原则
    //1.继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类;
    //2.继承中,如果子类里面没有,就去查找父类有没有如果有就用父类
  </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery获取上传文件的名称的正则表达式
May 21 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 Javascript
Vue实现购物车实例代码两则
May 30 #Javascript
vue实现购物车案例
May 30 #Javascript
vue.js实现简单购物车功能
May 30 #Javascript
vue实现简单学生信息管理
May 30 #Javascript
vue实现学生信息管理系统
May 30 #Javascript
vue实现在线学生录入系统
May 30 #Javascript
VueJS实现用户管理系统
May 29 #Javascript
You might like
PHP+javascript模拟Matrix画面
2006/10/09 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
用unescape反编码得出汉字示例
2014/04/24 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
Python简单实现安全开关文件的两种方式
2016/09/19 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
Python autoescape标签用法解析
2020/01/17 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
历史学专业毕业生求职信
2013/09/27 职场文书
自我鉴定思想方面
2013/10/07 职场文书
中专毕业自我鉴定
2013/10/16 职场文书
客服文员岗位职责
2013/11/29 职场文书
校园餐饮创业计划书
2014/01/10 职场文书
关于廉洁的广播稿
2014/01/30 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
会计学自荐信
2014/06/03 职场文书
机电一体化专业求职信
2014/07/22 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
新学期家长寄语2016
2015/12/03 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
深度学习详解之初试机器学习
2021/04/14 Python