企业官网建设流程全解析

• 技术博客
• 文档
• 教程

本篇为冴羽博客「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永远是false，person1 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关联在一起。

优点：方法不会重新创建——所有实例共享原型上的方法，内存最省。

缺点：

1. 所有的属性和方法都共享——这包括数据属性！引用类型属性（如数组、对象）一旦被某个实例修改，所有实例都会"看到"修改，实例之间没有私有数据；
2. 不能初始化参数——属性值写死在原型上，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的实现步骤：

1. 首先新建一个对象；
2. 然后将对象的原型指向Person.prototype；
3. 然后Person.apply(obj)；
4. 返回这个对象。

注意第 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的对象。

与寄生构造函数模式有两点不同：

1. 新创建的实例方法不引用this——sayName闭包捕获的是构造函数的形参name，而不是this.name；
2. 不使用new操作符调用构造函数——直接person('kevin')当普通函数用。

从上面的运行结果可以看到，即便外部给person1.name赋了"daisy"，sayName()打印的依然是"kevin"——因为sayName读的是闭包里的name形参，外部根本碰不到。person1.name = "daisy"只是往对象上新增了一个与sayName无关的普通属性。

适用场景：稳妥对象最适合在一些安全的环境中——比如禁止使用this和new的受限环境，或者希望外部只能通过暴露的方法读写数据、完全无法篡改内部状态的环境。

缺点：与工厂模式一样，无法识别对象所属类型——person1 instanceof person为false。

七种模式对比一览

仓库中的实践印证

本仓库虽然以文章为主，但仍可在源码中看到这些模式在真实库中的应用：

• demos/ES6/generator/generator-es5.js（Babel 编译 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、继承等底层难点概念。

• 技术博客
• 文档
• 教程