繼承是面向對象中一個比較核心的概念。ES6 class的繼承與java的繼承大同小異,若是學過java的小夥伴應該很容易理解,都是經過extends關鍵字繼承。相較於ES5當中經過原型鏈繼承要清晰和方便許多。先上代碼:html
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();
輸出:java
farther 我是child 個人名字叫大娃我是紅色顏色的
上面代碼中,子類的constructor方法和say方法中,都出現了super關鍵字,它在這裏表示父類的構造函數,用來新建父類的this對象。 子類必須在constructor方法中調用super方法,以後才能使用this關鍵字,不然新建實例時會報錯。這是由於子類沒有本身的this對象,而是繼承父類的this對象。若是不調用super方法,子類就得不到this對象。在這一點上ES5的繼承與ES6正好相反,ES5先建立本身的this對象而後再將父類的屬性方法添加到本身的this當中。 若是子類First沒有顯式的定義constructor,那麼下面的代碼將被默認添加(不信能夠嘗試下,哈)。換言之,若是constructor函數中只有super的話,該constructor函數能夠省略。ide
constructor(name,color){ super(name,color);// 調用父類的constructor(name,color) }
總結super在子類中通常有三種做用函數
1.做爲父類的構造函數調用(已說明) 2.在普通方法中,做爲父類的實例調用(已說明) 3.在靜態方法中,做爲父類調用(下篇文章會作介紹)
建立一個tab切換,頁面中有三個按鈕內容分別爲「中」,「日」,「韓」。要求點擊按鈕,按鈕以及切換的內容的背景顏色分別會變爲紅,黃,綠。this
首先建立一個tab.html頁面,內容爲:spa
<!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,內容爲:code
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的繼承啊,別急!我們再加個需求,在上面的切換示例基礎上,再加一個內容爲「娛樂」,「體育","財經"的切換。該切換須要在原來可點擊的基礎上實現自動切換功能,以及點擊頁面空白區域也可實現切換。xml
將tag.html頁面修改成:htm
<!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(); } }