JS入门难点解析10-创建对象
JS入门难点解析10-创建对象
（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）
（注2：更多内容请查看我的目录。）
1. 简介
学习JS，对象是一个绕不开的话题。本章将由浅入深探讨对象的创建方法。
2. 创建单个对象的三种简单办法
简单的对象创建方法，主要用于创建单个的对象。但是不适合创建多个对象。就像是手工制品，不适合量产。
2.1 对象字面量
最简单的对象创建方法，莫过于使用对象字面量了。
var doll = {
name: "Nicholas",
age: 29,
sayName: function () {
console.log(this.name);
}
};这种写法简单干净，给人一种数据封装的感觉，是开发人员最青睐的创建对象的方法。要注意，使用对象字面量的方法来定义对象，属性名会自动转换成字符串。另外，一般地，对象字面量的最后一个属性后的逗号将忽略，但在IE7-浏览器中导致错误，所以最后一个属性后面最好不要带逗号。
2.2 new + 内置对象
最常用的就是new操作符后跟Object构造函数。
var doll = new Object();
//如果不给构造函数传递参数可以不加括号 var doll= new Object;
doll.name = 'Nicholas';
doll.age = 29;当然其他内置对象还有Array，Date，RegExp，Function，基本包装类型等。比如：
var colors = new Array("red", "blue", "green");2.3 Object.create()
ES5定义了一个名为Object.create()的方法，它创建一个新对象，第一个参数就是这个对象的原型，第二个可选参数用以对对象的属性进行进一步描述。
var o1 = Object.create({x:1,y:1}); // o1继承了属性x和y
console.log(o1.x); // 1可以通过传入参数null来创建一个没有原型的新对象，但通过这种方式创建的对象不会继承任何东西，甚至不包括基础方法。比如toString()和valueOf()。
var o2 = Object.create(null); // o2不继承任何属性和方法
var o1 = {};
console.log(Number(o1)); // NaN
console.log(Number(o2)); // Uncaught TypeError: Cannot convert object to primitive value如果想创建一个普通的空对象(比如通过{}或new Object()创建的对象)，需要传入Object.prototype。
var o3 = Object.create(Object.prototype); // o3和{}和new Object()一样
var o1 = {};
console.log(Number(o1)); // NaN
console.log(Number(o3)); // NaNObject.create()方法的第二个参数是属性描述符。
var o1 = Object.create({z:3},{
x:{value:1,writable: false,enumerable:true,configurable:true},
y:{value:2,writable: false,enumerable:true,configurable:true}
});
console.log(o1.x,o1.y,o1.z); // 1 2 33. 创建多个对象的5种模式
虽然第二节中介绍的三种方法可以方便地创建一个对象，但这些方式有个明显的缺点：使用同一个接口创建很多对象，会产生大量的重复代码。例如，要创建10个具有name，age属性和sayName方法的对象。利用对象字面量方法只能如下：
var doll1 = {
name: "Nicholas",
age: 29,
sayName: function () {
console.log(this.name);
}
};
var doll2 = {
name: "Nicholas",
age: 29,
sayName: function () {
console.log(this.name);
}
};
...
var doll10 = {
name: "Nicholas",
age: 29,
sayName: function () {
console.log(this.name);
}
};为了解决这个问题，人们开始使用工厂模式来创建对象。该模式抽象了创建具体对象的过程，用函数来封装以特定接口创建对象的细节。这就好比原来是手工做一样玩具，而现在你把流程程序化，做成一台机器，用机器代替了人工。
3.1 工厂模式
function createDoll(name, age) {
var o = new Object();
o.name = name;
o.age = age;
o.sayName = function () {
alert(this.name);
};
return o;
}
var doll1 = createDoll("Nicholas", 29);
var doll2 = createDoll("Greg", 27);createDoll函数能够根据接收的参数来创建一个包含所有必要信息的Doll对象，可以无数次地调用这个函数，每次都能返回具有name，age属性和sayName方法的对象。
工厂模式虽然解决了创建多个相似对象的问题，但没有解决对象识别的问题，因为使用该模式并没有给出对象的类型。你并不知道doll1和doll2都是createDoll创建出来的对象，你甚至不知道它们是不是一类东西。或者说，你虽然用机器做出了玩具，但是你并不知道这是同一个机器造出的同一类玩具。
那怎么办呢？当然是品牌化了。
3.2 构造函数模式
前面说过，你可以用原生构造函数来创建对象。同样，你也可以通过创建自定义的构造函数，来定义自定义对象类型的属性和方法。创建自定义的构造函数意味着可以将它的实例标识为一种特定的类型，而这正是构造函数模式胜过工厂模式的地方。该模式没有显式地创建对象，直接将属性和方法赋给了this对象，且没有return语句。
function Doll(name, age) {
this.name = name;
this.age = age;
this.sayName = function () {
alert(this.name);
};
}
var doll1 = new Doll("Nicholas", 29);
var doll2 = new Doll("Greg", 27);利用这种方法，我们给Doll定义了品牌‘Doll’，doll1和doll2都是Doll对象的实例，当然其本身也是Object的实例，Object本身就是最大的品牌。如下：
alert(doll1 instanceof Object); // true
alert(doll1 instanceof Doll); // true
alert(doll2 instanceof Object); // true
alert(doll2 instanceof Doll); // true注意，构造函数模式与工厂模式的区别：
- 没有显示地创建对象。
- 直接将属性和方法赋给了this对象。
- 没有return。
此外，要使用构造函数模式创建对象，必须使用new操作符。以这种方式调用构造函数实际会经历以下步骤：
- 创建一个新对象。
- 将构造函数的作用域赋给新对象（因此this就指向了这个新对象）（参考JS入门难点解析7-this）。
- 执行函数中的代码（为这个新对象添加属性）。
- 返回新对象。
那么构造函数模式的缺点是什么呢？使用构造函数的主要问题是每个方法都要在每个实例上重新创建一遍，创建多个完成相同任务的方法完全没有必要，浪费内存空间。那么，最简单的办法，把函数方法定义在外部不就行了么。
3.2.1 构造函数拓展模式
在构造函数模式的基础上，把方法定义转移到构造函数外部，可以解决方法被重复创建的问题。
function Doll(name, age) {
this.name = name;
this.age = age;
this.sayName = sayName;
}
function sayName() {
alert(this.name);
};
var doll1 = new Doll("Nicholas", 29);
var doll2 = new Doll("Greg", 27);但是，问题又来了。在全局作用域中定义的函数实际上只能被某个对象调用，这让全局作用域有点名不副实。而且，如果对象需要定义很多方法，就要定义很多全局函数，严重污染全局空间，这个自定义的引用类型没有封装性可言了。
当然构造函数不止前述所说，还有以下两个变种。
3.2.2 寄生构造函数模式
该模式的基本思想是创建一个函数，该函数的作用仅仅是封装创建对象的代码，然后再返回新创建的对象。该模式是工厂模式和构造函数模式的结合。
寄生构造函数模式与构造函数模式有相同的问题，每个方法都要在每个实例上重新创建一遍，创建多个完成相同任务的方法完全没有必要，浪费内存空间。另外，使用该模式返回的对象与构造函数或者与构造函数的原型属性之间没有任何关系。因此，使用instanceof运算符和prototype属性都没有意义。所以，该模式要尽量避免使用。这种模式有点类似于你借别人的工厂生产的产品，无法贴上他们品牌的标识。你借用的是工厂，但不是品牌。
function Doll(name,age){
// 这里也可以是new Array或者其他构造函数，用于寄生
var o = new Object();
o.name = name;
o.age = age;
o.sayName = function(){
console.log(this.name);
};
return o;
}
var doll1 = new Doll("Nicholas",29);
var doll2 = new Doll("Greg",25);
//具有相同作用的sayName()方法在doll1和doll2这两个实例中却占用了不同的内存空间
console.log(doll1.sayName === doll2.sayName); // false
console.log(doll1 instanceof Doll); // false
console.log(doll1.__proto__ === Doll.prototype); // false3.2.3 稳妥构造函数模式
所谓稳妥对象指没有公共属性，而且其方法也不引用this的对象。稳妥对象最适合在一些安全环境中(这些环境会禁止使用this和new)或者在防止数据被其他应用程序改动时使用。
稳妥构造函数与寄生构造函数模式相似，但有两点不同：一是新创建对象的实例方法不引用this；二是不使用new操作符调用构造函数。
function Doll(name,age){
//创建要返回的对象
var o = new Object();
//可以在这里定义私有变量和函数
//添加方法
o.sayName = function(){
console.log(name);
};
//返回对象
return o;
}
//在稳妥模式创建的对象中，除了使用sayName()方法之外，没有其他方法访问name的值
var doll = Person("Nicholas",29);
doll.sayName();//"Nicholas"与寄生构造函数模式相似，使用稳妥构造函数模式创建的对象与构造函数之间也没有什么关系，因此instanceof操作符对这种对象也没有什么意义。好像是工厂针对客户的定制生产一样。
3.3 原型模式
我们创建的每个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解，那么prototype就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说，不必在构造函数中定义对象实例的信息，而是可以将这些信息直接添加到原型对象中。就好像做了一个模具，直接把信息刻在模具，就可以利用该模具实现复制量产了。
function Doll() {
}
Doll.prototype.name = "Nicholas";
Doll.prototype.age = 29;
Doll.prototype.job = "Software Engineer";
Doll.prototype.sayName = function () {
alert(this.name);
};
var doll1 = new Doll();
doll1.sayName(); //"Nicholas"
var doll2 = new Doll();
doll2.sayName(); //"Nicholas"
alert(doll1.sayName == doll2.sayName); //true为原型一个个添加属性和方法太慢反，我们可以考虑使用字面量来创建原型对象。
function Doll(){};
Doll.prototype = {
name: "Nicholas",
age: 29,
sayName : function(){
console.log(this.name);
}
};
var doll1 = new Doll();
doll1.sayName();//"Nicholas"
console.log(doll1.constructor === Doll);//false
console.log(doll1.constructor === Object);//true但是，经过对象字面量的改写后，constructor不再指向Doll了。因为此方法完全重写了默认的prototype对象，使得Doll.prototype的自有属性constructor属性不存在，只有从原型链中找到Object.prototype中的constructor属性。
所以，可以显式地设置原型对象的constructor属性。
function Doll(){};
Doll.prototype = {
constructor:Doll,
name: "Nicholas",
age: 29,
sayName : function(){
console.log(this.name);
}
};
var doll1 = new Doll();
doll1.sayName();//"Nicholas"
console.log(doll1.constructor === Doll);//true
console.log(doll1.constructor === Object);//false由于默认情况下，原生的constructor属性是不可枚举的，更妥善的解决方法是使用Object.defineProperty()方法，改变其属性描述符中的枚举性enumerable。
function Doll(){};
Doll.prototype = {
name: "Nicholas",
age: 29,
sayName : function(){
console.log(this.name);
}
};
Object.defineProperty(Doll.prototype,'constructor',{
enumerable: false,
value: Doll
});
var doll1 = new Doll();
doll1.sayName();//"Nicholas"
console.log(doll1.constructor === Doll);//true
console.log(doll1.constructor === Object);//false原型模式问题在于引用类型值属性会被所有的实例对象共享并修改，这也是很少有人单独使用原型模式的原因。
function Doll(){};
Doll.prototype = {
constructor:Doll,
name: "Nicholas",
age: 29,
colors: ['blue', 'green'],
sayName : function(){
console.log(this.name);
}
};
var doll1 = new Doll();
var doll2 = new Doll();
doll1.colors.push('red');
console.log(doll1.colors);//['blue', 'green','red']
console.log(doll2.colors);//['blue', 'green','red']
console.log(doll1.colors === doll2.colors);//true3.4 组合模式(使用最广泛)
组合使用构造函数模式和原型模式是创建自定义类型的最常见方式。构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性，这种组合模式还支持向构造函数传递参数。实例对象都有自己的一份实例属性的副本，同时又共享对方法的引用，最大限度地节省了内存。该模式是目前使用最广泛、认同度最高的一种创建自定义对象的模式。
function Doll(name, age) {
this.name = name;
this.age = age;
this.colors = ['blue','green'];
}
Doll.prototype = {
constructor:Doll,
sayName : function(){
console.log(this.name);
}
};
var doll1 = new Doll("Nicholas", 29);
var doll2 = new Doll("Greg", 27);
doll1.colors.push('red');
console.log(doll1.colors);//['blue', 'green','red']
console.log(doll2.colors);//['blue', 'green']
console.log(doll1.colors === doll2.colors);//false
console.log(doll1.sayName === doll2.sayName);//true3.5 动态原型模式
动态原型模式将组合模式中分开使用的构造函数和原型对象都封装到了构造函数中，然后通过检查方法是否被创建，来决定是否初始化原型对象。
function Doll(name, age) {
//属性
this.name = name;
this.age = age;
this.colors = ['blue','green'];
}
//方法
if(typeof this.sayName != "function"){
Doll.prototype.sayName = function(){
console.log(this.name);
};
Doll.prototype.sayColors = function(){
console.log(this.colors);
};
}
};
var doll1 = new Doll("Nicholas", 29);
doll1.sayName();//"Nicholas"这里，只有在sayName和sayColors方法不存在的情况下，才会将它们添加到原型中。这段代码只会在初次调用构造函数时才执行。此后，原型已经初始化，不需要再做修改。另外，这里对原型所做的修改，能够立即在所有实例中得到反映。因此，除了不能使用对象字面量重写原型外，这种方法可谓相当完美。
注意，使用动态原型模式时：
- 如果原型对象中包含多个语句，只需要检测其中一个语句即可。
- 不能使用对象字面量重写原型。因为在已经创建了实例的情况下重写原型，就会切断现有实例与新原型的联系。
参考
javascript面向对象系列第二篇——创建对象的5种模式
BOOK-《JavaScript高级程序设计（第3版）》第6章