myfreax

JavaScript 构造函数/原型模式

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

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

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

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

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

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

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

JavaScript 构造函数/原型示例

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

  • 两个属性 firstNamelastName
  • 一个方法 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 创建两个对象 p1p2,这些对象通过 [[Prototype]] 链接到Person.prototype 对象:

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

当您在 p1p2 对象调用 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 自定义类型。
  • 在构造函数中初始化对象属性,并在原型对象中定义可被所有实例共享的方法和属性。

内容导航