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里的each使用方法详解
Dec 22 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
checkbox选中与未选中判断示例
Aug 04 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
jquery ajax分页插件的简单实现
Jan 27 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
JavaScript十大取整方法实例教程
Dec 03 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 Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
BootStrap中的表单大全
2016/09/07 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
React中的refs的使用教程
2018/02/13 Javascript
Vue的轮播图组件实现方法
2018/03/03 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
详解React中setState回调函数
2018/06/14 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
python实现多线程抓取知乎用户
2016/12/12 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
Python如何读写字节数据
2020/08/05 Python
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
ECHT官方网站:男女健身服
2020/02/14 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
优秀演讲稿范文
2013/12/29 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
给校长的建议书
2014/03/12 职场文书
垃圾桶标语
2014/06/24 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
2014年政教处工作总结
2014/12/20 职场文书
2016高考感言
2015/08/01 职场文书
《西门豹》教学反思
2016/02/23 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技