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 相关文章推荐
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
jquery 列表双向选择器之改进版
Aug 09 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 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中echo,print_r与var_dump区别分析
2014/09/29 PHP
PHP使用header()输出图片缓存实例
2014/12/09 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
javascript静态的url如何传递
2007/05/03 Javascript
动态刷新 dorado树的js代码
2009/06/12 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
JS实现随机点名器
2020/04/12 Javascript
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
python在指定目录下查找gif文件的方法
2015/05/04 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
python测试mysql写入性能完整实例
2018/01/18 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
自我鉴定范文300字
2013/10/01 职场文书
个人对照检查材料
2014/02/12 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
2014年教务工作总结
2014/12/03 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
高中班主任心得体会
2016/01/07 职场文书
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
python基础之模块的导入
2021/10/24 Python
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js