es6中class類的全方面理解(二)------繼承

繼承是面向對象中一個比較核心的概念委可。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先創(chuàng)建自己的this對象然后再將父類的屬性方法添加到自己的this當中椒拗。
如果子類First沒有顯式的定義constructor似将,那么下面的代碼將被默認添加(不信可以嘗試下获黔,哈)。換言之在验,如果constructor函數中只有super的話玷氏,該constructor函數可以省略。

constructor(name,color){
        super(name,color);// 調用父類的constructor(name,color)
}

總結super在子類中一般有三種作用

 1.作為父類的構造函數調用(已說明)
 2.在普通方法中腋舌,作為父類的實例調用(已說明)
 3.在靜態(tài)方法中盏触,作為父類調用(下篇文章會做介紹)

實例

創(chuàng)建一個tab切換,頁面中有三個按鈕內容分別為“中”块饺,“日”赞辩,“韓”。要求點擊按鈕授艰,按鈕以及切換的內容的背景顏色分別會變?yōu)榧t辨嗽,黃,綠淮腾。

首先創(chuàng)建一個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>

然后創(chuàng)建一個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的繼承啊谷朝,別急洲押!咱們再加個需求,在上面的切換示例基礎上圆凰,再加一個內容為“娛樂”诅诱,“體育","財經"的切換送朱。該切換需要在原來可點擊的基礎上實現自動切換功能娘荡,以及點擊頁面空白區(qū)域也可實現切換。

將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();
    }

}
—————END—————
喜歡本文的朋友們炮沐,歡迎關注公眾號 張培躍,收看更多精彩內容
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末回怜,一起剝皮案震驚了整個濱河市大年,隨后出現的幾起案子,更是在濱河造成了極大的恐慌玉雾,老刑警劉巖翔试,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異复旬,居然都是意外死亡垦缅,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進店門驹碍,熙熙樓的掌柜王于貴愁眉苦臉地迎上來壁涎,“玉大人凡恍,你說我怎么就攤上這事≌颍” “怎么了嚼酝?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長竟坛。 經常有香客問我闽巩,道長,這世上最難降的妖魔是什么担汤? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任涎跨,我火速辦了婚禮,結果婚禮上漫试,老公的妹妹穿的比我還像新娘。我一直安慰自己碘赖,他們只是感情好驾荣,可當我...
    茶點故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著普泡,像睡著了一般播掷。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上撼班,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天歧匈,我揣著相機與錄音,去河邊找鬼砰嘁。 笑死件炉,一個胖子當著我的面吹牛,可吹牛的內容都是我干的矮湘。 我是一名探鬼主播斟冕,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼缅阳!你這毒婦竟也來了磕蛇?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤十办,失蹤者是張志新(化名)和其女友劉穎秀撇,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體向族,經...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡呵燕,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了件相。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片虏等。...
    茶點故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡弄唧,死狀恐怖,靈堂內的尸體忽然破棺而出霍衫,到底是詐尸還是另有隱情候引,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布敦跌,位于F島的核電站澄干,受9級特大地震影響,放射性物質發(fā)生泄漏柠傍。R本人自食惡果不足惜麸俘,卻給世界環(huán)境...
    茶點故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望惧笛。 院中可真熱鬧从媚,春花似錦、人聲如沸患整。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽各谚。三九已至紧憾,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間昌渤,已是汗流浹背赴穗。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留膀息,地道東北人般眉。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像潜支,于是被迫代替她去往敵國和親煤篙。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,527評論 2 349

推薦閱讀更多精彩內容