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 相关文章推荐
Js 时间间隔计算的函数(间隔天数)
Nov 15 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
Apr 10 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
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
优化使用mysql存储session的php代码
2008/01/10 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
php-msf源码详解
2017/12/25 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
7个Javascript地图脚本整理
2009/10/20 Javascript
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
Python基础中所出现的异常报错总结
2016/11/19 Python
Python中单例模式总结
2018/02/20 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
高山背包:High Sierra
2017/11/23 全球购物
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
公司联欢晚会主持词
2014/03/22 职场文书
健康教育评估方案
2014/05/25 职场文书
消防安全宣传标语
2014/06/07 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
优秀班组事迹材料
2014/12/24 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
初中思品教学反思
2016/02/20 职场文书
MySQL GTID复制的具体使用
2022/05/20 MySQL