今天我們來聊一下javascript中的class:
在javascript出現ES6之前,我們創建一個對象的方式通常是通過定義函數來實現:
function Person(name,age){ this.name = name; this.age = age; } Person.prototype.sayHello = function(){ console.log("Hello, my name is "+this.name+", I'm "+this.age+" years old."); } var person = new Person("John",20); person.sayHello(); //輸出:Hello, my name is John, I'm 20 years old.
上面代碼定義了一個Person類,通過函數的方式實現了初始化和公共方法的定義。在ES6中,javascript引入了class的概念,我們可以更直觀、簡潔地定義對象:
class Person{ constructor(name,age){ this.name = name; this.age = age; } sayHello(){ console.log("Hello, my name is "+this.name+", I'm "+this.age+" years old."); } } let person = new Person("John",20); person.sayHello(); //輸出:Hello, my name is John, I'm 20 years old.
上面代碼定義了一個名為Person的類,有兩個屬性:name和age,一個方法:sayHello。用class方式定義一個對象看上去更直觀簡潔。我們可以使用extends關鍵字繼承類:
class Student extends Person{ constructor(name,age,gender){ super(name,age); this.gender = gender; } study(){ console.log("I'm studying."); } } let student = new Student("Alice",18,"female"); student.sayHello(); //輸出:Hello, my name is Alice, I'm 18 years old. student.study(); //輸出:I'm studying.
上面代碼中,我們定義了一個Student類繼承自Person類,并且定義了一個新的屬性gender和方法study。注意在子類構造函數中使用super關鍵字調用父類構造函數。
class也支持getter和setter方法:
class Rectangle{ constructor(width,height){ this.width = width; this.height = height; } get area(){ return this.width * this.height; } set area(value){ this.width = value; this.height = value; } } let rect = new Rectangle(10,5); console.log(rect.area); //輸出:50 rect.area = 20; //調用set方法 console.log(rect.width); //輸出:20 console.log(rect.height); //輸出:20
上面代碼定義了一個Rectangle類,包含width和height屬性和area getter和setter方法。get方法返回類的面積,set方法設置寬和高,使其成為正方形。
總之,class是javascript的一個重要特性,使得我們可以用更直觀簡潔的方式定義對象和繼承關系。使用class可以減少代碼量,提高代碼可讀性,從而提高開發效率。