es6中class类的全方面理解(二)-继承

继承是面向对象中一个比较核心的概念。ES6 class的继承与java的继承大同小异,如果学过java的小伙伴应该很容易理解,都是通过extends关键字继承。相较于ES5当中通过原型链继承要清晰和方便许多。先上代码:

输出:

上面代码中,子类的constructor方法和say方法中,都出现了super关键字,它在这里表示父类的构造函数,用来新建父类的this对象。

子类必须在constructor方法中调用super方法,之后才能使用this关键字,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象。如果不调用super方法,子类就得不到this对象。在这一点上ES5的继承与ES6正好相反,ES5先创建自己的this对象然后再将父类的属性方法添加到自己的this当中。

如果子类First没有显式的定义constructor,那么下面的代码将被默认添加(不信可以尝试下,哈)。换言之,如果constructor函数中只有super的话,该constructor函数可以省略。

总结super在子类中一般有三种作用

实例

创建一个tab切换,页面中有三个按钮内容分别为“中”,“日”,“韩”。要求点击按钮,按钮以及切换的内容的背景颜色分别会变为红,黄,绿。

首先创建一个tab.html页面,内容为:

然后创建一个tag.js,内容为:

示例到现在还没有用到ES6的继承啊,别急!咱们再加个需求,在上面的切换示例基础上,再加一个内容为“娱乐”,“体育","财经"的切换。该切换需要在原来可点击的基础上实现自动切换功能,以及点击页面空白区域也可实现切换。

将tag.html页面修改为:

将tag.js修改为:

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180507A0M2G200?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券