Javascript：原型与类

在前两篇文章Javascript：prototype和Javascript：内部属性[[Prototype]]，我们探究了函数的prototype属性与对象的[[Prototype]]内部属性，在本篇中，我们会讲解Javascript是如何使用原型的机制来实现类的。

众所周知，Javascript的面向对象编程是基于原型的，而不像其它大多数面向对象编程语言那样，是基于类的，例如C++、Java等。虽然，ES6标准引入了类的概念，但其底层，仍然是使用原型来实现的。

我们来看一个证据。

class MyClass {}

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

运行上面代码

通过上面这个小实验，我们发现我们使用关键字class定义的所谓的“类”，实际上是一个函数。它的原型结构如下图所示。

所以，在Javascript中，所有基于类的实现，都可以被改写成基于函数与原型的实现。

我们来看一个例子，并把其中的类用函数和原型来改写。

// 定义一个类Car
class Car {

  constructor(brand, year) {
    // 创建实例变量brand和year
    this.brand = brand;
    this.year = year;
  }

  // 创建实例方法getBrand
  getBrand() {
    return this.brand;
  }
  // 创建实例方法getYear
  getYear() {
    return this.year;
  }

}
// 创建类变量has_wheels
Car.has_wheels = true;
// 创建类方法getNumberOfWheels
Car.getNumberOfWheels = function() {
  return 4;
}

// 从类Car创建一个对象
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

运行上面代码

在上面的代码中，我们定义了一个类Car，它的原型结构如下图所示。

根据其原型结构图，我们可以按照如下代码改写它：

// 定义一个函数Car
function Car(brand, year) {
  // 创建实例变量brand和year
  this.brand = brand;
  this.year = year;
}

// 创建实例方法getBrand
Car.prototype.getBrand = function() {
  return this.brand;
};
// 创建实例方法getYear
Car.prototype.getYear = function() {
  return this.year;
}
// 创建类变量has_wheels
Car.has_wheels = true;
// 创建类方法getNumberOfWheels
Car.getNumberOfWheels = function() {
  return 4;
}

// 从函数Car创建一个对象
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

运行上面代码

从上面的代码，我们可以看到如何使用函数与原型来实现实例变量、实例方法、类变量、类方法这四个功能。

更多关于原型的探讨请参见：

最后编辑于：2019.06.24 09:02:51