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 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
直接生成打开窗口代码,不必下载
May 14 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
javascript类型转换使用方法
Feb 08 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
Feb 05 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
json.stringify()与json.parse()的区别以及用处
Jan 25 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
模拟flock实现文件锁定
2007/02/14 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
python实现探测socket和web服务示例
2014/03/28 Python
调试Python程序代码的几种方法总结
2015/04/28 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
解决python 输出是省略号的问题
2018/04/19 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
python支持多继承吗
2020/06/19 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
车间操作工岗位职责
2013/12/19 职场文书
签约仪式主持词
2014/03/19 职场文书
争先创优演讲稿
2014/09/15 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle