JavaScript 构造函数/原型模式
在本教程中，您将学习如何使用 JavaScript 构造函数/原型模式在 ES5 自定义类型
在本教程中，您将学习如何使用 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 类教程。
结论
- 使用 JavaScript 构造函数/原型在 ES5 自定义类型。
- 在构造函数中初始化对象属性，并在原型对象中定义可被所有实例共享的方法和属性。
