iT邦幫忙

2022 iThome 鐵人賽

DAY 11
0
Modern Web

Node.js系列 第 11

DAY 11 類別(Class)宣告和繼承

  • 分享至 

  • xImage
  •  

DAY 11 類別(Class)宣告和繼承

{%hackmd BJrTq20hE %}

tags: 第 14 屆 iThome 鐵人賽 (2022)

類別

嚴格意義上來講,Node.js的類別不能算類別,他只是一個函數的集合體,加一些成員變數,不過我們接下來都稱其為「類別」,產生實體的叫「物件」。因為類別具有很多函數的特性,或說類別的本質是一個函數。接下來我會介紹類別的靜態方法、原型方法、實例方法、產生實體、並講解類別的繼承。

基礎用法

在ES6中,class(類別)作為物件的範本被引用,可以拓過class關鍵字定義類別。class的本質是function。可以看作一個語法糖,和Python一樣,讓物件原型的寫法更加清晰,更像物件導向程式設計的語法。

//匿名類別
let Example = class{
    constructor(a){
        this.a=a;
    }
}
//命名類別
let Example = class Example{
    constructor(a){
        this.a=a;
    }
}

可以看出類別運算式可以分為匿名或命名,匿名即為class{}的部分,命名為class Example{}的部分,這裡用的建構子是類別的預設方法,會建立類別的產生實體物件時會被呼叫。

類別宣告

class Example{
    constructor(a){
        this.a = a;
    }
}

要記得,宣告的類別不可以重複,宣告同一個類別將顯示例外資料。

類別的靜態宣告

class Example{
    static sum(a, b){
        console.log(a+b);
    }
}
Example.sum(1,2);  //3

類別的原型宣告方法

class Example{
    sum(a,b){
        console.log(a+b);
    }
}
let exam = new Example();
exam.sum(1,2) //3    

類別的實例方法範例:

class Example{
    constructor(){
        this.sum = (a, b) =>{
            console.log(a+b)
        };
    }
}

類別的產生實例必須透過new關鍵字

class Example{
    constructor(a, b){
        this.a = a;
        this.b = b;
        console.log ('Example');
    }
    sum(){
        return this.a + this.b;
    }
}
let exam1 = new Example(2, 1);

封裝與繼承

在「類別」的內部可以使用get和set關鍵字,對某個屬性設定存值函數和設定值函數,擷取該屬性的存取行為。

class Example{
    constructor(a, b){
        this.a = a;
        this.b = b;
        
    }
    get a(){
        console.log('getter');
        return this.a;
    }
    set a(a){
        console.log('setter');
        this.a=a;
    }
}
let exam1 = new Example(1,2);  //只輸出setter,不會呼叫getter 方法
console.log(exam._a)          //1 可以直接存取

上述程式中,a屬性有對應的存值函數和設定值函數,因此設定值和讀取行為都被自訂了。存值函數和設定值函數是設定在屬性的Descriptor物件上的。

結論

這篇多花了點時間講解類別和各種型態,因為class對接下來的實作會有很多,所以理解透徹是Node.js的基本版,接下來就沒有閒下來的時間了,學習的難度會直接上升一個Level,希望11天後的各位(包括我)能夠跟上前人的腳步,來到Event& Event emitter / Buffer class 將我們所學的函數和類別帶入更高階層然後到本篇第一份實作【打造屬於自己的Line/Discord機器人】,到這裡也才到路途的一半,接下來我會帶各位更加理解Web Socket 和 Express 並利用restful API創造網頁,最後第20~30天連結SQL資料庫並打造網頁的Backend。

下一篇【Buffer類別及其方法】


上一篇
DAY 10 JS物件方法與屬性
下一篇
DAY 12 Buffer類別及其方法
系列文
Node.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言