ES6之Class類知識點總結(十三)
好的文章就要分享出來,讓更多的小夥伴看到、嗯、繼續推薦阮一峰大神的ES6文章,真的很棒,關於Class類的知識,想要了解的更清楚的建議到大神的官網走一走http://es6.ruanyifeng.com/#docs/class-extends
我們知道ES5及之前是沒有類的概念的,生成例項的方法是通過建構函式,ES6引入了類的概念,通過class關鍵字,可以定義類
class Person{ constructor(name,job){ this.name = name; this.job = job; } sayJob(){ console.log(`${this.name} is a ${this.job}`); } } var person = new Person("leo","boss"); person.sayJob();//leo is a boss
嗯、分析一下上面的小例子
constructor方法就是構造方法,this關鍵字代表例項物件(此處就是person),該類中除了構造方法,還定義了一個sayJob方法。嗯、有兩個注意點:
- 定義類的方法的時候,前面不需要加function關鍵字
- 方法之間不需要用逗號分隔(加了反而會報錯)
使用類的時候,也是直接對類使用new命令,跟建構函式的用法完全一致。類的所有方法都是定義在類的prototype屬性上面,在類的例項上面呼叫方法,其實就是呼叫原型上的方法。
由於類的方法都是定義在prototype物件上面,所以類的新方法可以新增在prototype物件上面。Object.assign方法可以很方便地一次向類新增多個方法。
class Person{ constructor(name,job){ this.name = name; this.job = job; } sayJob(){ console.log(`${this.name} is a ${this.job}`); } } Object.assign(Person.prototype,{toLike(){console.log(`${this.name} like running`)},toDo(){return this.job;}}); var person = new Person("leo","boss"); person.sayJob();//leo is a teacher person.toLike();//leo like running console.log(person.toDo());//boss
還是針對上面的例子,看下面的程式碼
console.log(typeof Person);//function
console.log(Person === Person.prototype.constructor);//true
從結果中可以得出結論:類的資料型別就是函式,類本身就指向建構函式
注意:類的內部定義的所有方法,都是不可以列舉的,與ES5一樣,類的所有例項共享一個原型物件
類不存在變數提升
new fn(); // ReferenceError
class fn{}
fn類使用在前,定義在後面,會報錯,因為類不存在變數提升
this指向問題
類的方法內部,如果含有this,它預設指向類的例項,但是必須非常小心,一旦單獨使用該方法,很可能會報錯
解決辦法:
- 在構造方法中繫結this
- 使用箭頭函式(箭頭函式,函式體內的this物件,就是定義時所在的物件,而不是使用時所在的物件)
- 使用Proxy,獲取方法的時候,自動繫結this。
Class繼承
class可以通過extends關鍵字實現繼承,子類通過extends關鍵字,可以繼承父類的所有方法和屬性,子類必須在constructor方法中呼叫super方法,它表示父類的建構函式,用來新建父類的this物件。這是因為子類沒有自己的this物件,而是繼承父類的this物件,然後對其加工,如果不呼叫super方法,子類就得不到this物件
注意:父類的靜態方法也會被子類繼承
class Person{
constructor(name,job){
this.name = name;
this.job = job;
this.sayJob = this.sayJob.bind(this);
}
sayJob(){
return `${this.name} is a ${this.job}`;
}
}
class Son extends Person{
constructor(name,job,city){
super(name,job,city);
this.city = city;
}
sayJob(){
return console.log(super.sayJob()+ ` living in ${this.city}`);
}
}
var son = new Son("leo","boss","beijing");
son.sayJob();//leo is a boss living in beijing
注意:在子類的建構函式中,只有呼叫super之後,才可以使用this關鍵字,否則會報錯。這是因為子類例項的構建,是基於對父類例項加工,只有super方法才能返回父類例項
判斷一個類是否繼承了另一個類的方法:Object.getPrototypeOf()(該方法可以從子類上獲取父類)
console.log(Object.getPrototypeOf(Son)===Person);//true