JavaScript--07 工厂模式、构造函数模式、原型模式的优缺点及组合使用

ECMA-262 把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数。”严格来讲，这就相当于说对象是一组没有特定顺序的值。
对象的每个属性或方法都有一个名字，而每个名字都映射到一个值。正因为这样（以及其他将要讨论的原因），我们可以把 ECMAScript 的对象想象成散列表：无非就是一组名值对，其中值可以是数据或函数。

一、普通方式创建对象

1.1 Object 构造函数

  创建自定义对象的最简单方式就是创建一个 Object 的实例，然后再为它添加属性和方法，如下所示：

var person = new Object(); 
person.name = "Nicholas"; 
person.age = 29; 
person.job = "Software Engineer"; 

person.sayName = function(){ 
	alert(this.name);  // "Nicholas"
}; 

1.2 对象字面量

  对象字面量语法可以写成这样：

var person = { 
	name: "Nicholas", 
	age: 29, 
	job: "Software Engineer", 
	
	sayName: function(){ 
		alert(this.name); 
	} 
}; 

1.3 这两种方法的缺点

  使用同一个接口创建很多对象，会产生大量的重复代码。
  为解决这个问题，人们开始使用工厂模式的一种变体。

二、工厂模式

function createPerson(name, age, job){ 
	var o = new Object(); 
	o.name = name; 
	o.age = age; 
	o.job = job; 
	o.sayName = function(){ 
		alert(this.name); 
	}; 
	return o; 
} 

var person1 = createPerson("Nicholas", 29, "Software Engineer"); 
var person2 = createPerson("Greg", 27, "Doctor"); 

  函数 createPerson() 能够根据接受的参数来构建一个包含所有必要信息的 Person 对象。可以无数次地调用这个函数，而每次它都会返回一个包含三个属性一个方法的对象。

2.1 工厂模式的优点

  工厂模式解决了创建多个相似对象的问题。

2.2 工厂模式的缺点

  没有解决对象识别的问题（即怎样知道一个对象的类型）。

三、构造函数模式

function Person(name, age, job){ 
	this.name = name; 
	this.age = age; 
	this.job = job; 
	this.sayName = function(){ 
		alert(this.name); 
	}; 
} 

var person1 = new Person("Nicholas", 29, "Software Engineer"); 
var person2 = new Person("Greg", 27, "Doctor"); 

  在这个例子中，Person() 函数与上面工厂模式里的 createPerson() 函数存在以下不同之处：

• 没有显式地创建对象；
• 直接将属性和方法赋给了 this 对象；
• 没有 return 语句。

  此外，还应该注意到函数名 Person 使用的是大写字母 P。
  按照惯例，构造函数始终都应该以一个大写字母开头，而非构造函数则应该以一个小写字母开头。
  这个做法借鉴自其他 OO 语言，主要是为了区别于 ECMAScript 中的其他函数；因为构造函数本身也是函数，只不过可以用来创建对象而已。

  在前面例子的最后，person1 和 person2 两个对象都有一个 constructor（构造函数）属性，该属性指向 Person，如下所示。

alert(person1.constructor == Person); //true 
alert(person2.constructor == Person); //true 

  对象的 constructor 属性最初是用来标识对象类型的。但是，提到检测对象类型，还是 instanceof 操作符要更可靠一些。
  我们在这个例子中创建的所有对象既是 Object 的实例，同时也是 Person 的实例，这一点通过 instanceof 操作符可以得到验证。

alert(person1 instanceof Object); //true 
alert(person1 instanceof Person); //true 

alert(person2 instanceof Object); //true 
alert(person2 instanceof Person); //true 

3.1 将构造函数当作函数

  构造函数与其他函数的唯一区别，就在于调用它们的方式不同。不过，构造函数毕竟也是函数，不存在定义构造函数的特殊语法。
  任何函数，只要通过 new 操作符来调用，那它就可以作为构造函数；而任何函数，如果不通过 new 操作符来调用，那它跟普通函数也不会有什么两样。
  例如，前面例子中定义的 Person() 函数可以通过下列任何一种方式来调用。

// 当作构造函数使用
var person = new Person("Nicholas", 29, "Software Engineer"); 
person.sayName(); //"Nicholas" 

// 作为普通函数调用
Person("Greg", 27, "Doctor"); // 添加到 window 
window.sayName(); //"Greg" 

// 在另一个对象的作用域中调用
var o = new Object(); 
Person.call(o, "Kristen", 25, "Nurse"); 
o.sayName(); //"Kristen" 

  区别是作用域不同，不使用 new 操作符调用 Person() 的结果是：属性和方法都被添加给 window 对象了。

3.2 构造函数的优点

  创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型；而这正是构造函数模式胜过工厂模式的地方。

3.3 构造函数的缺点

  使用构造函数的主要问题，就是每个方法都要在每个实例上重新创建一遍。
  在前面的例子中，person1 和 person2 都有一个名为 sayName() 的方法，但那两个方法不是同一个 Function 的实例。不要忘了——ECMAScript 中的函数是对象，因此每定义一个函数，也就是实例化了一个对象。从逻辑角度讲，此时的构造函数也可以这样定义。

function Person(name, age, job){ 
	this.name = name; 
	this.age = age; 
	this.job = job; 
	this.sayName = new Function("alert(this.name)"); // 与声明函数在逻辑上是等价的
} 

  以这种方式创建函数，会导致不同的作用域链和标识符解析，但创建 Function 新实例的机制仍然是相同的。因此，不同实例上的同名函数是不相等的，以下代码可以证明这一点。

alert(person1.sayName == person2.sayName); //false 

  然而，创建两个完成同样任务的 Function 实例的确没有必要；况且有 this 对象在，根本不用在执行代码前就把函数绑定到特定对象上面。
  因此，大可像下面这样，通过把函数定义转移到构造函数外部来解决这个问题。

function Person(name, age, job){ 
	this.name = name; 
	this.age = age; 
	this.job = job; 
	this.sayName = sayName; 
} 

function sayName(){ 
	alert(this.name); 
} 

var person1 = new Person("Nicholas", 29, "Software Engineer"); 
var person2 = new Person("Greg", 27, "Doctor");

  在这个例子中，由于 sayName 包含的是一个指向函数的指针，因此 person1 和 person2 对象就共享了在全局作用域中定义的同一个 ayName() 函数。
  这样做确实解决了两个函数做同一件事的问题，可是新问题又来了：在全局作用域中定义的函数实际上只能被某个对象调用，这让全局作用域有点名不副实。
  而更让人无法接受的是：如果对象需要定义很多方法，那么就要定义很多个全局函数，于是我们这个自定义的引用类型就丝毫没有封装性可言了。好在，这些问题可以通过使用原型模式来解决。

四、原型模式

  原型模式详解

4.1 原型模式的优点

  使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。

4.2 原型模式的缺点

  原型中所有属性是被很多实例共享的，这种共享对于函数非常合适。然而，对于包含引用类型值的属性来说，问题就比较大了。来看下面的例子：

function Person(){ 
} 

Person.prototype = { 
	constructor: Person, 
	name : "Nicholas", 
	age : 29, 
	job : "Software Engineer", 
	friends : ["Shelby", "Court"], 
	sayName : function () { 
		alert(this.name); 
	} 
}; 

var person1 = new Person(); 
var person2 = new Person(); 
person1.friends.push("Van"); 
alert(person1.friends); //"Shelby,Court,Van" 
alert(person2.friends); //"Shelby,Court,Van" 
alert(person1.friends === person2.friends); //true

  在此，Person.prototype 对象有一个名为 friends 的属性，该属性包含一个字符串数组。
  然后，创建了 Person 的两个实例。
  接着，修改了 person1.friends 引用的数组，向数组中添加了一个字符串。
  由于 friends 数组存在于 Person.prototype 而非 person1 中，所以刚刚提到的修改也会通过 person2.friends（与 person1.friends 指向同一个数组）反映出来。

五、组合使用构造函数和原型模式

  创建自定义类型的最常见方式，就是组合使用构造函数模式与原型模式。
  特点： 公用方法写原型，私有属性写实例。

5.1 组合使用的优点

  构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。
  结果，每个实例都会有自己的一份实例属性的副本，但同时又共享着对方法的引用，最大限度地节省了内存。
  另外，这种混成模式还支持向构造函数传递参数；可谓是集两种模式之长。下面的代码重写了前面的例子。

function Person(name, age, job){ 
	this.name = name; 
	this.age = age; 
	this.job = job; 
	this.friends = ["Shelby", "Court"]; 
} 

Person.prototype = { 
	constructor : Person, 
	sayName : function(){ 
		alert(this.name); 
	} 
} 

var person1 = new Person("Nicholas", 29, "Software Engineer"); 
var person2 = new Person("Greg", 27, "Doctor"); 

person1.friends.push("Van"); 
alert(person1.friends); //"Shelby,Count,Van" 
alert(person2.friends); //"Shelby,Count" 
alert(person1.friends === person2.friends); //false 
alert(person1.sayName === person2.sayName); //true 

  在这个例子中，实例属性都是在构造函数中定义的，而由所有实例共享的属性 constructor 和方法 sayName() 则是在原型中定义的。
  而修改了 person1.friends（向其中添加一个新字符串），并不会影响到 person2.friends，因为它们分别引用了不同的数组。
  这种构造函数与原型混成的模式，是目前在 ECMAScript 中使用最广泛、认同度最高的一种创建自定义类型的方法。可以说，这是用来定义引用类型的一种默认模式。

六、动态原型模式

  动态原型模式把所有信息都封装在了构造函数中，而通过在构造函数中初始化原型，又保持了同时使用构造函数和原型的优点。可以通过检查某个应该存在的方法是否有效，来决定是否需要初始化原型。

function Person(name, age, job){ 
	//属性
	this.name = name; 
	this.age = age; 
	this.job = job;

	//方法
	if (typeof this.sayName != "function"){ 
		Person.prototype.sayName = function(){ 
			alert(this.name); 
		}; 
	} 
} 

var friend = new Person("Nicholas", 29, "Software Engineer"); 
friend.sayName(); 

  这里只在 sayName() 方法不存在的情况下，才会将它添加到原型中。
  这段代码只会在初次调用构造函数时才会执行。此后，原型已经完成初始化，不需要再做什么修改了。
  不过要记住，这里对原型所做的修改，能够立即在所有实例中得到反映。因此，这种方法确实可以说非常完美。
  其中，if 语句检查的可以是初始化之后应该存在的任何属性或方法——不必用一大堆 if 语句检查每个属性和每个方法；只要检查其中一个即可。对于采用这种模式创建的对象，还可以使用 instanceof 操作符确定它的类型。

  使用动态原型模式时，不能使用对象字面量重写原型。前面已经解释过了，如果在已经创建了实例的情况下重写原型，那么就会切断现有实例与新原型之间的联系。

七、寄生构造函数模式 ---- 函数有返回值

  这种模式的基本思想是创建一个函数，该函数的作用仅仅是封装创建对象的代码，然后再返回新创建的对象；但从表面上看，这个函数又很像是典型的构造函数。

function Person(name, age, job){ 
	var o = new Object(); 
	o.name = name; 
	o.age = age; 
	o.job = job; 
	o.sayName = function(){ 
		alert(this.name); 
	}; 
	return o; 
} 

var friend = new Person("Nicholas", 29, "Software Engineer"); 
friend.sayName(); //"Nicholas"

  在这个例子中，Person 函数创建了一个新对象，并以相应的属性和方法初始化该对象，然后又返回了这个对象。

7.1 与工厂模式的区别

  除了使用 new 操作符并把使用的包装函数叫做构造函数之外，这个模式跟工厂模式其实是一样一样的。

// 工厂模式
var person2 = createPerson("Greg", 27, "Doctor"); 

// 寄生构造函数模式
var friend = new createPerson("Greg", 27, "Doctor"); 

7.2 关于构造函数返回值

  构造函数在不返回值的情况下，默认会返回新对象实例。而通过在构造函数的末尾添加一个 return 语句，可以重写调用构造函数时返回的值。

7.3 举例为特殊数组添加额外方法

  这个模式可以在特殊的情况下用来为对象创建构造函数。假设我们想创建一个具有额外方法的特殊数组。由于不能直接修改 Array 构造函数，因此可以使用这个模式。

function SpecialArray(){ 
	//创建数组
	var values = new Array(); 
	
	//添加值
	values.push.apply(values, arguments); 
	
	//添加方法
	values.toPipedString = function(){ 
		return this.join("|"); 
	}; 
	
	//返回数组
	return values; 
} 

var colors = new SpecialArray("red", "blue", "green"); 
alert(colors.toPipedString()); //"red|blue|green" 

  在这个例子中，我们创建了一个名叫 SpecialArray 的构造函数。
  在这个函数内部，首先创建了一个数组，然后 push() 方法初始化了数组的值。随后，又给数组实例添加了一个 toPipedString() 方法，该方法返回以竖线分割的数组值。最后，将数组以函数值的形式返回。接着，我们调用了 SpecialArray 构造函数，向其中传入了用于初始化数组的值，此后又调用了 toPipedString() 方法。

八、稳妥构造函数模式

  所谓稳妥对象，指的是没有公共属性，而且其方法也不引用 this 的对象。

8.1 稳妥构造函数遵循与寄生构造函数的区别

  稳妥构造函数遵循与寄生构造函数类似的模式，但有两点不同：

• 一是新创建对象的实例方法不引用 this；
• 二是不使用 new 操作符调用构造函数。

8.2 稳妥构造函数举例

  按照稳妥构造函数的要求，可以将前面的 Person 构造函数重写如下：

function Person(name, age, job){ 
 
	//创建要返回的对象
	var o = new Object(); 
	
	//可以在这里定义私有变量和函数
	
	//添加方法
	o.sayName = function(){ 
		alert(name); 
	}; 
	
	//返回对象
	return o; 
} 

  注意，在以这种模式创建的对象中，除了使用 sayName() 方法之外，没有其他办法访问 name 的值。
  可以像下面使用稳妥的 Person 构造函数。

var friend = Person("Nicholas", 29, "Software Engineer"); 
friend.sayName(); //"Nicholas" 

  这样，变量 friend 中保存的是一个稳妥对象，而除了调用 sayName() 方法外，没有别的方式可以访问其数据成员。即使有其他代码会给这个对象添加方法或数据成员，但也不可能有别的办法访问传入到构造函数中的原始数据。