日期:2014-05-16  浏览次数:20407 次

JavaScript学习之二 — JavaScript创建对象的8种方式
本文列举了《JavaScript高级程序设计:第二版》书中讲到的8种创建JavaScript对象的模式,这里有英文版下载

代码里边用到的一些公用方法本文后边有附
1、最简单的方式
/******************************************************************************************
 * 1、最简单的方式
 * 缺点:如果创建类似的对象,会出现大量的重复代码
 */
var person1 = new Object();
person1.nickname = 'maitian';
person1.age = 27;
person1.address = 'bj';
person1.getNickName = function() {
	return this.nickname
};
printPerson('1、最简单的方式', person1);

输出:
1、最简单的方式	 nickname: maitian, age: 27, address: bj

2、工厂模式
/*****************************************************************************************
 * 2、工厂模式
 * 优点:针对1存在的问题,解决代码重复
 * 缺点:
 * 	a、未解决对象识别问题,即该对象是什么类型
 *  b、每次创建对象,getNickName函数都会运行一次
 * @param {String} nickname
 * @param {number} age
 * @param {String} address
 * @return {Object}
 */
function createObject(nickname, age, address) {
	var person = new Object();
	person.nickname = nickname;
	person.age = age;
	person.address = address;
	person.getNickName = function() {
		return this.nickname
	};
	return person;
}
var person2 = createObject('maitian', 27, 'sz');
printPerson('2、工厂模式', person2);

输出:
2、工厂模式	 nickname: maitian, age: 27, address: sz

3、构造函数模式
/******************************************************************************************
 * 3、构造函数模式
 * 优点:解决第2中的缺点b提到的对象识别问题
 * 缺点:
 * 	 a、如同2中的缺点b,每次创建对象,getNickName函数都会运行一次
 * 	 b、如果创建对象的时候忘记了new,直接写成了var person = Person3('nickname',24,'address'),
 * 		person则为undefined
 * @param {String} nickname
 * @param {number} age
 * @param {String} address
 */
function Person3(nickname, age, address) {
	this.nickname = nickname;
	this.age = age;
	this.address = address;
	this.getNickName = function() {
		return this.nickname;
	}
};
var person3 = new Person3('maitian', 27, 'zz');
printPerson('3、构造函数模式', person3);
printMessage("  person3 instanceof Person3: " + (person3 instanceof Person3));
// 这里person3为undefined
person3 = Person3('maitian',24,'zz');

/**
 * 3.1、对构造函数模式的改进之一
 * 优点:解决了3中缺点a存在的每次创建对象都创建一个getNickName函数问题
 * 缺点:
 *  a、创建一个全局函数,别的地方几乎不会用到的
 *  b、依然存在3中缺点b
 * @param {String} nickname
 * @param {number} age
 * @param {String} address
 */
function Person31(nickname, age, address) {
	this.nickname = nickname;
	this.age = age;
	this.address = address;
	this.getNickName = getNickName;
};
var getNickName = function(){
	return this.nickname;
};
var person31 = new Person31('maitian', 27, 'zz');
printPerson('\t3.1、对构造函数模式的改进之一', person31);
printMessage("\t  person31 instanceof Person31: " + (person31 instanceof Person31));

//《JavaScript高级程序设计》第二版第18.1.1节中给出的解决方法
/**
 * 3.2、对构造函数模式的改进之二
 * 优点:解决了3中缺点b
 * 缺点:如3中缺点a
 * @param {} nickname
 * @param {} age
 * @param {} address
 * @return {}
 */
function Person32(nickname, age, address) {
	if (this instanceof Person32) {
		this.nickname = nickname;
		this.age = age;
		this.address = address;
		this.getNickName = function() {
			return this.nickname;
		}
	} else {
		return new Person32(nickname, age, address);
	}

};
var person32 = new Person32('maitian', 27, 'zz');
printPerson('\t3.2、对构造函数模式的改进之二', person32);
printMessage("\t  person32 instanceof Person32: " + (person32 instanceof Person32));

输出:
3、构造函数模式	 nickname: maitian, age: 27, address: zz
  person3 instanceof Person3: true
	3.1、对构造函数模式的改进之一	 nickname: maitian, age: 27, address: zz
	  person31 instanceof Person31: true
	3.2、对构造函数模式的改进之二	 nickname: maitian, age: 27, address: zz
	  person32 instanceof Person32: true

4、原型模式