在面向对象的编程语言中,基本上都是支持继承的,比如C++,和java,在ES6 中的类也引入的继承的概念,并且和java十分的类似,初学前端的ES6语法,我们在地方就介绍一下ES6 中的继承的语法。

继承

首先继承是类之间的关系。准确说是子类和父类之间的关系。比如我们可以创建类,美国人,中国人,印度人 等等 但是这些不同国家的人,他们也是存在共同点的,比如都属于人这一物种。所以我们可以找到这样继承关系

下面我们在ES6 中类中看:

class American{constructor(name,age){this.name=name;this.age=age;}
}
class Chinese{constructor(name,age){this.name=name;this.age=age;      }
}

当然这只是两个类,可能还有更多,比如印度人,俄罗斯人,等等那么这些不同国家人我们都要去写那么多吗,显然是太累的了

那么我们不得不去把其中的共同的特征提取出来也就是Person

class Person{constructor(name,age){this.name=name;this.age=age;}
}
class American extends Person{}
class Chinese extends Person{}

我们看继承的语法结构啊

class subClassName extends pClassName{

}

subClassName 表示子类的名称

pClassName 表示父类的名称

super

和java一样,我们可以在子类的构造器中调用super 方法,当然这也是必须的

如果我们在子类中声明构造器,那么必须在第一行 执行super的方法

如下:

class American extends Person{constructor(){super();}
}

当我需要传递参数的时候:

class American extends Person{constructor(name,age){super(name,age);}
}

实例方法

子类继承的不仅仅是父类的实例属性,还有实例方法

比如:

class Person{constructor(name,age){this.name=name;this.age=age;}sayHello(){console.log("你好");}
}
class American extends Person{constructor(name,age){super(name,age);}
}
class Chinese extends Person{constructor(name,age){super(name,age);}}
const american=new American("张三",18);
console.log(american.name);
console.log(american.sayHello());const chinese=new American("张三",18);
console.log(chinese.sayHello());

sayHello 是父类中实例方法,那么在实例化的子类中也可以去调用sayHello方法

上面就是对ES6 中继承的相关知识点,当然如果之前学习过面向对象的相关的知识,相信上面的内容你来说简直是小菜一碟

希望对你有所帮助

React 项目 -ES6 语法类的继承 (10)相关推荐

  1. React项目 --ES6 语法中的class (9)

    上一篇的博客中我们介绍了,如何设置React项目的根目录 连接地址:https://blog.csdn.net/datouniao1/article/details/119505562 要学习Reac ...

  2. React 16 Jest ES6 Class Mocks(使用ES6语法类的模拟) 实例三、四

    转载地址 React 16 Jest ES6 Class Mocks(使用ES6语法类的模拟) 实例三.四 项目初始化 git clone https://github.com/durban89/we ...

  3. React使用ES6语法重构组件代码

    首次使用react,要注意react不同版本库,是ES5还是ES6的写法,如何做到统一.下面对于ES6语法重构组件的代码如下: (1)原始代码: <script type="text/ ...

  4. 详解JavaScript中ES5和ES6的类、继承之间区别和联系

    导读: 很多JavaScript的初学者(比如说我)在刚开始学习这门语言的时候,往往会对函数.对象.类.继承这些概念感到迷茫和疑惑,感觉他们彼此之间长得十分相似,这就导致很难分清他们什么时候该怎么用. ...

  5. ES6——class类的继承与静态方法

    类的继承 通过关键字:super 代码示例: {//父类class Father{constructor(name){this.name = name;this.hobby = "抽烟,喝酒 ...

  6. react项目---基本语法字符串数组(6)

    在我们编写html代码的过程中,字符串数组是会经常遇到的,如何来正确的处理字符串数组在项目中也凸显的十分的重要,不说这些冠冕堂皇的废话了,直接来看内容 字符串处理 首先我们来看如何把一个字符串显示到页 ...

  7. 第十三周 项目3车辆类(继承)

    /* * Copyright (c) 2011, 烟台大学计算机学院 * All rights reserved. * 作 者:王静 * 完成日期:2013 年 6 月 2 日 * 版 本 号:v1. ...

  8. ES6——class类实现继承

    赶快悄悄的努力起来吧,不苒在这里衷心祝愿各位大佬都能顺利通过面试. 面试专栏分享,感觉有用的小伙伴可以点个订阅,不定时更新相关面试题:面试专栏 .

  9. 【C++进阶知识】C++类的继承和派生

    目录 C++进阶知识系列文章 C++类的继承和派生 基本语法 访问修饰符 构造函数和析构函数 覆盖父类的方法 虚函数和纯虚函数 示例代码 参考资料 C++进阶知识系列文章 C++类的继承和派生 在面向 ...

最新文章

  1. 【指标统计】指标统计相关配置项及说明
  2. 【剑指offer】_04 重建二叉树
  3. 互联网晚报 | 12月23日 星期四 | 芒果TV将上调会员价格;小红书宣布月活达2亿;荣耀首款折叠旗舰荣耀MagicV官宣...
  4. auto形式(更多功能)类结构实现
  5. Bootstrap 3 与 Foundation 5 的区别
  6. 召唤AI大神与病毒作战!Kaggle发起CORD-19数据集文本挖掘竞赛
  7. 月薪2500到年薪20万+,阿迪经历了些什么?
  8. Java滑动窗口实现当前窗口内最大值输出
  9. 移动pc多平台运营级家校互动平台系统源码转让
  10. 十二个“一”的演义小故事
  11. 关于_WIN32_WINNT
  12. 本科就学人工智能有意义吗?
  13. Spring统一日志处理(AOP)
  14. python 时间控制的几种方式
  15. 尹会生python课程_百家姓之尹姓氏起源、来历
  16. 云服务部署项目(一)——初入新世界大门
  17. 平衡二叉排序树--调整方法快速记忆方法(渣男丢妻弃子法)
  18. 容器神话 Docker 是如何一分为二的
  19. 操作系统复试面试问题
  20. 学计算机曲线救国,曲线救国 笔记本也定时开机

热门文章

  1. 有关YARN/MRv2 相关
  2. DBA们不得不知的数据库硬件RAID常识
  3. 回头再学Asp.net系列--基础篇(一)
  4. 3、Java常用关键字
  5. 极客新闻——04、WiFi万能钥匙万玉权:管理应该是“自下而上”
  6. 数据库跟缓存的双写一致性
  7. 介绍一款 API 敏捷开发工具,告别加班!
  8. 24张图带你彻底理解Java中的21种锁
  9. 查询太慢?看看ES是如何把索引的性能压榨到极致的!
  10. 深入理解 Java 虚拟机(第一弹) - Java 内存区域透彻分析