JavaScript 例項屬性

典型的面嚮物件語言中，屬性可以分為例項屬性和靜態屬性。

本文會由靜態屬性引出例項屬性，並結合程式碼例項對其做一下著重介紹。

更多關於class 類內容參閱JavaScript class 類一章節。

一.靜態屬性：

直接通過類訪問的屬性就是靜態屬性。

ES2015之前並沒有靜態屬性的標準定義，不過大致可以模擬實現。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function Antzone(){
  // code
}
Antzone.age=5;
console.log(Antzone.age);

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

上述程式碼中，為Antzone新增了一個靜態屬性age。

看起來非常的不專業，與標準面嚮物件語言差距甚大。

ES2015新增靜態屬性概念，具體參閱JavaScript static 靜態方法和靜態屬性一章節。

二.例項屬性：

與靜態屬性對應的是例項屬性，它需要使用物件例項引用。

例項屬性可以包括：

（1）.原型鏈上的屬性。

（2）.非原型鏈的自有屬性。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function Antzone() {
  this.webName = "螞蟻部落";
}
Antzone.prototype.address="青島市南區";

class Mayi {
  constructor() {
    this.webName = "螞蟻部落";
  }
}

let ant = new Antzone();
let mayi = new Mayi();

console.log(ant.webName);
console.log(ant.address);
console.log(mayi.webName);

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

程式碼分析如下：

（1）.通過this直接定於建構函式中的是自有屬性，當然也是例項屬性，需要使用物件例項引用。

（2）.定義在原型鏈上的也屬於例項屬性，需要使用物件例項引用。

（3）.ES2015新增的類中，如果不考慮原型，屬性只能定義在constructor建構函式中，定義在其中的是自有屬性，也是例項屬性。類本質是函式，具有prototype原型，自然也可以使用原型定義屬性，類原型上的屬性也是例項屬性。

特別說明：新語法規定也可以在類中建構函式之外定義屬性，沒必要定義在建構函式之中。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
class Antzone {
  address="青島市南區";
  constructor() {
    this.webName = "螞蟻部落";
  }
}
let ant= new Antzone();
console.log(ant.address);

上述是新的寫法，不過當前瀏覽器支援度非常的低。

程式碼分析如下：

（1）.新寫法之前，在類中定義屬性需要放置於constructor建構函式之中。

（2）.新寫法可以在類中直接定義，沒必要放置於建構函式之中，也屬於例項屬性。

（3）.上述程式碼中address屬性就是採用新的語法形式，更加清晰。