ES6引入的class類,讓JAVAScript具有更加接近面向對象編程的寫法。
ES6之前,想要生成一個實例,只能通過new關鍵字來調用構造函數來完成。
ES6 使用class來定義類,在類的constructor構造函數中定義實例的屬性。原型屬性直接在class內部定義并且賦值,類的原型函數的聲明,是和constructor構造函數屬于同一個層級,并且省略了function關鍵字。比如:
class Person{
// 原型屬性
publicName = "duxin";
constructor(name,age){
//實例屬性
this.name = name;
this.age = age;
}
//原型函數
getName(){
return this.name;
}
}
// 通過class創建實例
const child = new Person("duxinyues",18);
console.log(child.getName()); // duxinyues
在ES5中的寫法為:
//構造函數
function Person(name,age){
//實例屬性
this.name = name;
this.age = age;
}
Person.prototype.publicName = "duxin";
Person.prototype.getName = function(){
return this.name
}
class中有構造函數、靜態屬性和函數:
constructor構造函數
constructor構造函數,是class類中必須有的一個函數,如果沒有手動添加,class也會自動加上一個空的構造函數。
構造函數默認返回對象的實例,也就是默認了this的指向。也可以手動修改構造函數的返回值。
靜態屬性和函數
如果使用static關鍵字來修飾靜態屬性的話,那么實例就不能訪問該屬性,這個屬性只能通過類自身來訪問。比如:
class Foo {
static name = "duxin";
static getName() {
return this.name
}
}
console.log(Foo.getName()); //duxin
靜態函數中的this指向是類本身
Class繼承
ES6新增的extends關鍵字,可以快速實現類的繼承。
在子類的constructor構造函數中,使用super函數來執行父類的構造函數,然后再來執行子類。比如:
class Parson {
constructor() {
this.name = "duxin"
}
}
class Child extends Parson {
constructor() {
super();
this.age = "908"
}
}
const child = new Child()
console.log(child.name); // duxin
這就是ES6中class的使用。