深入理解JavaScript系列（42）：设计模式之原型模式详解

作者：半夏

时间：2026-10-29

本文深入解析JavaScript中的原型模式，介绍如何利用原型继承特性创建对象。详细讲解ECMAScript5标准中Object.create方法的使用，包括如何指定原型及初始化额外属性。同时提供手动实现原型模式的代码示例，并强调在实际应用中需注意浅拷贝与深拷贝带来的引用问题，帮助开发者更好地掌握这一核心设计模式。

文章目录

原型模式概述

介绍

原型模式（prototype）的核心定义是通过一个已有的原型实例来指定新创建对象的类型，并通过复制该原型来生成新的对象。

正文

JavaScript中的原型继承

在JavaScript中，我们可以利用其独特的原型继承机制来实现原型模式，即创建一个对象并将其作为另一个对象的prototype属性值。原型对象本身有效地复用了由构造器创建的对象。例如，若一个构造函数的原型中包含名为name的属性（见后续示例），则通过该构造函数创建的所有实例都将继承这一属性。

查阅现有文献中的原型模式定义时，通常会发现其多围绕“类”展开，但现实中基于原型继承的JavaScript完全摒弃了“类（class）”的概念。我们仅需从现有对象进行拷贝即可创建新对象。

使用Object.create方法

真正的原型继承概念在最新版ECMAScript5标准中被正式提出，主要借助Object.create方法来创建此类对象。该方法用于创建指定对象，其prototype指向传入的第一个参数对象，并可包含其他可选的指定属性。例如Object.create(prototype, optionalDescriptorObjects)，具体用法见下文示例。

代码如下:

// 因为不是构造函数，所以不用大写
var someCar = {
drive: function () { },
name: '马自达 3'
};
// 使用Object.create创建一个新车x
var anotherCar = Object.create(someCar);
anotherCar.name = '丰田佳美';

Object.create允许你直接继承自其他对象。通过该方法的第二个参数，你可以初始化额外的其他属性。例如：

代码如下:

var vehicle = {
getModel: function () {
console.log('车辆的模具是：' + this.model);
    }
};
var car = Object.create(vehicle, {
 'id': {
 value: MY_GLOBAL.nextId(),
 enumerable: true // 默认writable:false, configurable:false
 },
 'model': {
 value: '福特',
 enumerable: true
 }
});

在此处，你可以在Object.create的第二个参数中使用对象字面量传入要初始化的额外属性，其语法与Object.defineProperties或Object.defineProperty方法类型。它允许您设定属性的特性，例如enumerable, writable 或 configurable。

手动实现原型模式

如果你希望自己去实现原型模式，而不直接使用Object.create 。你可以使用像下面这样的代码为上面的例子来实现：

代码如下:

var vehiclePrototype = {
init: function (carModel) {
this.model = carModel;
    },
getModel: function () {
console.log('车辆模具是：' + this.model);
    }
};
function vehicle(model) {
 function F() { };
 F.prototype = vehiclePrototype;
var f = new F();
f.init(model);
 return f;
}
var car = vehicle('福特Escort');
car.getModel();