關於ES6 Class語法相關總結
阿新 • • 發佈:2018-04-20
定義類 成對 new source ret str 創建 方法 ()
其實關於ES6,網上已經有很多的資料可供查詢,教程可參考阮一峰大神的ES6入門,本文只是對Class這一語法做一個總結:
一、Class基本語法
constructor方法
constructor是類的默認構造方法,new命令生成對象實例時,自動調用該方法。一個類必須有constructor方法,如果沒有顯式定義,一個空的constructor方法會被默認添加。
this的指向
類的方法內部如果含有this,它默認指向類的實例。註意,在static靜態方法中,this會指向當前類,不是實例;
靜態方法和實例方法
靜態方法是在方法名前面加static關鍵字,靜態方法不會被實例繼承,只能通過類來調用。如在實例上調用,則會拋出一個錯誤;註意,如果靜態方法包含this關鍵字,這個this指的是類,而不是實例。
實例方法可通過new關鍵字直接調用,同ES5一樣;
靜態屬性和實例屬性
靜態屬性指的是 Class 本身的屬性,即Class.propName,而不是定義在實例對象(this)上的屬性。ES6,定義類的屬性,不能定義在類裏面,需要在外面定義,見代碼:
Class Person{
}
Person.school = "Beijing University";
ES7中,可定義在類的內部,前面加static關鍵字即可;
類的實例屬性可以用等式,寫入類的定義之中。在實例上,可以直接調用這個屬性;
二、Class繼承
Class 可以通過extends關鍵字實現繼承,見代碼:
class A{
}
class B extends A{
}
子類必須在constructor方法中調用super方法,否則新建實例時會報錯。這是因為子類沒有自己的this對象,而是繼承父類的this對象,然後對其進行加工。如果不調用super方法,子類就得不到this對象。
父類的靜態方法,也會被子類繼承。
最後,見下面代碼:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
static log(text) {
console .log(`Helow ${text},I'm come from ${this.school}`)
}
toString() {
return (`My name is ${this.name},I'm ${this.age}`)
}
}
Person.school = "Beijing University";
Person.log("Jack");
// 創建一個實例
var person = new Person("Jason", 30); // ==> Helow Jack,I'm come from Beijing University
console.log(person.toString()) // ==> My name is Jason,I'm 30
console.log(person instanceof Person); // ==> true
console.log(Person instanceof Object); // ==> true
console.log(person.age); // ==> 30
console.log(person.hasOwnProperty('age')); // ==> true
console.log(person.hasOwnProperty('log')); // ==> false
console.log(Person.hasOwnProperty('log')); // ==> true
class People extends Person {
constructor(name, age, sex) {
super(name, age);
this.sex = sex;
this.string = super.toString();
}
speak() {
// console.log(super.toString(), this.total)
console.log(`${this.string}, My sex is a ${this.sex}`)
}
}
const people = new People('Tome', 30, 'Man');
people.speak(); // ==> My name is Tome,I'm 30, My sex is a Man
People.log("Lucy"); // ==> Helow Lucy,I'm come from Beijing University
console.log(people.hasOwnProperty('total')); // ==> false
關於ES6 Class語法相關總結