ES6-物件導向class

一個class裡面會有兩個基本東西,「屬性」跟「方法」

  • 屬性(property):屬於物件的變數
  • 方法(method):屬於物件的函式

在 ES6 的 class 語法中,只能定義方法,因此必須使用建構子來定義屬性

  • 建構子(Constructor):是一個特別的方法,在「建構實體」時,會被執行的程式內容

在下方 Dog 案例中:

  • age 是屬性
  • bark 是方法
  • Dog 類繼承 Animal 的屬性跟方法(Dog 的父類別是 Animal)
  • new Dog() 來建構實體時,會執行 constructor()
    1
    2
    3
    4
    5
    6
    7
    8
    9
    class Dog extends Animal{//Animal
    constructor(){
    this.age = 0;
    }
    bark(){
    console.log('woof');
    }
    }
    const spot = new Dog();//當new Dog()時,會執行建構子

使用babel class-properties plugin

  • 使用該 plugin 時,則可以「不需要」透過建構子來定義屬性
  • 且可以使用箭頭函式定義方法,箭頭函式則裡面的 this 等於一開始實體new出來時綁定的物件
    1
    2
    3
    4
    5
    6
    7
    8
    class Dog extends Animal{
    age = 0;
    bark =()=>{
    console.log("bark")
    console.lg(this);//this
    }
    }
    const spot = new Dog();

補:在React中,會使用ES6的class語法,來定義組件(component)

© 2020 Leah's Blog All Rights Reserved. 本站访客数人次 本站总访问量
Theme by hiero