class類 - extends

時間 2020-05-08

標籤 class extends 简体版

原文原文鏈接

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

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。