繼承是面向對象中一個比較核心的概念。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();
}
}