技术博客文档教程【免费下载链接】Blog冴羽写博客的地方预计写四个系列JavaScript深入系列、JavaScript专题系列、ES6系列、React系列。项目地址https://gitcode.com/GitHub_Trending/blo/Blog点击查看免费下载本篇为冴羽博客「JavaScript 深入系列」第十四篇围绕《JavaScript高级程序设计》中创建对象的经典方法论展开工厂模式、构造函数模式、原型模式、组合模式、动态原型模式、寄生构造函数模式与稳妥构造函数模式逐一给出可运行的代码示例剖析每种方式的优点与短板并结合仓库中同系列文章原型链、new、call/apply 的模拟实现把底层原理讲透。读完你将能根据业务场景是否需要类型识别、是否需要实例私有属性、是否追求封装性、是否处于安全环境快速选定最合适的对象创建方案。写在前面这篇文章讲解创建对象的各种方式以及优缺点。作者坦言这篇文章更像是一份精读笔记因为《JavaScript高级程序设计》对这一主题的讲解非常完整本文在保留原书脉络的基础上补充了可运行的验证代码与底层原理说明。阅读本文前建议先掌握三个前置概念它们贯穿了几乎所有模式的分析原型与原型链每个函数都有prototype属性它指向由该构造函数创建出来的实例的原型每个对象除null外都有__proto__属性指向自己的原型而原型自身也是对象于是形成一条可以逐级回溯的链。详见仓库同系列文章 《JavaScript深入之从原型到原型链》。new 的执行过程new本质上做了四件事——新建对象、把对象原型指向构造函数的prototype、以该对象为this执行构造函数、返回对象。详见 《JavaScript深入之new的模拟实现》。call/apply 的作用apply(obj, args)会把构造函数内部的this指向obj并立即执行是借用构造函数与动态原型两类模式的核心机制。详见 《JavaScript深入之call和apply的模拟实现》。1. 工厂模式function createPerson(name) { var o new Object(); o.name name; o.getName function () { console.log(this.name); }; return o; } var person1 createPerson(kevin);思路用一个普通函数createPerson封装创建对象并填充属性的过程函数内部new Object()建一个空对象挂上属性和方法后整体return。调用方只需要传参即可拿到一个看起来像 Person的对象。优点解决了需要创建多个相似对象的问题代码复用性比逐个手写对象字面量好。缺点对象无法识别——因为所有实例的原型都指向同一个Object.prototype毕竟内部是用new Object()创建的所以person1 instanceof Person永远是falseperson1 instanceof Object才是true。你无法区分这个对象到底是人还是别的什么类型信息完全丢失。2. 构造函数模式function Person(name) { this.name name; this.getName function () { console.log(this.name); }; } var person1 new Person(kevin);思路不显式创建对象、不显式return而是借助new的机制new会新建对象并把构造函数内部的this指向它属性直接挂到this上最后new返回该对象。回顾 《JavaScript深入之new的模拟实现》 中的模拟代码可以清楚地看到这一过程function objectFactory() { var obj new Object(), Constructor [].shift.call(arguments); obj.__proto__ Constructor.prototype; // 1. 原型指向构造函数原型 Constructor.apply(obj, arguments); // 2. 以 obj 为 this 执行构造函数 return obj; }优点实例可以识别为一个特定的类型——person1 instanceof Person为true因为person1.__proto__ Person.prototype。缺点每次创建实例时getName方法都要被重新创建一次。也就是说person1.getName ! person2.getName两个实例各自持有一份方法副本既浪费内存也破坏了方法应该被共享的直觉。2.1 构造函数模式优化function Person(name) { this.name name; this.getName getName; } function getName() { console.log(this.name); } var person1 new Person(kevin);思路把方法定义提到构造函数外面构造函数内部只做一次引用赋值this.getName getName。这样无论创建多少个实例getName函数体都只有一份所有实例共享同一个函数引用。优点解决了每个方法都要被重新创建的问题。缺点这叫啥封装……——方法和构造函数被拆散成两个毫无关联的顶层声明Person的人格完整性被破坏了。如果方法多了全局作用域会被一堆getXXX、setXXX函数污染可维护性很差。3. 原型模式function Person(name) { } Person.prototype.name keivn; Person.prototype.getName function () { console.log(this.name); }; var person1 new Person();思路构造函数体完全留空把所有属性和方法直接挂在Person.prototype上。根据原型链机制——当读取实例属性找不到时会沿着__proto__去原型上找——所以person1.name会命中原型上的name。这里正好可以用仓库同系列文章 《JavaScript深入之从原型到原型链》 中那张构造函数与实例原型的关系图来理解图中Person.prototype正是person1、person2的原型三者通过person.__proto__ Person.prototype、Person.prototype.constructor Person关联在一起。优点方法不会重新创建——所有实例共享原型上的方法内存最省。缺点所有的属性和方法都共享——这包括数据属性引用类型属性如数组、对象一旦被某个实例修改所有实例都会看到修改实例之间没有私有数据不能初始化参数——属性值写死在原型上new Person()无法通过传参定制每个实例的name。3.1 原型模式优化function Person(name) { } Person.prototype { name: kevin, getName: function () { console.log(this.name); } }; var person1 new Person();思路不再一条条往Person.prototype上挂属性而是用对象字面量一次性整体赋值封装性好了不少。优点封装性好了一点——所有属性和方法集中在同一个字面量里一目了然。缺点重写了原型丢失了constructor属性。原来的Person.prototype是一个自带constructor: Person的对象现在整体替换成一个普通字面量对象这个新对象没有constructor属性于是Person.prototype.constructor会沿着原型链找到Object。结果是person1.constructor Object实例再也无法通过constructor找到自己的构造函数。3.2 原型模式优化function Person(name) { } Person.prototype { constructor: Person, name: kevin, getName: function () { console.log(this.name); } }; var person1 new Person();思路在字面量里手动补回constructor: Person修复 3.1 的问题。优点实例可以通过constructor属性找到所属构造函数。缺点原型模式该有的缺点还是有——属性依然全局共享、依然无法初始化参数。此外还有一个细节手动补回的constructor默认是可枚举的enumerable: true而原生prototype上的constructor是不可枚举的如果你用for...in遍历实例属性会把constructor也遍历出来与原生的行为有细微差异。4. 组合模式构造函数模式与原型模式双剑合璧。function Person(name) { this.name name; } Person.prototype { constructor: Person, getName: function () { console.log(this.name); } }; var person1 new Person();思路构造函数模式管私有把每个实例互不相同的属性如name写在构造函数里通过this.name name完成初始化原型模式管共享把所有实例共用的方法如getName放在Person.prototype上。两者各司其职。优点该共享的共享该私有的私有——每个实例有自己的name副本方法却只有一份是使用最广泛的方式。缺点有的人就是希望全部都写在一起即更好的封装性——this.name写在构造函数里getName写在原型字面量里同一类对象的定义被分成了两块追求所有代码集中在一个块内的开发者会不满意。4.1 动态原型模式function Person(name) { this.name name; if (typeof this.getName ! function) { Person.prototype.getName function () { console.log(this.name); } } } var person1 new Person();思路把原型的初始化也塞进构造函数里并用typeof this.getName ! function做一次只在第一次需要时才初始化原型的惰性判断。第一次new Person()时实例通过原型链找不到getName于是给Person.prototype补上该方法之后的实例在原型上已经能找到getName判断为false不再重复赋值。这样既满足了全部写在一起的封装诉求又避免了每次实例化都重复定义方法。注意使用动态原型模式时不能用对象字面量重写原型。解释一下为什么function Person(name) { this.name name; if (typeof this.getName ! function) { Person.prototype { constructor: Person, getName: function () { console.log(this.name); } } } } var person1 new Person(kevin); var person2 new Person(daisy); // 报错 并没有该方法 person1.getName(); // 注释掉上面的代码这句是可以执行的。 person2.getName();为了解释这个问题假设开始执行var person1 new Person(kevin)。回顾new的实现步骤首先新建一个对象然后将对象的原型指向Person.prototype然后Person.apply(obj)返回这个对象。注意第 3 步apply会执行Person方法体此时typeof this.getName ! function成立于是执行Person.prototype { ... }。关键点在于实例的原型在new的第 2 步就已经确定了它指向的是旧的Person.prototype。现在用字面量直接覆盖Person.prototype只是让构造函数身上的prototype属性换了个新对象并不会更改已经创建出来的实例的原型。person1依然指向旧原型而旧原型上没有getName方法所以person1.getName()报错。等到创建person2时实例的原型指向的是新的Person.prototype因为第 2 步在覆盖之后执行新原型上有getName所以person2.getName()可以正常执行。如果你就是想用字面量方式写代码可以尝试下这种写法——在覆盖原型后重新递归new一次让实例原型指向新原型function Person(name) { this.name name; if (typeof this.getName ! function) { Person.prototype { constructor: Person, getName: function () { console.log(this.name); } } return new Person(name); } } var person1 new Person(kevin); var person2 new Person(daisy); person1.getName(); // kevin person2.getName(); // daisy第一次new Person(kevin)时原型被覆盖随即return new Person(name)重新走一遍new流程此时getName已在原型上判断不成立实例的原型指向新原型一切正常。这种原型上找不到才初始化、初始化后重建实例的写法本质是动态原型模式的兜底方案实际使用较少但能帮助你更深刻地理解new的时序。5.1 寄生构造函数模式function Person(name) { var o new Object(); o.name name; o.getName function () { console.log(this.name); }; return o; } var person1 new Person(kevin); console.log(person1 instanceof Person) // false console.log(person1 instanceof Object) // true寄生构造函数模式我个人认为应该这样读寄生-构造函数-模式也就是说寄生在构造函数上的一种方法。也就是说打着构造函数的幌子挂羊头卖狗肉——表面上看你用了new Person()但构造函数内部并没有往this上挂任何东西而是显式return了一个普通对象。由于new遇到构造函数返回对象时会直接把这个返回值作为实例所以person1实际上只是那个new Object()出来的对象instanceof Person为false、instanceof Object为true——你看创建的实例使用instanceof都无法指向构造函数这个方法可以在特殊情况下使用。比如我们想创建一个具有额外方法的特殊数组但是又不想直接修改Array构造函数避免污染原生类型我们可以这样写function SpecialArray() { var values new Array(); for (var i 0, len arguments.length; i len; i) { values.push(arguments[i]); } values.toPipedString function () { return this.join(|); }; return values; } var colors new SpecialArray(red, blue, green); var colors2 SpecialArray(red2, blue2, green2); console.log(colors); console.log(colors.toPipedString()); // red|blue|green console.log(colors2); console.log(colors2.toPipedString()); // red2|blue2|green2你会发现其实所谓的寄生构造函数模式就是比工厂模式在创建对象的时候多使用了一个new实际上两者的结果是一样的。但作者的本意是希望能像使用普通Array一样使用SpecialArray——虽然把SpecialArray当成普通函数调用colors2的写法也一样能用但这并不是本意也变得不优雅。在可以使用其他模式的情况下不要使用这种模式。值得一提的是上面例子中的循环for (var i 0, len arguments.length; i len; i) { values.push(arguments[i]); }可以替换成values.push.apply(values, arguments);因为arguments是类数组对象push恰好支持一次传入多个参数借助apply把整个arguments展开传入即可。apply的这一特性在 《JavaScript深入之call和apply的模拟实现》 中有详细的模拟实现说明。5.2 稳妥构造函数模式function person(name){ var o new Object(); o.sayName function(){ console.log(name); }; return o; } var person1 person(kevin); person1.sayName(); // kevin person1.name daisy; person1.sayName(); // kevin console.log(person1.name); // daisy所谓稳妥对象指的是没有公共属性而且其方法也不引用this的对象。与寄生构造函数模式有两点不同新创建的实例方法不引用this——sayName闭包捕获的是构造函数的形参name而不是this.name不使用new操作符调用构造函数——直接person(kevin)当普通函数用。从上面的运行结果可以看到即便外部给person1.name赋了daisysayName()打印的依然是kevin——因为sayName读的是闭包里的name形参外部根本碰不到。person1.name daisy只是往对象上新增了一个与sayName无关的普通属性。适用场景稳妥对象最适合在一些安全的环境中——比如禁止使用this和new的受限环境或者希望外部只能通过暴露的方法读写数据、完全无法篡改内部状态的环境。缺点与工厂模式一样无法识别对象所属类型——person1 instanceof person为false。七种模式对比一览模式类型识别方法共享私有属性参数初始化封装性备注工厂模式❌ 无法识别❌ 每次新建✅✅一般最原始的批量创建思路构造函数模式✅instanceof可用❌ 每次新建✅✅较好方法重复创建是硬伤构造函数模式优化✅✅ 全局共享✅✅❌ 破坏封装方法被拆到全局污染作用域原型模式✅✅❌ 全部共享❌一般引用类型属性会被实例互相污染原型模式优化3.1❌ 丢失 constructor✅❌❌较好字面量重写原型后需手动补 constructor组合模式✅✅✅✅较好分两块写使用最广泛的方案动态原型模式✅✅✅✅最佳注意不能用字面量重写原型寄生构造函数模式❌ 实例不是构造函数的类型❌✅✅一般适合为原生类型加料如 SpecialArray稳妥构造函数模式❌❌✅闭包私有不可篡改✅最佳适合安全环境方法不引用 this 且不用 new仓库中的实践印证本仓库虽然以文章为主但仍可在源码中看到这些模式在真实库中的应用demos/ES6/generator/generator-es5.jsBabel 编译 Generator 的 runtime 源码第 39 行使用Object.create(protoGenerator.prototype)来创建生成器对象——这正是以某个对象为原型创建新对象的原型式/原型式创建思路在现代转译代码中的直接落地与本篇第 3 节原型模式、以及Object.create所代表的思想一脉相承同系列 《JavaScript深入之new的模拟实现》 中的objectFactory完整实现了new的四步过程是理解构造函数模式与动态原型模式时序的最佳参考同系列 《JavaScript深入之从原型到原型链》 给出了prototype、__proto__、constructor三者关系的完整推导与验证代码是理解原型模式、组合模式的底层地基。相关阅读《JavaScript深入之从原型到原型链》——prototype、__proto__、constructor与原型链的完整讲解《JavaScript深入之new的模拟实现》——new四步执行过程与返回值处理《JavaScript深入之call和apply的模拟实现》——this指向改变与apply展开类数组参数的原理《JavaScript深入之继承的多种方式和优缺点》——创建对象问题的自然延续继承的多种方式与优缺点本仓库「JavaScript 深入系列」完整目录见 README.md同系列文章均收录于 articles/深入系列文章 目录共十五篇覆盖原型、作用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等底层难点概念。赞分享技术博客文档教程【免费下载链接】Blog冴羽写博客的地方预计写四个系列JavaScript深入系列、JavaScript专题系列、ES6系列、React系列。项目地址https://gitcode.com/GitHub_Trending/blo/Blog点击查看免费下载相关推荐Moonshine Voice Python 包实战指南用 30 行代码构建本地语音转录、指令识别与语音合成应用Moonshine Voice Python 包实战指南用 30 行代码构建本地语音转录、指令识别与语音合成应用 导读 本文以 Moonshine Voice技术博客文档教程JavaScript 对象创建方式深度解析对象字面量、构造函数、工厂函数与 Object.create 的选型指南JavaScript 对象创建方式深度解析对象字面量、构造函数、工厂函数与 Object.create 的选型指南 本文基于 30 Seconds of In教程前端JavaScript工厂模式完全指南创建对象的5种高效方法JavaScript工厂模式完全指南创建对象的5种高效方法 工厂模式是JavaScript开发中最实用的设计模式之一它能帮助你轻松创建各种复杂对象提高代码上一篇DS4Windows陀螺仪校准终极指南5步解决手柄漂移问题下一篇3 步上手 IcemacOS 菜单栏管理完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考