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 开天辟地入门篇一
Dec 09 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
Javascript学习指南
Dec 01 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
jquery validate表单验证插件
Sep 06 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
JS实现页面炫酷的时钟特效示例
Aug 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购物网站支付paypal使用方法
2010/11/28 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
php生成mysql的数据字典
2016/07/07 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
vue-cli之router基本使用方法详解
2017/10/17 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
使用python绘制常用的图表
2016/08/27 Python
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
python解析xml简单示例
2019/06/21 Python
Python3分析处理声音数据的例子
2019/08/27 Python
Python 使用多属性来进行排序
2019/09/01 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
Python字典dict常用方法函数实例
2020/11/09 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
最新计算机专业自荐信
2013/10/16 职场文书
年终考核评语
2014/01/19 职场文书
岗位说明书标准范本
2014/07/30 职场文书
小学生家长意见
2015/06/03 职场文书
教师素质教育心得体会
2016/01/19 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python