在前兩篇文章Javascript：prototype和Javascript：內(nèi)部屬性[[Prototype]]，我們探究了函數(shù)的prototype屬性與對象的[[Prototype]]內(nèi)部屬性，在本篇中，我們會講解Javascript是如何使用原型的機(jī)制來實(shí)現(xiàn)類的。

眾所周知，Javascript的面向?qū)ο缶幊淌?strong>基于原型的，而不像其它大多數(shù)面向?qū)ο缶幊陶Z言那樣，是基于類的，例如C++、Java等。雖然，ES6標(biāo)準(zhǔn)引入了類的概念，但其底層，仍然是使用原型來實(shí)現(xiàn)的。

我們來看一個(gè)證據(jù)。

class MyClass {}

console.log("Type of MyClass is: " + typeof MyClass); // Type of MyClass is: function

運(yùn)行上面代碼

通過上面這個(gè)小實(shí)驗(yàn)，我們發(fā)現(xiàn)我們使用關(guān)鍵字class定義的所謂的“類”，實(shí)際上是一個(gè)函數(shù)。它的原型結(jié)構(gòu)如下圖所示。

所以，在Javascript中，所有基于類的實(shí)現(xiàn)，都可以被改寫成基于函數(shù)與原型的實(shí)現(xiàn)。

我們來看一個(gè)例子，并把其中的類用函數(shù)和原型來改寫。

// 定義一個(gè)類Car
class Car {

  constructor(brand, year) {
    // 創(chuàng)建實(shí)例變量brand和year
    this.brand = brand;
    this.year = year;
  }

  // 創(chuàng)建實(shí)例方法getBrand
  getBrand() {
    return this.brand;
  }
  // 創(chuàng)建實(shí)例方法getYear
  getYear() {
    return this.year;
  }

}
// 創(chuàng)建類變量has_wheels
Car.has_wheels = true;
// 創(chuàng)建類方法getNumberOfWheels
Car.getNumberOfWheels = function() {
  return 4;
}

// 從類Car創(chuàng)建一個(gè)對象
let my_car = new Car("瑪莎拉蒂", 2014);
console.log(my_car.getBrand()); // 瑪莎拉蒂
console.log(my_car.getYear()); // 2014
console.log(Car.has_wheels); // true
console.log(Car.getNumberOfWheels()); // 4

運(yùn)行上面代碼

在上面的代碼中，我們定義了一個(gè)類Car，它的原型結(jié)構(gòu)如下圖所示。

根據(jù)其原型結(jié)構(gòu)圖，我們可以按照如下代碼改寫它：

// 定義一個(gè)函數(shù)Car
function Car(brand, year) {
  // 創(chuàng)建實(shí)例變量brand和year
  this.brand = brand;
  this.year = year;
}

// 創(chuàng)建實(shí)例方法getBrand
Car.prototype.getBrand = function() {
  return this.brand;
};
// 創(chuàng)建實(shí)例方法getYear
Car.prototype.getYear = function() {
  return this.year;
}
// 創(chuàng)建類變量has_wheels
Car.has_wheels = true;
// 創(chuàng)建類方法getNumberOfWheels
Car.getNumberOfWheels = function() {
  return 4;
}

// 從函數(shù)Car創(chuàng)建一個(gè)對象
let my_car = new Car("瑪莎拉蒂", 2014);
console.log(my_car.getBrand()); // 瑪莎拉蒂
console.log(my_car.getYear());  // 2014
console.log(Car.has_wheels); // true
console.log(Car.getNumberOfWheels()); // 4

運(yùn)行上面代碼

從上面的代碼，我們可以看到如何使用函數(shù)與原型來實(shí)現(xiàn)實(shí)例變量、實(shí)例方法、類變量、類方法這四個(gè)功能。

更多關(guān)于原型的探討請參見：

1. JavaScript：prototype屬性
2. JavaScript：內(nèi)部屬性[[Prototype]]
3. Javascript：原型與類