JavaScript 靜態屬性與靜態方法

所謂靜態屬性和靜態方法都是通過類（建構函式）直接使用。

也就是說引用屬性或者呼叫方法的時候，沒必要首先建立類（建構函式）的物件例項。

首先感受看一下例項屬性與靜態屬性的區別：

[JavaScript] 純文字檢視 複製程式碼
class Antzone{}
let ant=new Antzone();
Antzone.jingtai; //靜態屬性
ant.shili; //例項屬性

對於靜態方法與靜態屬性也是同樣的道理，下面會進行詳細的介紹。

一.靜態屬性：

首先看一下靜態屬性，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
class Antzone{}
Antzone.webName="螞蟻部落";
console.log(Antzone.webName);

程式碼執行效果截圖如下：

上述程式碼為類Antozne新增靜態屬性webName。

可以看到，靜態屬性直接由類本身引用，而不是它的物件例項。

ES2015並沒有為類靜態屬性設計新的語法，也就是說不能在類的內部定義靜態屬性。

不過當前已經有靜態屬性的提案，一旦標準化，本教程將第一時間跟進。

二.靜態方法：

ES2015之前，如果想要定義靜態屬性，只能利於與前面介紹的靜態屬性相似的處理方式。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function Antzone(){}
Antzone.show=function(){
  console.log("螞蟻部落");
}
Antzone.show();

靜態方法是由類或者建構函式直接呼叫，而不是物件例項。

ES2015規定使用static關鍵字即可定義一個靜態方法。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
class Antzone{
  static show(){
    console.log("螞蟻部落");
  }
}
let ant=new Antzone();
Antzone.show();
ant.show();

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.通過關鍵字static定義靜態方法show。

（2）.直接通過類呼叫靜態方法，而不是物件例項呼叫。

（3）.ant.show之所以會報錯，它是呼叫的例項方法show，然而並沒有定義。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
class Antzone{
  static show(){
    console.log("螞蟻部落");
  }
  show(){
    console.log("螞蟻部落二");
  }
}
let ant=new Antzone();
Antzone.show();
ant.show();

程式碼執行完全正確，可以看到靜態方法與例項方法可以重名。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
class Antzone{
  static show(){
    this.done()
  }
  static done(){
    console.log("螞蟻部落一");
  }
  done(){
    console.log("螞蟻部落二");
  }
}
let ant=new Antzone();
Antzone.show();

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.使用例項物件呼叫方法，方法中的this指向此例項物件。

（2）.如果使用類呼叫靜態方法，那麼靜態方法中的this指向類本身。

（3）.既然show中的this指向類Antzone，那麼this.done()自然是呼叫的竟然方法。

（4）.自然列印結果是"螞蟻部落一"。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
class Antzone{
  static done(){
    console.log("螞蟻部落一");
  }
}
class C extends Antzone{}
C.done();

程式碼執行效果截圖如下：

列印結果是"螞蟻部落一"，可見靜態方法可以被子類所繼承。

靜態方法也可以被子類的super物件所呼叫，具體參閱JavaScript super一章節。

三.靜態屬性與靜態方法的繼承：

ES2015新增extends關鍵字，可以實現類之間的繼承。

不但可以繼承父類的例項屬性與例項方法，靜態屬性與靜態方法也會被繼承。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
class F{
  static func(){
    console.log("螞蟻部落");
  }
}
F.address="青島市南區";
class C extends F{}
C.func();
console.log(C.address);

程式碼執行效果截圖如下：

可以看到父類的靜態方法與靜態屬性都得到了繼承。

extends繼承的實質依然是基於原型鏈的，具有兩條繼承鏈，具體參閱JavaScript class 繼承一文。