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来判断页面控件是否获取焦点
Jan 03 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
微信jssdk用法汇总
Jul 16 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
EL表达式截取字符串的函数说明
Sep 22 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
react native 文字轮播的实现示例
Jul 27 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
利用JavaScript写一个简单计算器
Nov 27 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几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
心扬JS分页函数代码
2010/09/10 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
python2 与python3的print区别小结
2018/01/16 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
Django用户身份验证完成示例代码
2020/04/03 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
省优秀教师事迹材料
2014/01/30 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
2014年教师工作总结
2014/11/10 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
看上去很美观后感
2015/06/10 职场文书
监守自盗观后感
2015/06/10 职场文书
零基础学java之循环语句的使用
2022/04/10 Java/Android