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 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 Javascript
js 毫秒转天时分秒的实例
Nov 17 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
原生js实现点击轮播切换图片
Feb 11 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
探讨如何把session存入数据库
2013/06/07 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
PHP getName()函数讲解
2019/02/03 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
JS实现吸顶特效
2020/01/08 Javascript
Python 获得13位unix时间戳的方法
2017/10/20 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
详解Python 循环嵌套
2020/07/09 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
中秋节超市促销方案
2014/01/30 职场文书
军人离婚协议书样本
2014/10/21 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python