Javascript是一門與HTML和CSS緊密關聯的編程語言,作為一名開發人員無法不會JS。而在JS中,class(類)是面向對象編程的基礎,是一個關鍵的概念。那么,在JS中如何調用class呢?
要調用一個class,我們需要使用“new”關鍵字新建一個類的實例。這個新建的實例可以使用類中的方法和屬性。
class Person{ constructor(name, age){ this.name = name; this.age = age; } greeting(){ console.log(<code>Hello, my name is ${this.name}. I am ${this.age} years old.</code>); } } let personA = new Person("Peter", 25); personA.greeting(); // 輸出 "Hello, my name is Peter. I am 25 years old."
在上述代碼中,我們定義了一個Person類,該類有兩個屬性:name和age。同時它還有一個greeting方法,用來打招呼。在第六行中我們使用new關鍵字創建了一個personA實例,然后用該實例執行了greeting方法。
在JavaScript中,可以繼承一個類,使子類獲得父類的屬性和方法。當子類創建一個實例時,它可以使用父類和自身的方法和屬性。下面是一個Animal和Dog的例子。
class Animal{ constructor(name){ this.name = name; } eat(){ console.log(<code>${this.name} is eating.</code>); } } class Dog extends Animal{ constructor(name, breed){ super(name); this.breed = breed; } bark(){ console.log(<code>${this.name}(${this.breed}) is barking.</code>); } } let dogA = new Dog("Jack", "Golden Retriever"); dogA.bark(); // 輸出 "Jack(Golden Retriever) is barking." dogA.eat(); // 輸出 "Jack is eating."
在上面的代碼中,我們創建了一個Animal類和一個繼承自Animal的Dog類。Dog類有一個額外的屬性breed和一個bark方法。在Dog類的構造函數中,super關鍵字調用了Animal父類的構造函數,以便創建一個Animal實例。在第九行中我們使用了一個新的關鍵字extends以實現繼承。
在JS中,class也可以使用getter和setter方法,來獲取和設置屬性的值。getter和setter方法可以讓我們創建用起來像屬性一樣的方法。
class Rectangle{ constructor(width, height){ this._width = width; this._height = height; } get area(){ return this._width * this._height; } set width(newWidth){ this._width = newWidth; } } let rectA = new Rectangle(5, 10); console.log(rectA.area); // 輸出 50 rectA.width = 7; console.log(rectA.area); // 輸出 70
在上面的代碼中,我們創建了一個Rectangle類,它有一個構造函數,兩個屬性_width和_height。但是這兩個屬性前都有一個下劃線,這樣做是因為我們希望屬性可以被get和set方法訪問,我們需要在類中定義get和set方法。area方法使用get來獲取長方形面積,width方法使用set來設置長方形的寬度。由于area和width方法都可以像屬性一樣訪問,這使得代碼變得更加簡單易懂。
在JavaScript中,通過利用class,我們可以創建出更加復雜、功能更加強大的程序。這篇文章僅僅是一個JS class的簡單介紹,class還有很多高級用法,需要不斷學習和實踐。