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 pagination插件实现无刷新分页代码
Oct 13 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
layui实现数据表格自定义数据项
Oct 26 Javascript
如何开发一个渐进式Web应用程序PWA
May 10 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在线代理转向代码
2012/05/05 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
PHP中SESSION过期设置
2021/03/09 PHP
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
Python实现分段线性插值
2018/12/17 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
跟单文员岗位职责
2014/01/03 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
2014年教研组工作总结
2014/11/26 职场文书
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL