Class之间可以通过extends关键字,实现继承。

子类会继承父类的属性和方法。

class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class ColorPoint extends Point {
constructor(x, y, color) {
this.color = color; // ReferenceError
super(x, y);
this.color = color; // 正确
}
}

上面代码中,子类的constructor方法没有调用super之前,就使用this关键字,结果报错,而放在super方法之后就是正确的。

注意:ColorPoint继承了父类Point,但是它的构造函数必须调用super方法。

http://www.tuicool.com/articles/fQ7ZFfM

es6 Class的继承extends & super的更多相关文章

  1. ES6学习笔记--class,extends,super

    ES6引入了class(类)的概念.新的class写法让对象原型的写法更加清晰.更像面向对象编程的语法,也更加通俗易懂. class Animal{ constructor(){ this.type ...

  2. ES6 class 于 继承 extends

    之前构造函数,没有类的概念,ES6中有了class类这个东西. 简单的一个例子: 输出: 需要注意的是,语法换了,但是构造函数.构造函数的原型.实例的关系还是那样. 输出: 需要注意写法: 底层还是p ...

  3. ES6 extends继承及super使用读书笔记

    extends 继承 extends 实现子类的继承 super() 表示父类的构造函数, 子类必须在 constructor中调用父类的方法,负责会报错. 子类的 this 是父类构造出来的, 再在 ...

  4. ES6学习笔记<一> let const class extends super

    学习参考地址1  学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...

  5. 关于JS对象原型prototype与继承,ES6的class和extends · kesheng's personal blog

    传统方式:通过function关键字来定义一个对象类型 1234567891011 function People(name) { this.name = name}People.prototype. ...

  6. JAVA之旅(六)——单例设计模式,继承extends,聚集关系,子父类变量关系,super,覆盖

    JAVA之旅(六)--单例设计模式,继承extends,聚集关系,子父类变量关系,super,覆盖 java也越来越深入了,大家加油吧!咱们一步步来 一.单例设计模式 什么是设计模式? JAVA当中有 ...

  7. ES5和ES6中的继承 图解

    Javascript中的继承一直是个比较麻烦的问题,prototype.constructor.__proto__在构造函数,实例和原型之间有的 复杂的关系,不仔细捋下很难记得牢固.ES6中又新增了c ...

  8. ES6 class的继承使用细节

    ES6 class的继承与java的继承大同小异,如果学过java的话应该很容易理解,都是通过extends关键字继承. class Animal{ constructor(color){ this. ...

  9. 深入解析ES6 更易于继承的类语法的使用

    和其它面向对象编程语言一样,ES6 正式定义了 class 类以及 extend 继承语法糖,并且支持静态.派生.抽象.迭代.单例等,而且根据 ES6 的新特性衍生出很多有趣的用法. 一.类的基本定义 ...

随机推荐

  1. 10天学会phpWeChat——第七天:创建一个自适应PC网站+H5移动端的模块

    本教程基于phpWeChat核心框架1.1.0+版本.下载地址:http://s.phpwechat.com/app_38026ed22fc1a91d92b5d2ef93540f20 通过前面六讲的系 ...

  2. 4G基站如何查询

     例如:4600125086016801代码断码如下断:46001(营运商代码) 2508(十进位制9480,CGI代码,CGI相当于是4G的LAC) 6016801(十进位制100755457,eN ...

  3. 一起买beta版本文档报告汇总

    一起买beta版本文档报告汇总 031402401鲍亮 031402402曹鑫杰 031402403常松 031402412林淋 031402418汪培侨 031402426许秋鑫 一.Beta版本冲 ...

  4. WebBrowser处理AJAX生成的网页内容!

    WebBrowser处理AJAX生成的网页内容! 等待网页执行完毕(AJAX执行后). 使用webBrowser1.Document.Body.OuterHtml可以获取到AJAX产生的网页内容.

  5. CSS3 pointer-events属性

    在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个 ...

  6. MySQL三大数据类型

  7. delphi 一个线程和主界面的交互的演示代码

    求一个线程和主界面的交互的演示代码求一个线程和主界面的交互的演示代码.线程和主界面处于两个Unit.线程中的user中不能引用主窗口.我只是想学习一下,线程和主界面交互的方法.去网上查了好几天资料,能 ...

  8. oracle rac自动生成awr

    cat awr.sql ######EXEC P_AWR_REPORT('201604251000', '201604251100', 'D_OUTPUT', '', FALSE); FALSE为ra ...

  9. vs文件属性(生成操作)各选项功能(发布Web项目时使用)

    转自:http://www.cnblogs.com/paulhe/p/4490583.html 右击项目里的文件,选择属性(F4)会有[生成操作]的选项. 它提供了14项选择,如图: 在这说一下常用的 ...

  10. Zip文件压缩(加密||非加密||压缩指定目录||压缩目录下的单个文件||根据路径压缩||根据流压缩)

    1.写入Excel,并加密压缩.不保存文件 String dcxh = String.format("%03d", keyValue); String folderFileName ...