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 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
(转载)JavaScript中匿名函数,函数直接量和闭包
May 08 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
BootStrap TreeView使用实例详解
Nov 01 Javascript
详解vue中组件参数
Jul 09 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 Javascript
vue实现微信分享功能
Nov 28 Javascript
JS数据类型STRING使用实例解析
Dec 18 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 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
PHP5/ZendEngine2的改进
2006/10/09 PHP
PHP Stream_*系列函数
2010/08/01 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
Seajs的学习笔记
2014/03/04 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
JavaScript事件对象event用法分析
2018/07/27 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
Python Web开发模板引擎优缺点总结
2014/05/06 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
django修改models重建数据库的操作
2020/03/31 Python
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
口头翻译求职人自荐信
2013/12/07 职场文书
体育专业个人求职信范文
2013/12/27 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
创建文明学校实施方案
2014/03/11 职场文书
2014年防汛工作总结
2014/12/08 职场文书
荒岛余生观后感
2015/06/09 职场文书
通知怎么写?
2019/04/17 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python