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开发包大全整理
Dec 22 Javascript
JavaScript 事件属性绑定带参数的函数
Mar 13 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
JavaScript中的DSL元编程介绍
Mar 15 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
js自制图片放大镜功能
Jan 24 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 Javascript
ES6 async、await的基本使用方法示例
Jun 06 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
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上传大文件失败的原因及应对策略
2015/10/20 PHP
php短信接口代码
2016/05/13 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
JVM是一个编译程序还是解释程序
2012/09/11 面试题
八一建军节活动方案
2014/02/10 职场文书
学生打架检讨书
2014/02/14 职场文书
党员创先争优活动总结
2014/05/04 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书