JavaScript 构造函数/原型模式

在本教程中，您将学习如何使用 JavaScript 构造函数/原型模式在 ES5 自定义类型

March 24, 2023

4 min read

JavaScript 教程

在本教程中，您将学习如何使用 JavaScript 构造函数/原型模式在 ES5 自定义类型。

JavaScript 构造函数/原型模式简介

构造函数和原型模式的组合是在 ES5 自定义类型的最常见方式。在这种模式中：

构造函数模式定义对象属性。
原型模式定义对象方法。

通过使用此模式，自定义类型的所有对象共享原型定义的方法。此外，每个对象都有自己的属性。这种构造函数/原型模式吸收构造函数和原型模式的最佳部分。

JavaScript 构造函数/原型示例

假设您要定义一个名为 Person 的自定义类型，它具有：

两个属性 firstName 和 lastName
一个方法 getFullName()

首先，使用构造函数初始化属性：

function Person(firstName, lastName) {
	this.firstName = firstName;
	this.lastName = lastName;
}

在背后，JavaScript 引擎定义一个用圆圈表示的 Person 函数和一个用正方形表示的匿名对象。

Person 函数有一个 prototype 属性，prototype 属性引用一个匿名对象，匿名对象有一个 constructor 属性， constructor 属性引用 Person 函数。

其次、在 Person 函数 prototype 对象定义方法 getFullName() ：

Person.prototype.getFullName = function () {
  return this.firstName + ' ' + this.lastName;
};

JavaScript 在 Person.prototype 对象定义方法 getFullName() 就像下图一样创建 getFullName() 函数：

第三，创建 Person 类型的多个实例：

let p1 = new Person("John", "Doe");
let p2 = new Person("Jane", "Doe");

console.log(p1.getFullName());
console.log(p2.getFullName());

输出：

'John Doe'
'Jane Doe'

Javascript 创建两个对象 p1 和 p2，这些对象通过 [[Prototype]] 链接到Person.prototype 对象：

每个对象都有自己的属性 firstName 和 lastName。但是，它们共享相同的getFullName() 方法。

当您在 p1 或 p2 对象调用 getFullName() 方法时，JavaScript 引擎会搜索这些对象上的方法。

因为 JavaScript 引擎没有在那里找到方法，所以它遵循原型链接并在 Person.prototype 对象搜索 getFullName() 方法。

最后因为 Person.prototype 对象有 getFullName()方法，JavaScript 停止搜索并执行方法。

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

Person.prototype.getFullName = function () {
  return this.firstName + ' ' + this.lastName;
};

let p1 = new Person('John', 'Doe');
let p2 = new Person('Jane', 'Doe');

console.log(p1.getFullName());
console.log(p2.getFullName());

ES6 Classes 类

ES6 引入 class 关键字，使构造函数/原型模式更易于使用。例如，下面使用 class 关键字来定义完全相同的 Person 类：

class Person {
	constructor(firstName, lastName) {
		this.firstName = firstName;
		this.lastName = lastName;
	}
	getFullName() {
		return this.firstName + " " + this.lastName;
	}
}

let p1 = new Person('John', 'Doe');
let p2 = new Person('Jane', 'Doe');

console.log(p1.getFullName());
console.log(p2.getFullName());

在此语法中，将 class 属性初始化移至 constructor 方法。它还将 getFullName() 方法打包在与 constructor 函数相同的位置。

类语法看起来更简单、更简洁。但是，它是构造函数/原型模式的语法糖，具有一些增强功能。了解 class 类更多信息，请查看JavaScript 类教程。