前端开发设计模式：原型模式

是什么？

原型模式是一种创建型设计模式，通过复制现有对象来创建新对象，而无需知道对象的具体创建过程。——【而不是通过类实例化】

这种模式特别适合需要创建多个相似对象的场景，能有效减少重复代码和提高性能。

核心思想是：

• 利用一个已存在的对象(原型) 作为模板，通过克隆操作来生成新的对象实例
• 新对象的属性和方法基于原型对象，但可以拥有自己的个性化修改
• 避免了频繁创建相似对象时的重复初始化过程

 

JavaScript 中的原型模式

在JS中，原型模式是其核心特性之一。每个对象都有一个内部属性 [ [ Prototype ] ]，它指向该对象的原型对象。当访问一个对象的属性或方法时，JS 首先会在对象本身查找，若找不到，就会沿着原型链向上查找。

示例1：简单的原型模式。

// 定义原型对象
const personPrototype = {
    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

// 创建新对象
const person1 = Object.create(personPrototype);
person1.setAge = function (age) {
    this.age = age;
    console.log(`${this.name} is ${this.age} years old.`);
};
person1.name = 'Alice';
person1.setAge(30); // Alice is 30 years old.

const person2 = Object.create(personPrototype);
person2.name = 'Bob';

person1.sayHello(); // Hello, my name is Alice
person2.sayHello(); // Hello, my name is Bob

// Object.create 方法基于原型对象创建两个新对象，并设置了它们的 name 属性。

注释：《Object.create 详解》、《MDN：Object.create》

 在上述代码中，使用Object.create() 方法基于 personPrototype 是原型对象 创建新的对象 person1/2，新对象继承了原型对象的 sayHello 方法

 

JavaScript 本身就是基于原型的语言，天然支持原型模式。
示例2：

// 定义一个原型对象
const userPrototype = {
    name: '',
    age: 0,
    greet() {
        return `Hello, 我是${this.name}，今年${this.age}岁`;
    },
   
    // 克隆方法
    clone() {
        // 使用 Object.create 基于原型创建一个新对象
        // Object.getPrototypeOf(this) 获取当前对象的原型
        const clone = Object.create(Object.getPrototypeOf(this));
        // 复制自身属性
        Object.assign(clone, this);
        return clone;
    }
};

// 基于原型创建新对象
const user1 = userPrototype.clone();
user1.name = 'Alice';
user1.age = 18;

const user2 = userPrototype.clone();
user2.name = 'Bob';
user2.age = 20;


console.log(user1.greet()); // 输出: Hello, 我是Alice，今年18岁
console.log(user2.greet()); // 输出: Hello, 我是Bob，今年20岁

 

 

实际应用场景

• 创建多个相似对象：当需要创建多个具有相似属性和方法的对象时。例如，在游戏开发中创建多个具有相同属性和行为的角色或物品。
• 减少内存开销：通过共享原型对象的属性和方法，可以减少内存的使用。
• 配置对象复用：当需要多个相似配置对象时
• 表单数据处理：创建多个相似的表单数据对象
• 状态管理：复制基础状态对象并进行个性化修改

 

优点：

　　1. 提高对象的创建效率

　　对于复杂对象（如包含大量初始化逻辑或嵌套结构的对象），通过克隆原型而非重新实例化，可以避免重复执行初始化代码，显著提升创建性能，尤其适合需要批量创建相似对象的场景（如列表渲染、游戏角色生成）。

　　2. 简化对象创建流程

　　无需编写复杂的构造函数或工厂方法，只需基于现有原型进行少量修改即可生成新对象，降低了创建相似对象的代码复杂度。

　　3. 动态性强

　　可以在运行时动态修改原型对象，所有基于该原型克隆的对象（未被重写的属性/方法）都会受到影响，便于统一更新对象行为。

　　4. 天然适配JavaScript语音特性

　　JavaScript 是基于原型的语言，Object.create() 、原型链等特性原生支持原型模式，实现成本低，代码更符合语言习惯。

　　5. 减少代码冗余

　　相似对象共享原型的基础属性和方法，避免重复定义，提高代码复用率，便于维护。

 

缺点：

　　1. 深克隆复杂性

　　对于包含引用类型（如对象、数组）的原型，简单的浅克隆会导致新对象与原型共享引用，修改一方会影响另一方。实现深克隆需要额外处理（如递归复制、使用 JSON.parse(JSON.stringify())等），增加了代码复杂度，且可能无法处理函数、正则等特殊类型。

 　　2. 原型链维护难度

　　多层原型继承或复杂原型链结构可能导致代码可读性下降，调试时难以追踪属性/方法的来源，尤其在团队协作中容易引发理解偏差。

　　3. 不适用于频繁修改的场景

　　如果需要频繁创建差异较大的对象，基于原型克隆后再大量修改属性，反而会比直接创建新对象更繁琐。

　　4. 隐藏创建对象细节

　　原型模式通过克隆生成对象，而非显式的构造过程，可能使代码读者难以理解对象的初始状态和创建逻辑

　　5. 对类式思维的兼容性问题

　　习惯了类式编程（如使用 class 关键字）的开发者可能需要适应原型模式的思维方式，尤其在处理继承和多态时容易产生混淆。

 

注意事项

 1、深克隆 VS 浅克隆：对于包含引用类型的对象，需要注意使用深克隆避免意外的引用共享

2、方法绑定：克隆对象时要确保方法正确绑定到新对象

3、原型链维护：在复杂场景下要注意维护正确的原型链关系

 

 原型模式在前端框架中也有广泛应用，如 React 中的组件复用思想、Vue中的组件继承等都借鉴了原型模式的理念。合理使用原型模式可以显著提高代码复用性和性能。

怎么用？

 下面展示一个更完整的前端简单应用示例，展示如何在实际项目中使用原型模式。

    // 组件配置原型
    const componentPrototype = {
        type: 'base',
        width: 100,
        height: 100,
        style: {
            backgroundColor: '#fff',
            border: '1px solid #ccc',
            borderRadius: '4px',
            color: '#075DB3'
        },

        // 克隆方法
        clone() {
            // 深度克隆以避免引用类型共享
            const clone = JSON.parse(JSON.stringify(this));
            // 重新绑定方法（因为JSON序列化会丢失方法）
            clone.clone = this.clone;
            clone.render = this.render;
            return clone;
        },

        // 渲染方法
        render() {
            const element = document.createElement('div');
            element.style.width = `${this.width}px`;
            element.style.height = `${this.height}px`;
            element.style.backgroundColor = this.style.backgroundColor;
            element.style.border = this.style.border;
            element.style.color = this.style.color;
            element.style.borderRadius = this.style.borderRadius;
            element.textContent = `组件类型: ${this.type}`;
            return element;
        }
    }


    // 创建具体组件
    const headerComponent = componentPrototype.clone();
    headerComponent.type = 'header';
    headerComponent.height = 60;
    headerComponent.style.backgroundColor = '#f5f5f5';

    const contentComponent = componentPrototype.clone();
    contentComponent.type = 'content';
    contentComponent.width = 500;
    contentComponent.height = 300;


    const footerComponent = componentPrototype.clone();
    footerComponent.type = 'footer';
    footerComponent.height = 60;
    footerComponent.style.backgroundColor = '#075DB3';
    footerComponent.style.color = '#fff';

    // 渲染组件
    document.body.appendChild(headerComponent.render());
    document.body.appendChild(contentComponent.render());
    document.body.appendChild(footerComponent.render());