class类 - extends
继承是面向对象中一个比较核心的概念。ES6 class的继承与java的继承大同小异，如果学过java的小伙伴应该很容易理解，都是通过extends关键字继承。相较于ES5当中通过原型链继承要清晰和方便许多。先上代码：
class Cucurbit{
constructor(name,color){
console.log("farther")
this.name=name;
this.color=color;
}
say(){
console.log("我的名字叫"+this.name+"我是"+this.color+"颜色的");
}
}
class First extends Cucurbit{
constructor(name,color){
super(name,color);// 调用父类的constructor(name,color)
}
say(){
console.log("我是child");
super.say();
}
}
var wa=new First("大娃","红色");
wa.say();
输出：
farther
我是child
我的名字叫大娃我是红色颜色的
上面代码中，子类的constructor方法和say方法中，都出现了super关键字，它在这里表示父类的构造函数，用来新建父类的this对象。
子类必须在constructor方法中调用super方法，之后才能使用this关键字，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象。如果不调用super方法，子类就得不到this对象。在这一点上ES5的继承与ES6正好相反，ES5先创建自己的this对象然后再将父类的属性方法添加到自己的this当中。
如果子类First没有显式的定义constructor，那么下面的代码将被默认添加(不信可以尝试下，哈)。换言之，如果constructor函数中只有super的话，该constructor函数可以省略。
constructor(name,color){
super(name,color);// 调用父类的constructor(name,color)
}
总结super在子类中一般有三种作用
1.作为父类的构造函数调用(已说明）
2.在普通方法中，作为父类的实例调用（已说明）
3.在静态方法中，作为父类调用（下篇文章会做介绍）
实例
创建一个tab切换，页面中有三个按钮内容分别为“中”，“日”，“韩”。要求点击按钮，按钮以及切换的内容的背景颜色分别会变为红，黄，绿。
首先创建一个tab.html页面，内容为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>切换</title>
<style>
#country input{
margin:10px;
padding:10px;
}
#country div{
width:300px;
height:300px;
}
</style>
</head>
<body>
<div id="country">
<input type="button" value="中">
<input type="button" value="日">
<input type="button" value="韩">
<div>中国</div>
<div>日本</div>
<div>韩国</div>
</div>
</body>
<script src="tag.js"></script>
<script>
new Tag("#country");
</script>
</html>
然后创建一个tag.js,内容为：
class Tag{
constructor(id){
this.id=document.querySelector(id);
this.btn=this.id.querySelectorAll("input");
this.div=this.id.querySelectorAll("div");
this.colorArr=["red","yellow","green"];
this.index=0;//显示元素的下标。
this.init();
}
init(){//初始化
this.hide();
this.show();
//给按钮增加事件
for(let i=0;i<this.btn.length;i++){
this.btn[i].onclick=function(){
this.index=i;
this.hide();
this.show();
}.bind(this)
}
}
hide(){//隐藏DIV,去除按钮背景色
for(var i=0;i<this.btn.length;i++){
this.btn[i].style.background=null;
this.div[i].style.display="none";
}
}
show(){//显示指定的DIV,按钮与DIV的背景颜色进行设置
this.div[this.index].style.display="block";//将DIV进行显示
//按钮与DIV的背景颜色进行设置
this.div[this.index].style.background=this.btn[this.index].style.background=this.colorArr[this.index];
}
}
示例到现在还没有用到ES6的继承啊，别急！咱们再加个需求，在上面的切换示例基础上，再加一个内容为“娱乐”，“体育"，"财经"的切换。该切换需要在原来可点击的基础上实现自动切换功能，以及点击页面空白区域也可实现切换。
将tag.html页面修改为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>切换</title>
<style>
#country input,#news input{
margin:10px;
padding:10px;
}
#country div,#news div{
width:300px;
height:300px;
}
</style>
</head>
<body>
<div id="country">
<input type="button" value="中">
<input type="button" value="日">
<input type="button" value="韩">
<div>中国</div>
<div>日本</div>
<div>韩国</div>
</div>
<div id="news">
<input type="button" value="娱乐">
<input type="button" value="财经">
<input type="button" value="体育">
<div>娱乐</div>
<div>财经</div>
<div>体育</div>
</div>
</body>
<script src="tag.js"></script>
<script>
new Tag({
id:"#country",
index:1,
colorArr:["red","green","blue"]
});
new autoTag({
id:"#news",
index:2,
colorArr:["black","pink","purple"]
});
</script>
</html>
将tag.js修改为：
class Tag{
constructor(obj){
this.id=document.querySelector(obj.id);
this.btn=this.id.querySelectorAll("input");
this.div=this.id.querySelectorAll("div");
this.colorArr=obj.colorArr;
this.index=obj.index;//显示元素的下标。
this.init();
}
init(){//初始化
this.hide();
this.show();
var that=this;
//给按钮增加事件
for(let i=0;i<this.btn.length;i++){
this.btn[i].onclick=function(ev){
this.index=i;
this.hide();
this.show();
ev.cancelBubble=true;
}.bind(this)
}
}
hide(){//隐藏DIV,去除按钮背景色
for(var i=0;i<this.btn.length;i++){
this.btn[i].style.background=null;
this.div[i].style.display="none";
}
}
show(){//显示指定的DIV,按钮与DIV的背景颜色进行设置
this.div[this.index].style.display="block";//将DIV进行显示
//按钮与DIV的背景颜色进行设置
this.div[this.index].style.background=this.btn[this.index].style.background=this.colorArr[this.index];
}
}
class autoTag extends Tag{
constructor(id){
super(id);
this.autoInit();
}
autoInit(){
document.body.onclick=this.change.bind(this);
setInterval(this.change.bind(this),5000)
}
change(){
this.index+=1;
if(this.index>=this.btn.length)
this.index=0;
this.hide();
this.show();
}
}
class类 - extends的更多相关文章
- Java如何解决脆弱基类（基类被冻结）问题
概述 大多数好的设计者象躲避瘟疫一样来避免使用实现继承(extends 关系).实际上80%的代码应该完全用interfaces写,而不是通过extends.“JAVA设计模式”一书详细阐述了怎样用 ...
- UML类图的关系
多态 泛化(Generalization) [定义]:是一种继承关系,表示一般与特殊的关系,它指定了子类如何特化父类的所有特征和行为 [UML表示]:带三角箭头的实线,箭头指向父类 [代码表现]:A类 ...
- Apache MINA 框架之默认session管理类实现
DefaultSocketSessionConfig 类 extends AbstractSocketSessionConfig extends AbstractIoSessionConfig imp ...
- JavaScript 定义类的最佳写法——完整支持面向对象（封装、继承、多态），兼容所有浏览器，支持用JSDuck生成文档
作者: zyl910 [TOC] 一.缘由 由于在ES6之前,JavaScript中没有定义类(class)语法.导致大家用各种五花八门的办法来定义类,代码风格不统一.而且对于模拟面向对象的三大支柱& ...
- Typescript---03 类、接口、枚举
传统的javascript程序使用函数和基于原型的继承来创建可重用的组件,从ECMAScript2015(ECMAScript 6)开始,可以使用基于类的面向对象方式. 一.类: 定义类(class) ...
- Java 中的“implements Runnable” 和“extends Thread”（转）
知识点 “implements Runnable” 和“extends Thread”的不同 具体分析 最近在学习Android中的Handler消息传递机制时,创建新线程有两种方式:一种是实现Run ...
- Java类的继承与多态特性-入门笔记
相信对于继承和多态的概念性我就不在怎么解释啦!不管你是.Net还是Java面向对象编程都是比不缺少一堂课~~Net如此Java亦也有同样的思想成分包含其中. 继承,多态,封装是Java面向对象的3大特 ...
- Java 中的“implements Runnable” 和“extends Thread”
知识点 “implements Runnable” 和“extends Thread”的不同 具体分析 最近在学习Android中的Handler消息传递机制时,创建新线程有两种方式:一种是实现Run ...
- TelephonyManager&GsmCellLocation类的方法详解
转载:http://blog.163.com/zhangzheming_282/blog/static/117920962011101944356511/ TelephonyManager类 主要提供 ...
随机推荐
- 机器学习 - 算法 - SVM 支持向量机
SVM 原理引入 支持向量机( SVM,Support Vector Machine ) 背景 2012年前较为火热, 但是在12年后被神经网络逼宫, 由于应用场景以及应用算法的不同, SVM还是需要 ...
- EasyUI下拉框级联
EasyUI用来实现后台界面还是可以的,毕竟面对的是小众群体而非广大的用户,简单为美.这里想聊的功能是一种下拉框的联动,比如我选中了下拉框A的某一项,那么下拉框B的选项就是甲乙丙丁,如果我选了A的另一 ...
- Arduino---HC-05 蓝牙模块
蓝牙基础知识回顾: (一)Arduino和HC-05连接 注意:Arduino通过TX与HC-05进行通信,而Arduino的电压为5V,HC-05的允许电压为3.3V.短时间通信无妨(长时间可能烧毁 ...
- 隐藏Nginx、Apache、PHP的版本号
Nginx: 在nginx配置文件nginx.conf中,加入以下代码: server_tokens off; Apache: 在apache配置文件httpd.conf中,加入以下代码: Serve ...
- ElasticSearch——Curator索引管理
简介 curator 是一个官方的,可以管理elasticsearch索引的工具,可以实现创建,删除,段合并等等操作.详见官方文档 功能 curator允许对索引和快照执行许多不同的操作,包括: 从别 ...
- Spring Boot学习笔记——搭建一个最简单的hello world
使用Spring Initializer新建项目 进入https://start.spring.io/新建一个项目,并下载下来. 这就是一个最基础的spring boot项目了. 我这里是基于spri ...
- iOS-MJRefresh框架
1.用MJRefresh框架实现上下拉刷新 1.1 如何使用这个框架,只需要告诉控件的scrollView是谁,就能将框架添加到我们的滚动视图中了 // 下拉刷新 MJRefreshHeaderVie ...
- 调用API修改Ocelot的配置文件
Ocelot是一个基于.net core的开源webapi服务网关开源项目,功能比较强大,Github项目地址为:https://github.com/ThreeMammals/Ocelot,关于Oc ...
- 【C/C++】【VS开发】结构体存储空间数据对齐说明
关于内存对齐 一: 1.什么是内存对齐 假设我们同时声明两个变量: char a; short b; 用&(取地址符号)观察变量a, b的地址的话,我们会发现(以16位CPU为例): 如果a的 ...
- 高级UI-RecyclerView间隔线添加
上文讲到了RecyclerView的简单使用,知道RecycleView是怎么使用的了,那么这一节将基于上一届的内容继续改进,在ListView中很轻松就能实现的间隔线,在RecycleView中也需 ...