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

  1. class Cucurbit{
  2.     constructor(name,color){
  3.         console.log("farther")
  4.         this.name=name;
  5.         this.color=color;
  6.     }
  7.     say(){
  8.         console.log("我的名字叫"+this.name+"我是"+this.color+"颜色的");
  9.     }
  10. }
  11. class First extends Cucurbit{
  12.     constructor(name,color){
  13.         super(name,color);// 调用父类的constructor(name,color)
  14.     }
  15.     say(){
  16.         console.log("我是child");
  17.         super.say();
  18.     }
  19. }
  20. var wa=new First("大娃","红色");
  21. wa.say();

输出：

  1. farther
  2. 我是child
  3. 我的名字叫大娃我是红色颜色的

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

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

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

  1. constructor(name,color){
  2.         super(name,color);// 调用父类的constructor(name,color)
  3. }

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

  1.  1.作为父类的构造函数调用(已说明）
  2.  2.在普通方法中，作为父类的实例调用（已说明）
  3.  3.在静态方法中，作为父类调用（下篇文章会做介绍）

实例

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

首先创建一个tab.html页面，内容为：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>切换</title>
  6.     <style>
  7.         #country input{
  8.             margin:10px;
  9.             padding:10px;
  10.         }
  11.         #country div{
  12.            width:300px;
  13.             height:300px;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18. <div id="country">
  19.     <input type="button" value="中">
  20.     <input type="button" value="日">
  21.     <input type="button" value="韩">
  22.     <div>中国</div>
  23.     <div>日本</div>
  24.     <div>韩国</div>
  25. </div>
  26. </body>
  27. <script src="tag.js"></script>
  28. <script>
  29.     new Tag("#country");
  30. </script>
  31. </html>

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

  1. class Tag{
  2.     constructor(id){
  3.         this.id=document.querySelector(id);
  4.         this.btn=this.id.querySelectorAll("input");
  5.         this.div=this.id.querySelectorAll("div");
  6.         this.colorArr=["red","yellow","green"];
  7.         this.index=0;//显示元素的下标。
  8.         this.init();
  9.     }
  10.     init(){//初始化
  11.         this.hide();
  12.         this.show();
  13.         //给按钮增加事件
  14.         for(let i=0;i<this.btn.length;i++){
  15.             this.btn[i].onclick=function(){
  16.                 this.index=i;
  17.                 this.hide();
  18.                 this.show();
  19.             }.bind(this)
  20.         }
  21.     }
  22.     hide(){//隐藏DIV,去除按钮背景色
  23.         for(var i=0;i<this.btn.length;i++){
  24.             this.btn[i].style.background=null;
  25.             this.div[i].style.display="none";
  26.         }
  27.     }
  28.     show(){//显示指定的DIV,按钮与DIV的背景颜色进行设置
  29.         this.div[this.index].style.display="block";//将DIV进行显示
  30.        //按钮与DIV的背景颜色进行设置
  31.         this.div[this.index].style.background=this.btn[this.index].style.background=this.colorArr[this.index];
  32.     }
  33. }

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

将tag.html页面修改为：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>切换</title>
  6.     <style>
  7.         #country input,#news input{
  8.             margin:10px;
  9.             padding:10px;
  10.         }
  11.         #country div,#news div{
  12.             width:300px;
  13.             height:300px;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18. <div id="country">
  19.     <input type="button" value="中">
  20.     <input type="button" value="日">
  21.     <input type="button" value="韩">
  22.     <div>中国</div>
  23.     <div>日本</div>
  24.     <div>韩国</div>
  25. </div>
  26. <div id="news">
  27.     <input type="button" value="娱乐">
  28.     <input type="button" value="财经">
  29.     <input type="button" value="体育">
  30.     <div>娱乐</div>
  31.     <div>财经</div>
  32.     <div>体育</div>
  33. </div>
  35. </body>
  36. <script src="tag.js"></script>
  37. <script>
  38.     new Tag({
  39.         id:"#country",
  40.         index:1,
  41.         colorArr:["red","green","blue"]
  42.     });
  43.     new autoTag({
  44.         id:"#news",
  45.         index:2,
  46.         colorArr:["black","pink","purple"]
  47.     });
  48. </script>
  49. </html>

将tag.js修改为：

  1. class Tag{
  2.     constructor(obj){
  3.         this.id=document.querySelector(obj.id);
  4.         this.btn=this.id.querySelectorAll("input");
  5.         this.div=this.id.querySelectorAll("div");
  6.         this.colorArr=obj.colorArr;
  7.         this.index=obj.index;//显示元素的下标。
  8.         this.init();
  9.     }
  10.     init(){//初始化
  11.         this.hide();
  12.         this.show();
  13.         var that=this;
  14.         //给按钮增加事件
  15.         for(let i=0;i<this.btn.length;i++){
  16.             this.btn[i].onclick=function(ev){
  17.                 this.index=i;
  18.                 this.hide();
  19.                 this.show();
  20.                 ev.cancelBubble=true;
  21.             }.bind(this)
  22.         }
  23.     }
  24.     hide(){//隐藏DIV,去除按钮背景色
  25.         for(var i=0;i<this.btn.length;i++){
  26.             this.btn[i].style.background=null;
  27.             this.div[i].style.display="none";
  28.         }
  29.     }
  30.     show(){//显示指定的DIV,按钮与DIV的背景颜色进行设置
  31.         this.div[this.index].style.display="block";//将DIV进行显示
  32.         //按钮与DIV的背景颜色进行设置
  33.         this.div[this.index].style.background=this.btn[this.index].style.background=this.colorArr[this.index];
  34.     }
  36. }
  37. class autoTag extends Tag{
  38.     constructor(id){
  39.         super(id);
  40.         this.autoInit();
  41.     }
  42.     autoInit(){
  43.         document.body.onclick=this.change.bind(this);
  44.         setInterval(this.change.bind(this),5000)
  45.     }
  46.     change(){
  47.         this.index+=1;
  48.         if(this.index>=this.btn.length)
  49.             this.index=0;
  50.         this.hide();
  51.         this.show();
  52.     }
  54. }

class类 - extends的更多相关文章

  1. Java如何解决脆弱基类（基类被冻结）问题

    概述  大多数好的设计者象躲避瘟疫一样来避免使用实现继承(extends 关系).实际上80%的代码应该完全用interfaces写,而不是通过extends.“JAVA设计模式”一书详细阐述了怎样用 ...

  2. UML类图的关系

    多态 泛化(Generalization) [定义]:是一种继承关系,表示一般与特殊的关系,它指定了子类如何特化父类的所有特征和行为 [UML表示]:带三角箭头的实线,箭头指向父类 [代码表现]:A类 ...

  3. Apache MINA 框架之默认session管理类实现

    DefaultSocketSessionConfig 类 extends AbstractSocketSessionConfig extends AbstractIoSessionConfig imp ...

  4. JavaScript 定义类的最佳写法——完整支持面向对象（封装、继承、多态），兼容所有浏览器，支持用JSDuck生成文档

    作者: zyl910 [TOC] 一.缘由 由于在ES6之前,JavaScript中没有定义类(class)语法.导致大家用各种五花八门的办法来定义类,代码风格不统一.而且对于模拟面向对象的三大支柱& ...

  5. Typescript---03 类、接口、枚举

    传统的javascript程序使用函数和基于原型的继承来创建可重用的组件,从ECMAScript2015(ECMAScript 6)开始,可以使用基于类的面向对象方式. 一.类: 定义类(class) ...

  6. Java 中的“implements Runnable” 和“extends Thread”（转）

    知识点 “implements Runnable” 和“extends Thread”的不同 具体分析 最近在学习Android中的Handler消息传递机制时,创建新线程有两种方式:一种是实现Run ...

  7. Java类的继承与多态特性-入门笔记

    相信对于继承和多态的概念性我就不在怎么解释啦!不管你是.Net还是Java面向对象编程都是比不缺少一堂课~~Net如此Java亦也有同样的思想成分包含其中. 继承,多态,封装是Java面向对象的3大特 ...

  8. Java 中的“implements Runnable” 和“extends Thread”

    知识点 “implements Runnable” 和“extends Thread”的不同 具体分析 最近在学习Android中的Handler消息传递机制时,创建新线程有两种方式:一种是实现Run ...

  9. TelephonyManager&GsmCellLocation类的方法详解

    转载:http://blog.163.com/zhangzheming_282/blog/static/117920962011101944356511/ TelephonyManager类 主要提供 ...

随机推荐

  1. 简易的CRM系统案例之Struts2+JSP+MySQL版本

    对简易的CRM系统案例之Servlet+Jsp+MySQL版本改进 Servlet优化为Struts2 学习 <?xml version="1.0" encoding=&qu ...

  2. 一百四十八：部署python项目之环境依赖

    环境:centos7 + python3.6 准备工作,生成项目requirements.txt文件,用于存放第三方库和版本信息:pip freeze > requirements.txt,并且 ...

  3. jmeter 查看结果树，获取响应体写法校验是否提取写法是否正确的方法

    JSON Path Expression里面写入提出值的写法,点击Test测试提取

  4. 爆库记录（X-Forwarded-For注入漏洞实战 记录）

    环境位置: https://www.mozhe.cn/bug/detail/QWxmdFFhVURDay90L0wxdmJXSkl5Zz09bW96aGUmozhe 参考: http://www.fr ...

  5. SM30维护视图屏蔽按钮

    标准维护视图  GUI状态  ESLG 编辑按钮 AEND 达到效果 DATA: l_act TYPE char1, l_name TYPE dd02v-tabname. DATA: lt_vimex ...

  6. spark：neither spark.yarn.jars not spark.yarn.archive is set

    1.Spark启动警告:neither spark.yarn.jars not spark.yarn.archive is set,falling back to uploading librarie ...

  7. 【Leetcode_easy】703. Kth Largest Element in a Stream

    problem 703. Kth Largest Element in a Stream 题意: solution1: priority_queue这个类型没有看明白... class KthLarg ...

  8. Java基础教程：IDEA单元测试

    Java基础教程:IDEA单元测试 环境配置 使用idea IDE 进行单元测试,首先需要安装JUnit 插件. 安装JUnit插件步骤 File-->settings-->Plguins ...

  9. 超详细的RNN代码实现(tensorflow)

    一.学习单步的RNN:RNNCell 如果要学习TensorFlow中的RNN,第一站应该就是去了解“RNNCell”,它是TensorFlow中实现RNN的基本单元,每个RNNCell都有一个cal ...

  10. 项目中常用的19条MySQL优化技巧

    原文:https://segmentfault.com/a/1190000012155267 声明一下:下面的优化方案都是基于 “ Mysql-索引-BTree类型 ” 的 一.EXPLAIN 做My ...