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验证工具类搜集整理
Jan 16 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
微信小程序实现倒计时功能
Nov 19 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 上传功能实例代码
2010/04/13 PHP
php银联网页支付实现方法
2015/03/04 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
PHP 断点续传实例详解
2017/11/11 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
用JS写的一个TableView控件代码
2010/01/23 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
js制作提示框插件
2020/12/24 Javascript
Python计算程序运行时间的方法
2014/12/13 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
学习和使用python的13个理由
2019/07/30 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
Python编写单元测试代码实例
2020/09/10 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
C语言笔试题回忆
2015/04/02 面试题
综合办公室个人的自我评价
2013/12/22 职场文书
学习十八大精神心得体会
2013/12/31 职场文书
给国外客户的邀请函
2014/01/30 职场文书
艾滋病宣传标语
2014/06/25 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
爱的承诺书
2015/01/20 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
匿名信格式范文
2015/05/27 职场文书
Golang ort 中的sortInts 方法
2022/04/24 Golang