Featured image of post 【JavaScript 變數】變數類型介紹:Class 類別

【JavaScript 變數】變數類型介紹:Class 類別

【JavaScript 變數】變數類型介紹:Class 類別

Photo by Mohammad Rahmani on Unsplash

函式方法

變數 說明
constructor 建構子
super 上層類別
instanceof 判斷是類為指定類別

建立類別

class Animal {
    constructor(name, color){
        this.name = name
        this.color = color
    }
    sayHi(){
        console.log(`[Animal] My name is「${this.name}」 My color is 「${this.color}」`);
    }
}
const animal = new Animal('Dog','white');

// [Animal] My name is「Dog」 My color is 「white」
animal.sayHi()

繼承類別

class Cat extends Animal {
    sayHi() {
        console.log(`[Cat] My name is「${this.name}」 My color is 「${this.color}」`);
    }
}
const KittyCat = new Cat('Kitty', 'pink');
// [Cat] My name is「Kitty」 My color is 「pink」
KittyCat.sayHi();

呼叫父類別方法

class Cat extends Animal {
    sayHi() {
        console.log(`[Cat] My name is「${this.name}」 My color is 「${this.color}」`);
        super.sayHi();
    }
}

const KittyCat = new Cat('Kitty', 'pink')
// [Cat] My name is「Kitty」 My color is 「pink」
// [Animal] My name is「Kitty」 My color is 「pink」
KittyCat.sayHi();

判斷是類為指定類別

console.log(KittyCat instanceof Cat) // true

console.log(KittyCat instanceof Animal) // true

Reference

Donate KJ 贊助作者喝咖啡

如果這篇文章對你有幫助的話,可以透過下面支付方式贊助作者喝咖啡,如果有什麼建議或想說的話可以贊助並留言給我
If this article has been helpful to you, you can support the author by treating them to a coffee through the payment options below. If you have any suggestions or comments, feel free to sponsor and leave a message for me!
方式 Method 贊助 Donate
PayPal https://paypal.me/kejyun
綠界 ECPay https://p.ecpay.com.tw/AC218F1
歐付寶 OPay https://payment.opay.tw/Broadcaster/Donate/BD2BD896029F2155041C8C8FAED3A6F8
All rights reserved,未經允許不得隨意轉載
Built with Hugo
Theme Stack designed by Jimmy