摘要: 本教程将教你如何使用 JavaScript 构造函数/原型模式在 ES5 中定义自定义类型。
JavaScript 构造函数/原型模式简介
构造函数和原型模式的结合是 ES5 中定义自定义类型最常见的方式。在这个模式中
- 构造函数模式定义了对象的属性。
- 原型模式定义了对象的方法。
通过使用此模式，自定义类型的所有对象都共享在原型中定义的方法。此外，每个对象都有自己的属性。
此构造函数/原型模式结合了构造函数和原型模式的优点。
JavaScript 构造函数/原型模式示例
假设你想要定义一个名为 Person 的自定义类型，它具有
- 两个属性
firstName和lastName。 - 一个方法
getFullName()。
首先，使用 构造函数 初始化属性
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}Code language: JavaScript (javascript)在幕后，JavaScript 引擎定义了一个由圆圈表示的 Person 函数和一个由方块表示的匿名对象。
Person 函数具有 prototype 属性，它引用一个匿名对象。匿名对象具有 constructor 属性，它引用 Person 函数
其次，在 Person 函数的 prototype 对象中定义 getFullName() 方法
Person.prototype.getFullName = function () {
return this.firstName + ' ' + this.lastName;
};Code language: JavaScript (javascript)JavaScript 在 Person.prototype 对象上定义 getFullName() 方法如下
第三，创建多个 Person 类型的实例
let p1 = new Person("John", "Doe");
let p2 = new Person("Jane", "Doe");
console.log(p1.getFullName());
console.log(p2.getFullName());Code language: JavaScript (javascript)输出
'John Doe'
'Jane Doe'Code language: JavaScript (javascript)Javascript 创建了两个对象 p1 和 p2。这些对象通过 [[Prototype]] 链接链接到 Person.prototype 对象
每个对象都有自己的 firstName 和 lastName 属性。但是，它们共享相同的 getFullName() 方法。
当你调用 p1 或 p2 对象上的 getFullName() 方法时，JavaScript 引擎会在这些对象上搜索该方法。由于 JavaScript 引擎在那里找不到该方法，因此它会遵循原型链接并在 Person.prototype 对象中搜索该方法。
由于 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());Code language: JavaScript (javascript)ES6 中的类
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());Code language: JavaScript (javascript)在此语法中，class 将属性初始化移动到 constructor 方法。它还将 getFullName() 方法打包在与 constructor 函数相同的位置。
类语法看起来更简洁，更简洁。但是，它只是构造函数/原型模式的语法糖，并进行了一些增强。
有关类的更多信息，请查看 JavaScript 类教程。
总结
- 使用 JavaScript 构造函数/原型模式在 ES5 中定义自定义类型。
- 在构造函数中初始化对象属性，并在原型对象中定义所有实例可以共享的方法和属性。
