javascript如何實現類的功能

在ES6之前的版本是沒有class類的。

但是javascript程式設計方式非常的靈活，儘管沒有class類的定義，不過依然能夠實現物件導向的程式設計方式。

一.定義類並建立類的例項物件:

我們可以通過function函式來實現類:

[JavaScript] 純文字檢視 複製程式碼
function Shape() {
  var x = 1;
  var y = 2;
}

上面是一個函式的宣告，但是在javascript中完全可以把它當做一個類來看待。

下面建立這個類的例項物件，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var aShape = new Shape();

二.定義公有屬性和私有屬性:

在上面的程式碼中我們建立了Shape類的物件例項，但是我們並不能訪問內部的x和y屬性:

[JavaScript] 純文字檢視 複製程式碼
function Shape() {
  var x = 1;
  var y = 2;
}
var aShape = new Shape();
console.log(aShape.x);

上面的程式碼輸出值是undefined。我們可以認為使用var宣告的是私有屬性。

需要使用this關鍵字來定義公有的屬性，程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
function Shape(){
  this.x = 1;
  this.y = 2;
}
var aShape = new Shape();
console.log(aShape.x);

上面的屬性就可以正常訪問了。

三.定義公有方法和私有方法:

在javascript中，函式是Function類的例項，Function間接繼承自Object，所以，函式也是一個物件，因此，我們可以用賦值的方法建立函式，當然，我們也可以將一個函式賦給類的一個屬性變數，那麼，這個屬性變數就可以稱為方法，因為它是一個可以執行的函式。程式碼如下：

[JavaScript] 純文字檢視 複製程式碼
function Shape() {
  var x = 0;
  var y = 1;
  this.draw = function () {
    //print;
  };
}

在上面的程式碼中定義了一個draw，並把一個function賦給它。

下面就可以通過aShape呼叫這個函式，OOP中稱為公有方法，如：

[JavaScript] 純文字檢視 複製程式碼
aShape.draw();

如果用var定義，那麼這個draw就變成私有的了，OOP中稱為私有方法，如:

[JavaScript] 純文字檢視 複製程式碼
function Shape() {
  var x = 0;
  var y = 1;
  var draw = function () {
    //print;
  };
}

這樣就不能使用aShape.draw呼叫這個函式了。

四.建構函式:

javascript並不支援OOP，當然也就沒有建構函式了，不過，可以自己模擬一個建構函式，讓物件被建立時自動呼叫，程式碼如下：

[JavaScript] 純文字檢視 複製程式碼
function Shape() {
  var init = function () {
    //建構函式程式碼
  };
  init();
}

在Shape的最後，我們人為的呼叫了init函式，那麼，在建立了一個Shape物件是，init總會被自動呼叫，可以模擬我們的建構函式了。

五.帶引數的建構函式:

如何讓建構函式帶引數呢？其實很簡單，將要傳入的引數寫入函式的引數列表中即可，如：

[JavaScript] 純文字檢視 複製程式碼
function Shape(ax, ay) {
  var x = 0;
  var y = 0;
  var init = function () {
    //建構函式
    x = ax;
    y = ay;
  };
  init();
}

這樣，我們就可以這樣建立物件：

[JavaScript] 純文字檢視 複製程式碼
var aShape = new Shape(0,1);

六.靜態屬性和靜態方法:

在Javascript中如何定義靜態的屬性和方法呢？如下所示：

[JavaScript] 純文字檢視 複製程式碼
function Shape(ax, ay) {
  var x = 0;
  var y = 0;
  var init = function () {
    //建構函式
    x = ax;
    y = ay;
  };
  init();
}
Shape.count = 0;//定義一個靜態屬性count，這個屬性是屬於類的，不是屬於物件的。
Shape.staticMethod = function () { };//定義一個靜態的方法

有了靜態屬性和方法，我們就可以用類名來訪問它了，如下：

[JavaScript] 純文字檢視 複製程式碼
alert ( aShape.count );
aShape.staticMethod();

七.在方法中訪問本類的公有屬性和私有屬性:

在類的方法中訪問自己的屬性，Javascript對於公有屬性和私有屬性的訪問方法有所不同，請大家看下面的程式碼：

[JavaScript] 純文字檢視 複製程式碼
function Shape(ax, ay) {
  var x = 0;
  var y = 0;
  this.gx = 0;
  this.gy = 0;
  var init = function () {
    x = ax;//訪問私有屬性，直接寫變數名即可
    y = ay;
    this.gx = ax;//訪問公有屬性，需要在變數名前加上this.
    this.gy = ay;
  };
  init();
}