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 浏览器验证代码(来自discuz)
Jul 17 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
JS简单实现点击复制链接的方法
Aug 03 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
详解如何运行vue项目
Apr 15 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采用curl实现伪造IP来源的方法
2014/11/21 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
封装了jQuery的Ajax请求全局配置
2015/02/05 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
Python httplib模块使用实例
2015/04/11 Python
Python之父谈Python的未来形式
2016/07/01 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
Python paramiko模块的使用示例
2018/04/11 Python
python查看列的唯一值方法
2018/07/17 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
Python tkinter实现日期选择器
2021/02/22 Python
职业生涯规划书的格式
2013/12/29 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
第二次离婚起诉书
2015/05/18 职场文书
父母教会我观后感
2015/06/17 职场文书
初一年级组工作总结
2015/08/12 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP