????????類class這個概念，在其他編程語言中很早就實現了，而JavaScript語言并沒有實現，一直以來，開發者都是使用函數function和原型prototype來模擬類class實現面向對象的編程。

?

????????接下來的學習，前端君默認大家都了解傳統的模擬類的寫法，如果你已經忘記了，ES6系列的第九節有介紹JavaScript的面向對象，點擊可以查看。

?

????????現在，ES6給我們帶來了好消息，它給JavaScript帶來了類class的概念。但實際上，JavaScript的類class本質上也是基于原型prototype的實現方式做了進一步的封裝，讓我們使用起來更簡單明了。也就是說它實際上也是函數function和原型prototype實現。

基本用法

???

????????那么，我們就使用ES6封裝后的類class來實現我們想要的效果，我們來學學它的基本用法。

????????聲明一個類的寫法：

? ?//定義一個叫Animal的類
? ?class Animal {
??? ? ? //構造函數constructor
??? ? ? constructor(color){
??????? ? ? this.color = color;
? ? ??? }
? ?}
? ?

????????代碼很簡短，我們通過關鍵字class來聲明一個名字叫Animal的類，可以看到類里面（花括號 {}里面）有一個叫constructor方法，它就是構造方法，構造方法里面的this，指向的是該類實例化后的對象，這就是實現了一個類的聲明。

?

????????其中，構造方法constructor是一個類必須要有的方法，默認返回實例對象；創建類的實例對象的時候，會調用此方法來初始化實例對象。如果你沒有編寫constructor方法，執行的時候也會被加上一個默認的空的constructor方法。

?

類的屬性和方法

????????了解了類的聲明和constructor構造函數的特點，我們下面來了解如何給類添加屬性和方法。

? ?class Animal {
??? ? ? //構造方法
? ? ? ?constructor(name){
??????? ? ? //屬性name
??????? ? ? this.name = name;
?? ? ?? }

??? ? ? //自定義方法getName
?? ? ?? getName(){
??? ? ????? return this.name;
??? ? ? }
? ?}
? ?

????????我們把類名后面的括號{ }里面的內容稱之為類體，我們會在類體內來編寫類的屬性和方法。上面的案例中，類體內有2個方法：constructor( )、getName()。

????????其中constructor方法是構造方法，在實例化一個類的時候被調用。constructor方法是必須的，也是唯一的，一個類體不能含有多個constructor構造方法。我們可以在方法里面自定義一些對象的屬性，比如案例中的name屬性。

????????此外，我們還自定義了一個getName( )方法，它屬于類的實例方法，實例化后對象可以調用此方法。

類的實例對象

????????

????????掌握了類的屬性和方法的寫法，接下來，我們學習如何創建對象和使用對象的實例方法：

? ?class Animal {
? ? ? ?//構造方法
? ? ? ?constructor(name){
??????? ? ? //屬性name
??????? ? ? this.name = name;
??? ? ? }

??? ? ? //自定義方法getName
??? ? ? getName(){
??????? ? ? return 'This is a'+this.name;
??? ? ? }
? ?}

? ?//創建一個Animal實例對象dog
? ?let dog = new Animal('dog');
? ?dog.name; //結果：dog
? ?dog.getName(); //結果：This is a dog

????????還是同一個類Animal，我們通過new來創建了實例對象dog，構造方法會把傳進去的參數“dog”通過this.name賦值給對象的name屬性，所以dog的name屬性為“dog”，對象dog還可以調用自己的實例方法getName( )，結果返回：“This is a dog”。

????????實例對象的創建有幾個要注意的事項：

• 必須使用new創建字來創建類的實例對象

• 先聲明定義類，再創建實例，否則會報錯

類的靜態方法

????????上面講到的自定義方法是實例方法，也就是實例化后的對象才可以調用的方法，比如上述案例的getName( )方法。除了實例方法以外，我們還可以定義一種直接使用類名即可訪問的方法，我們稱之為“靜態方法”。

????????我們一起來看看如何實現靜態方法的定義：

? ?class Animal {
??? ? ? //構造方法
? ? ? ?constructor(name){
??????? ? ? //屬性name
??????? ? ? this.name = name;
??? ? ? }

??? ? ? //自定義一個靜態方法
? ? ? ?static friends(a1,a2){
???????? ? ? ?return `${a1.name} and ${a2.name} are friends`;
??? ? ? }
? ?}

? ?//創建2個實例
? ?let dog = new Animal('dog');
? ?let cat = new Animal('cat');
? ?
? ?//調用靜態方法friends
? ?Animal.friends(dog,cat);
? ?//結果：dog and cat are friends

????????靜態方法和實例方法不同的是：靜態方法的定義需要使用static關鍵字來標識，而實例方法不需要；此外，靜態方法通過類名來的調用，而實例方法通過實例對象來調用。

????????上述案例的friends( )方法中，我們用到了字符串模板的知識，是ES6給String字符串帶來的新特性，第六節有講解，點擊可以查看。

?

類的繼承

????????說到類class，就不得不說類的繼承，ES6使用extends關鍵字來實現子類繼承父類，我們來演示一下：

? ?//父類Animal
? ?class Animal {//...}

? ?//子類Dog
? ?class Dog extends Animal {
?? ? ? ?//構造方法
? ? ? ?constructor(name,color){
??????? ? ? super(name);
??????? ? ? this.color = color;
??? ? ? }
? ?}
? ?

????????上面的案例中，我們定義兩個類，Animal類作為父類，Dog類作為子類，然后通過關鍵字extends來實現繼承，此外，我們還注意到一個關鍵字super，它相當于是父類中的this。

?

????????我們可以用super來引用父類，訪問父類的方法，我們來演示一下：

? ?//父類Animal
? ?class Animal {
??? ? ? //構造方法
? ? ? ?constructor(name){
??????? ? ? //屬性name
??????? ? ? this.name = name;
??? ? ? }
? ? ? ?
? ? ? ?//父類的自定義方法
? ? ? ?say(){
??????? ? ? return `This is a animal`;
??? ? ? }
? ?}


? ?//子類Dog
? ?class Dog extends Animal {
??? ? ? //構造方法
? ? ? ?constructor(name,color){
??????? ? ? super(name);
??????? ? ? this.color = color;
??? ? ? }

??? ? ? //子類的實例方法
? ? ? ?getAttritube(){
??????? ? ? return `${super.say()},
? ? ? ? ? ? ? ? ? ?name：${this.name},
? ? ? ? ? ? ? ? ? ?color:${this.color}`;
? ? ? ?}
? ?}

? ?//創建Dog的實例對象
? ?let d = new Dog("dog","black");

? ?//調用子類的Dog的實例方法
? ?d.getAttritube();
? ?//結果：This is a animal,
? ? ? ? ? ? ? ?name：dog,
? ? ? ? ? ? ? ?color:black

????????在父類中，我們定義了say方法，想要在子類中調用父類的say方法的話，我們使用super.say( )即可實現。

????????使用super有幾個要注意的事項：

• 子類必須在constructor方法中調用super方法

• 必須先調用super( )，才可以使用this，否則報錯

???????

????????以上就是關于類繼承的介紹，重點在于關鍵字extends和super，尤其是super的理解和使用，大家需要理解透徹。

?

????????如果是完全沒有接觸過類class和面向對象的初學者，看這一節也許不能完全理解透徹，你可以先翻看第九節的JavaScript面向對象的介紹。

?

本節小結

總結：ES6給JavaScript帶來了類class的概念和實現，實際上是對傳統實現方式的一種包裝，通過關鍵字class來定義類，通過extends來實現繼承，子類的super是父類的引用，在繼承中起著十分重要的作用。

總結

以上是生活随笔為你收集整理的第十九节：终于，JavaScript也有了类（class）的概念的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。