1. 项目概述为什么我们需要五种创建模式在JavaScript的世界里对象是构建一切的基石。无论是处理一个简单的用户数据还是构建一个复杂的单页应用我们每天都在和对象打交道。但你是否曾停下来思考过我们创建对象的方式是否足够优雅、高效和健壮当项目规模从几十行代码膨胀到上万行当团队成员从你一个人增加到十几个一个简单的let obj {}可能就会埋下维护的噩梦。这就是“对象的五种创建模式”要解决的问题。它不是一个炫技的语法糖集合而是一套经过实践检验的、用于应对不同场景下对象创建需求的工具箱。从最基础的工厂模式到融合了封装与继承的原型模式再到如今ES6的class语法糖每一种模式都对应着特定的设计意图和适用场景。理解它们意味着你能在代码的起点就做出更合理的选择避免在后期为糟糕的对象设计付出高昂的重构代价。对于前端开发者而言这五种模式更是深入理解JavaScript语言特性的钥匙。JavaScript是一门基于原型的语言它的继承机制与基于类的语言如Java截然不同。通过学习这些创建模式你能真正明白new操作符背后发生了什么理解prototype和__proto__的区别从而写出更符合语言哲学、性能更优的代码。无论你是想夯实基础的新手还是希望优化现有架构的资深工程师这都是一次值得投入的深度探索。2. 核心模式深度解析与适用场景2.1 工厂模式快速批量的对象生产线工厂模式是最直观的一种创建模式。它的核心思想很简单定义一个函数工厂这个函数接收参数在内部创建一个新对象为其添加属性和方法最后返回这个对象。这样我们就不需要反复写new Object()然后一个个赋值了。function createPerson(name, age) { const obj new Object(); obj.name name; obj.age age; obj.sayHello function() { console.log(Hello, Im ${this.name}); }; return obj; } const person1 createPerson(Alice, 25); const person2 createPerson(Bob, 30); person1.sayHello(); // Hello, Im Alice为什么选择工厂模式它的最大优势在于封装了创建细节。调用者无需关心对象内部是如何构建的只需传入必要的参数即可获得一个功能完整的对象。这在创建过程较为复杂例如需要根据参数进行条件分支、组合不同配置时非常有用。核心缺陷与注意事项对象类型识别问题所有通过工厂函数创建的对象其构造函数都指向Object(person1.constructor Object)无法准确识别它们的具体“品牌”是Person还是其他。这在需要区分对象类型时是个硬伤。方法重复创建注意上面代码中的sayHello方法。每次调用createPerson都会在内存中创建一个全新的函数对象。如果创建成千上万个person实例就会产生成千上万个功能完全相同的sayHello函数这是极大的内存浪费。实操心得工厂模式适用于创建过程复杂但对象结构相对简单、且对对象类型识别要求不高的场景。例如在配置管理、创建一组风格统一的UI组件初始配置对象时它非常顺手。但在需要大量实例且包含方法的场景下应谨慎使用优先考虑能共享方法的模式。2.2 构造函数模式赋予对象“身份”为了解决工厂模式的对象类型识别问题构造函数模式登场了。在JavaScript中任何普通函数只要通过new操作符调用它就会作为构造函数来运行。function Person(name, age) { this.name name; this.age age; this.sayHello function() { console.log(Hello, Im ${this.name}); }; } const person1 new Person(Alice, 25); const person2 new Person(Bob, 30); console.log(person1.constructor Person); // true console.log(person1 instanceof Person); // true console.log(person1 instanceof Object); // truenew操作符背后发生了什么这是一个必须理解的关键点。当执行new Person(...)时发生了以下四件事在内存中创建一个全新的空对象。将这个新对象的[[Prototype]]即__proto__内部属性链接到Person.prototype。将构造函数内部的this绑定到这个新对象。执行构造函数内部的代码为this添加属性。如果构造函数没有显式返回一个对象则自动返回这个新创建的对象。优势与依然存在的缺陷优势很明显现在person1和person2都被明确标识为Person类型。然而方法重复创建的问题依然存在。每个实例的sayHello方法仍然是独立的函数对象。注意事项忘记使用new操作符是一个常见错误。如果直接调用Person(Alice, 25)那么函数内部的this在非严格模式下会指向全局对象如window造成属性泄露在严格模式下this为undefined会导致错误。一种防御性编程技巧是在构造函数内部判断this是否为当前构造函数的实例if (!(this instanceof Person)) { return new Person(name, age); }。2.3 原型模式共享的蓝图JavaScript的继承机制是基于原型的。每个函数都有一个prototype原型属性它是一个对象。当通过构造函数创建实例时该实例的内部[[Prototype]]会指向这个原型对象。原型模式的精髓在于将共享的属性和方法直接定义在构造函数的prototype对象上。function Person(name, age) { this.name name; // 实例属性 this.age age; // 实例属性 } // 共享方法定义在原型上 Person.prototype.sayHello function() { console.log(Hello, Im ${this.name}); }; Person.prototype.species Homo sapiens; // 共享属性 const person1 new Person(Alice, 25); const person2 new Person(Bob, 30); person1.sayHello(); // Hello, Im Alice person2.sayHello(); // Hello, Im Bob console.log(person1.sayHello person2.sayHello); // true 是同一个函数原型链查找机制当访问一个对象的属性如person1.sayHello时引擎首先在实例自身查找。如果没找到就会沿着__proto__链向上查找直到找到该属性或到达原型链末端null。这正是方法得以共享的原理。优势与新的挑战完美解决了方法共享的问题极大节省了内存。所有实例共享同一份原型方法的引用。 但这也带来了新的问题共享引用类型属性的陷阱如果原型上有一个引用类型的属性如数组、对象那么所有实例都将共享同一个引用。一个实例修改了它会影响到所有其他实例。Person.prototype.friends [Charlie]; person1.friends.push(David); console.log(person2.friends); // [Charlie, David] person2也被影响了无法通过实例初始化共享属性无法在创建实例时为原型上的共享属性传递差异化参数。避坑技巧永远不要将需要独立维护的引用类型属性放在原型上。原型最适合放置所有实例行为完全一致的方法。对于属性除非它真的是所有实例完全共享、只读的常量如species否则都应定义为实例属性。2.4 组合模式构造函数原型实践中的最佳拍档组合模式结合了构造函数模式和原型模式两者的优点是ECMAScript中使用最广泛、认同度最高的一种对象创建模式。构造函数模式用于定义实例属性。这些属性是每个实例独有的。原型模式用于定义共享的方法和常量属性。function Person(name, age) { // 实例属性各自独立 this.name name; this.age age; this.friends [Charlie]; // 引用类型属性也放在实例中 } // 共享方法节省内存 Person.prototype.sayHello function() { console.log(Hello, Im ${this.name}); }; // 共享的只读属性 Person.prototype.species Homo sapiens; const person1 new Person(Alice, 25); const person2 new Person(Bob, 30); person1.friends.push(David); console.log(person1.friends); // [Charlie, David] console.log(person2.friends); // [Charlie] 互不影响 console.log(person1.sayHello person2.sayHello); // true 方法共享这种模式清晰地划分了实例成员和原型成员代码可读性高内存利用高效且避免了引用类型共享的副作用几乎满足了所有常规场景下的需求。2.5 动态原型模式更优雅的封装组合模式虽然好但有一个小小的“风格问题”定义被拆分在了两个地方构造函数内部和外部。动态原型模式旨在解决这个问题它将所有信息都封装在构造函数内部保持了更好的封装性。其原理是通过检查原型上的某个关键方法是否已定义来决定是否需要初始化原型。通常只在第一次调用构造函数时执行原型初始化代码。function Person(name, age) { this.name name; this.age age; this.friends [Charlie]; // 动态原型检查并初始化 if (typeof this.sayHello ! function) { Person.prototype.sayHello function() { console.log(Hello, Im ${this.name}); }; Person.prototype.species Homo sapiens; } } const person1 new Person(Alice, 25); // 此时原型被初始化 const person2 new Person(Bob, 30); // 此时原型已存在if块内的代码不会执行注意事项不能使用对象字面量重写原型。如果在if语句内写Person.prototype { ... }这会切断已创建实例如person1与新原型之间的连接导致错误。只需对任何一个原型方法或属性进行条件判断即可不需要每个都判断。这种模式使得代码在结构上更加集中对于习惯类式面向对象语言的开发者来说可能更易接受。它和组合模式在功能上是完全等价的选择哪一种更多是个人或团队编码风格的偏好。3. 模式演进与ES6 Class语法糖3.1 从模式到语法糖ES6引入的class关键字并没有向JavaScript引入新的面向对象继承模型。它只是上述组合模式构造函数原型的语法糖提供了一种更清晰、更接近传统面向对象语言的方式来定义构造函数和原型方法。// ES6 Class class Person { constructor(name, age) { // 对应构造函数 this.name name; this.age age; this.friends [Charlie]; } // 以下方法都定义在 Person.prototype 上 sayHello() { console.log(Hello, Im ${this.name}); } static getSpecies() { // 静态方法定义在 Person 本身上 return Homo sapiens; } } const person1 new Person(Alice, 25); person1.sayHello(); // Hello, Im Alice console.log(Person.getSpecies()); // Homo sapiens console.log(typeof Person); // function Class本质仍是函数 console.log(person1.__proto__ Person.prototype); // trueclass解决了什么问题统一的书写形式将构造器和方法的定义集中在一个块内结构更清晰。更安全的调用必须使用new调用否则报错避免了构造函数模式中忘记new的陷阱。内置的“类”方法支持static静态方法、getter/setter访问器。更好的继承语法通过extends和super实现继承比ES5的原型链继承写法简洁直观得多。它没有改变什么原型链继承机制没有变。不存在真正的“类”Class底层依然是函数和原型。不存在私有属性ES2022正式引入了#私有字段但class语法本身最初不包含。3.2 五种模式对比与选型指南为了更直观地对比我将五种模式的核心特性、优缺点和适用场景总结如下模式核心思想优点缺点典型适用场景工厂模式封装创建过程返回新对象1. 创建逻辑集中调用简单2. 解耦创建与使用1. 无法识别对象类型2. 方法无法共享内存效率低创建过程复杂、对象结构简单、不关心类型的配置对象、工具对象构造函数模式使用new调用函数this指向新实例1. 实例类型标识明确2. 符合直觉1. 方法无法共享内存效率低2. 忘记new会导致错误需要明确类型标识但实例数量极少的简单场景已逐渐被替代原型模式在prototype上定义共享成员1. 方法共享内存效率极高1. 共享引用类型属性会导致意外修改2. 无法初始化实例特有的原型属性几乎不单独使用常作为其他模式的一部分组合模式实例属性用构造函数共享方法用原型1. 类型标识明确2. 方法共享内存效率高3. 实例属性独立无副作用1. 代码定义略显分散构造函数内外通用性最强适用绝大多数场景是ES5时代的实际标准动态原型模式在构造函数内条件化地初始化原型1. 兼具组合模式所有优点2. 代码封装性更好定义集中1. 不能使用对象字面量重写原型2. 理解成本稍高追求代码封装性和结构统一的场景与组合模式等价ES6 Class组合模式的语法糖1. 语法简洁直观2. 内置new检查3. 继承语法强大 (extends/super)1. 本质仍是原型需理解底层2. 早期规范无私有字段现代JavaScript开发的首选用于定义任何复杂的对象结构选型决策流如果是现代项目ES6无脑使用class。它清晰、安全且是社区标准。如果需要维护老代码ES5或编写库优先使用组合模式或动态原型模式。它们是坚实可靠的基础。如果只是创建一个简单的、一次性的数据容器直接使用对象字面量{}或工厂模式。永远避免单独使用原型模式定义包含引用类型的属性。4. 高级话题与性能、内存考量4.1 原型链与继承的底层机制理解创建模式离不开对原型链的深入理解。每个对象都有一个内部属性[[Prototype]]在浏览器中可通过__proto__访问。当访问对象属性时如果自身没有引擎就会去[[Prototype]]指向的对象上找如果还没有就继续往上找直到找到null这条链路就是原型链。function Parent() { this.parentProp parent; } Parent.prototype.parentMethod function() { console.log(parentMethod); }; function Child() { this.childProp child; } // 实现继承将Child的原型指向Parent的一个实例 Child.prototype new Parent(); // 修正constructor指针 Child.prototype.constructor Child; const child new Child(); console.log(child.childProp); // child (自身属性) console.log(child.parentProp); // parent (继承自Parent实例) child.parentMethod(); // parentMethod (继承自Parent.prototype) // 查找顺序child自身 - Child.prototype (即parent实例) - Parent.prototype - Object.prototype - nullES5继承的经典模式就是组合继承借用构造函数原型链它结合了构造函数模式和原型模式来实现继承解决了原型链继承中引用类型共享以及无法向父类传参的问题。4.2 内存与性能优化实践不同的创建模式对内存和性能的影响差异显著。方法共享的重要性假设一个方法函数占用1KB内存使用构造函数模式创建10万个实例就会消耗100MB内存来存储完全相同的方法。而使用原型模式或组合模式无论多少实例这个方法只占用1KB。在大型应用或创建大量对象的场景下如游戏中的粒子系统、列表渲染的每一项这个差异是致命的。原型链查找的性能属性查找沿着原型链进行链越长查找耗时理论上越长。虽然现代JavaScript引擎优化得非常好对于原型链查找有高效的缓存策略但在极端性能敏感的代码段如每帧执行多次的循环体将频繁访问的属性直接定义为实例属性可以减少一次查找开销。// 在性能关键处可以考虑 function FastObject() { this.frequentlyUsedMethod this.frequentlyUsedMethod.bind(this); // 将方法绑定到实例但会牺牲共享 } FastObject.prototype.frequentlyUsedMethod function() { /* ... */ };注意这通常属于微优化在绝大多数应用中不需要考虑。首先应确保架构正确在性能 profiling 后确实发现这里是瓶颈时才进行此类优化。对象字面量与Object.create()对于纯粹的数据对象使用对象字面量{}是最快、最简洁的方式。Object.create(proto)可以创建一个以指定对象为原型的新对象这是实现纯净原型继承无构造函数的有力工具。const personProto { sayHello() { console.log(Hello, Im ${this.name}); } }; const person Object.create(personProto); person.name Alice; // 赋值实例属性4.3 常见问题与排查技巧实录在实际开发中围绕对象创建和原型会遇到一些典型问题。问题1修改原型后现有实例能访问到新方法吗答可以。因为实例访问的是原型对象的实时引用。function Person() {} const p1 new Person(); Person.prototype.newMethod function() { console.log(new!); }; p1.newMethod(); // new! 可以访问但是如果重写整个原型对象则不行function Person() {} const p1 new Person(); Person.prototype { newMethod: function() {} }; p1.newMethod(); // TypeError: p1.newMethod is not a function // p1.__proto__ 仍然指向旧的 prototype 对象。问题2for...in循环会遍历原型上的属性吗答会。for...in会遍历对象自身及其原型链上所有可枚举的属性。通常我们需要用hasOwnProperty()进行过滤。for (let key in person1) { if (person1.hasOwnProperty(key)) { console.log(key); // 只输出自身属性name, age, friends } }或者使用Object.keys()它只返回对象自身的可枚举属性名。问题3如何实现可靠的类型检查instanceof检查构造函数的prototype属性是否出现在对象的原型链上。适用于自定义类型。Object.prototype.toString.call()最可靠的通用类型检查方法返回[object Type]字符串。console.log(Object.prototype.toString.call([])); // [object Array] console.log(Object.prototype.toString.call(null)); // [object Null]问题4ES6 Class 中的方法是否可枚举答默认不可枚举。这与在原型上直接定义属性默认可枚举不同。这更符合“类方法”是内部实现细节不应被随意遍历的直觉。class Person { sayHello() {} } const p new Person(); console.log(Object.keys(p)); // [] 空数组 console.log(Object.getOwnPropertyNames(Object.getPrototypeOf(p))); // 包含 constructor, sayHello理解对象的创建模式是编写高质量、可维护JavaScript代码的基石。它不仅仅是语法知识更关乎你对程序内存管理、设计模式和语言运行机制的理解。从今天起在创建下一个对象时不妨先花几秒钟思考一下我该用哪种模式这会让你的代码走得更远。