# PixiJS 切換場景（4）Extends、Super
###### tags: `PixiJS`
2022.10.25(Tue.)

## ▉ Introduction
為了學習切換場景，所以先看了[奔跑吧！台北：程式幕後分享](https://medium.com/@chiunhau/%E5%A5%94%E8%B7%91%E5%90%A7-%E5%8F%B0%E5%8C%97-%E7%A8%8B%E5%BC%8F%E5%B9%95%E5%BE%8C%E5%88%86%E4%BA%AB-e02d0a565559)的文章，裡面提到了一篇文章「[Tutorial : Handling game scenes and screen scaling with Pixi](http://ezelia.com/2013/pixi-tutorial)」，然後打開來後發現...我在看的程式碼語言是JavaScript嗎？（完全看不懂QQ）

### Keywords
整理一些從[Tutorial : Handling game scenes and screen scaling with Pixi](http://ezelia.com/2013/pixi-tutorial)中看見的Keywords：
module, export, class, constructer, super, extends

不過在學習上述關鍵字的路上，碰到了更多的關鍵字...所以決定乘著這個機會，一步步的把他補齊。

****

## ▉ Extends
首先我們先來創建一個class名叫cat

class Cat{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    eat(){
        return `${this.name} is eating.`
    }
    meow(){
        return "MEOWWWWWWWW"
    }
}

簡單測試一下，確認程式是沒有問題的


接著再創造一個dog的class

class Dog{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    eat(){
        return `${this.name} is eating.`
    }
    bark(){
        return "WOOOOOOOOF"
    }
}

同樣地先確認程式碼沒有出現問題


接著我們可以來看看以上兩段cat、dog class的程式碼，會發現這兩個class好多好多重複的程式，所以我們就會思考，是不是有甚麼辦法讓重複的內容不再重複呢？

這時候extends就出現了！顧名思義，就是要延伸！因此我們可以先建立一個額外獨立的class，將重複的內容集中到這裡頭，接著其他的class就可以去extend延伸去做使用了，其實也就是所謂的「繼承」。

那做法就如上方所述，先來建立個獨立的class，這裡給他取名叫做Pet

class Pet{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    eat(){
        return `${this.name} is eating.`
    }
}

有了這個獨立的class，接著就要讓cat、dog可以延伸去使用裡面的內容

class Cat extends Pet{
    meow(){
        return "MEOWWWWWWWW"
    }    
}
class Dog extends Pet{
    bark(){
        return "WOOOOOOOOF"
    }    
}

確認後是沒問題的


並且即便Cat、Dog 兩個class中沒有eat() method，仍然可以從延伸處Pet class取得這個method。


那假如在Dog class以及Pet class中同時存在相同的method，會執行哪一邊的method呢？現在來試試看！

class Pet{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    eat(){
        return `${this.name} is eating.`
    }
}

class Dog extends Pet{
    bark(){
        return "WOOOOOOOOF"
    }
    eat(){
        return `${this.name} scarfs his food.`
    }    
}

以上方為例子，會發現在Dog class以及Pet class中同時存在eat() method，而執行下來結果顯示，當我們呼叫`milk.eat()`時，他會先在Dog prototype中確認是否有eat() method，如果有就直接執行，否則就往下到Pet prototype找eat() method，如果再找不到就會往object prototype，再找不到就...他會讓你知道找不到這個method的。


## ▉ Super
先來個情境如下

class Pet{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    eat(){
        return `${this.name} is eating.`
    }
}

class Cat extends Pet{
    meow(){
        return "MEOWWWWWWWW"
    }    
}

但是我希望在Cat中增加不一樣、額外的資訊放在constructor（i.e.我不只要name, age，我還想要有個livesleft），那該如何寫？

最簡單粗暴的想法大概就如下方所示，直接再重複寫一遍後，加上我們額外要新增的東西，反正當建立一個Cat實例時，調用其中的`this.name`，會先從Cat class開始找起。

class Cat extends Pet{
    constructor(name, age, livesleft=9){
        this.name = name;
        this.age = age;
        this.livesleft = livesleft;
    }
    meow(){
        return "MEOWWWWWWWW"
    }    
}

不過我不希望重複寫一樣的內容，畢竟這樣的話extends還有甚麼意義呢？所以這時就出現了一個語法叫做super的關鍵字！

他會去參考我們所extends的class中的基礎類別來使用，用法如下所示

class Cat extends Pet{
    constructor(name, age, livesleft=9){
        super(name,age);
        this.livesleft = livesleft;
    }
    meow(){
        return "MEOWWWWWWWW"
    }    
}

****

### 參考資料
* [奔跑吧！台北：程式幕後分享](https://medium.com/@chiunhau/%E5%A5%94%E8%B7%91%E5%90%A7-%E5%8F%B0%E5%8C%97-%E7%A8%8B%E5%BC%8F%E5%B9%95%E5%BE%8C%E5%88%86%E4%BA%AB-e02d0a565559)
* [Tutorial : Handling game scenes and screen scaling with Pixi](http://ezelia.com/2013/pixi-tutorial)
* [The Web Developer Bootcamp 2022](https://www.udemy.com/course/the-web-developer-bootcamp/) U29：Prototypes, classes, OOP