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 使用手册(二)
Sep 23 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
vue生命周期与钩子函数简单示例
Mar 13 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 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
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
php实现session共享的实例方法
2019/09/19 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
jQuery 动态酷效果实现总结
2009/12/27 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
Python正则表达式匹配中文用法示例
2017/01/17 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
英语自荐信范文
2013/12/11 职场文书
致短跑运动员广播稿
2014/01/09 职场文书
岗位职责说明书模板
2014/07/30 职场文书
作弊检讨书
2015/01/27 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
出生证明格式
2015/06/15 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android