原型模式 VS 构造函数模式：JavaScript 设计模式剖析

2023-12-03 23:34:08

在 JavaScript 中，设计模式为我们提供了久经考验的解决方案，用于构建灵活且可维护的应用程序。两种流行的设计模式是原型模式和构造函数模式，它们都用于创建对象。

然而，这两者之间存在着微妙的差别，理解这些差别对于选择最适合特定用例的模式至关重要。

原型模式

原型模式基于现有对象的模板通过克隆来创建对象的模式。我们可以将原型模式视为基于原型继承，在原型继承中我们创建对象作为其他对象的原型。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const person1 = new Person('John', 30);
const person2 = new Person('Jane', 25);

person1.greet(); // Hello, my name is John and I am 30 years old.
person2.greet(); // Hello, my name is Jane and I am 25 years old.

原型模式的主要优点是它可以轻松地创建具有相同属性和方法的新对象。它还可以避免重复代码，因为所有对象都从一个原型继承。

构造函数模式

构造函数模式使用名为构造函数的特殊函数来创建对象。构造函数与常规函数类似，但它们通过使用 new 来调用。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person1 = new Person('John', 30);
const person2 = new Person('Jane', 25);

person1.greet(); // Hello, my name is John and I am 30 years old.
person2.greet(); // Hello, my name is Jane and I am 25 years old.

构造函数模式的主要优点是它为每个对象创建了一个新的作用域。这意味着每个对象都有自己的一组属性和方法，与其他对象隔离。

原型模式与构造函数模式对比

特征	原型模式	构造函数模式
继承	基于原型	基于构造函数
对象创建	通过克隆原型	通过使用 `new` 关键字调用构造函数
对象作用域	共享作用域（所有对象从一个原型继承）	私有作用域（每个对象都有自己的作用域）
代码重用	良好（所有对象共享相同的方法）	较差（每个对象都必须定义自己的方法）