本文例項講述了JS中類的靜態方法，靜態變數，例項方法，例項變數區別與用法。分享給大家供大家參考，具體如下：

1.類的靜態方法

先來段程式碼之後分析

// JS類靜態函式
function BaseClass() {
}
// 類新增add函式
BaseClass.add = function() {
  console.log("BaseClass add()方法被呼叫");
};
// 類方法(類的靜態函式)直接呼叫
// 類名.類方法名
BaseClass.add(); //BaseClass add()方法被呼叫
var instance = new BaseClass();
// 例項不能呼叫類方法(即類的靜態方法)
//instance.add();

a.類的靜態方法通過[類名.類方法名稱]賦值；
b.呼叫時用[類名.類方法名稱()]直接呼叫；
C.類的例項無法呼叫類的靜態函式。
原因：因在js中function也是物件，即給函式物件添加了一個函式

2.類的靜態成員

先來段程式碼之後分析

// JS類的靜態成員變數
function BaseClass(params) {
}
// 類新增靜態變數nameTest
BaseClass.nameTest = "jadeshu";
// 類的靜態變數直接呼叫
// 類名.類變數名
console.log(BaseClass.nameTest); // jadeshu
var instance = new BaseClass();
// 例項不能呼叫類的靜態成員變數)
console.log(instance.nameTest);  // undefined

a.類的靜態變數通過[類名.類變數名稱]賦值；
b.呼叫時用[類名.類變數名稱]直接呼叫；
C.類的例項呼叫類的靜態變數為undefined。
-----原因：因在js中function也是物件，即給函式物件添加了一個屬性

3.例項方法(兩種情況)

I.單個例項的方法

// JS的單個例項方法
function BaseClass() {
}
var instance1 = new BaseClass();
// 單個例項新增成員方法
instance1.add = function (params) {
  console.log("BaseClass類例項的add方法被呼叫" + params);
};
instance1.add(11222); // BaseClass類例項的add方法被呼叫11222
var instance2 = new BaseClass();
//instance2.add(); // Error: instance2.add is not a function

II.所有例項建立時都建立了同名的方法

// JS所有例項的共享方法
function BaseClass() {
  // 所有例項建立時都建立了同名的方法
  this.add = function (params) {
    console.log("BaseClass類例項的add方法被呼叫" + params);
  };
}
var instance1 = new BaseClass();
instance1.add(11); // BaseClass類例項的add方法被呼叫11
var instance2 = new BaseClass();
//例項1和例項2各有一個add函式的本地方法
instance2.add(22); // BaseClass類例項的add方法被呼叫22
console.log(instance1.add === instance2.add); // false

方法也是每個例項各存在一個，佔用記憶體，這既沒有必要，又浪費系統資源，所以不建議這樣新增例項的本地方法，或者在外部定義函式，然後直接賦給一個變數即可，就可以做到所有建立的例項都引用一份程式碼，但這樣做程式碼不優雅。

// JS所有例項的共享方法
function add(params){
  console.log("BaseClass類例項的add方法被呼叫" + params);
}
function BaseClass() {
  // 所有例項建立時都建立了同名的方法
  this.add = add;
}
var instance1 = new BaseClass();
instance1.add(11); // BaseClass類例項的add方法被呼叫11
var instance2 = new BaseClass();
//例項1和例項2則共用add函式的程式碼
instance2.add(22); // BaseClass類例項的add方法被呼叫22
console.log(instance1.add === instance2.add); // true

單個例項新增方法建議直接如第一種方法，如果是共享方法就加入prototype屬性上[即js中採用原型]。

4.例項變數(兩種情況)---即是例項的本地屬性

I.單個例項的變數

// JS的單個例項成員變數
function BaseClass() {
}
var instance1 = new BaseClass();
// 單個例項新增成員變數
instance1.nameTest = "jadeshu";
console.log(instance1.nameTest); // jadeshu
var instance2 = new BaseClass();
console.log(instance2.nameTest); // instance2.nameTest is undefined

II.所有例項建立的時候都建立了同名的各自本地屬性變數

// JS所有例項共享的成員變數
function BaseClass() {
  // 所有例項建立時都有的同名例項變數
  this.nameTest = "jadeshu";
}
var instance1 = new BaseClass();
instance1.nameTest = "shu"; // 改變例項1的變數nameTest的值為shu
console.log(instance1.nameTest);  // shu
var instance2 = new BaseClass();
//例項1和例項2各自都有一個nameTest
console.log(instance2.nameTest);; // jadeshu

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。