JavaScript面向对象的程序设计——对象、创建对象和原生链

1 对象

     面向对象(Object-Oriented,OO)的语言的一个标记，都有类的概念，而通过类可以创建任意多个具有相同属性和方法的对象。ECMA-262把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数。”

创建的自定义对象最简单方式：创建一个object实例，再为其添加属性和方法。目前对象字面量成为创建这种对象的首选模式。

var person = {
	name:"",
	age:29,
	job:"Software Engineer",

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

2 创建对象的几大模式

着重整理后，以图形化方式展示：

其中，A 工厂模式：考虑到ECMAScript中无法创建类，发明了一种函数来封装以特定接口创建对象的细节，代码例子如下：

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");

    B 构造函数模式：重写上述例子

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");

    C 原型模式的代码：

	function Person(){
	}
/* 首先采用注释以下代码
    Person.prototype.name = "Nicholas";
	Person.prototype.age = 29;
	Person.prototype.job = "Software Engineer";
	Person.prototype.sayName = function (){
		alert(this.name);
	};
    然后为了更简单的原型语法：为减少不必要的输入，也为了从视觉上更好的封装原型的功能
    下述将Person.prototype设置为等于一个以对象字面量形式创建的新对象
*/
    Person.prototype = {
		name:"Nicholas",
		age:29,
		job:"Software Engineer",
		sayName: function(){
			alert(this.name);
		}
	};
	
	var person1 = new Person();
	var person2 = new Person();

	alert(person1.hasOwnProperty("name"));   //false
	alert("name" in person1); //true

	person1.name = "Greg";
	alert(person1.name);         //"Greg"__来自实例
	alert(person1.hasOwnProperty("name"));    //true
	alert("name" in person1); //true

	alert(person2.name);         //"Nicholas"__来自原型
	alert(person2.hasOwnProperty("name"));    //false
	alert("name" in person2); //true

	delete person1.name;
	alert(person1.name);         //"Nicholas"__来自原型
	alert(person1.hasOwnProperty("name"));    //false
	alert("name" in person1); //true

        var friend = new Person();

	alert(friend instanceOf Object);      //true
	alert(friend instanceOf Person);      //true
	alert(friend.constructor == Person);  //false，不再指向Person
	alert(friend.constructor == Object);  //true
    //解决方法
    //重设构造函数，只适用ECMAScript 5兼容的浏览器
	Object.defineProperty(Person.prototype,"constructor",{
		enumerable: false,
		value:Person
	});

    原型对象问题：

         1 省略了为构造函数传递初始化参数，结果所有实例在默认情况下都取得相同的属性值。

         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

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

    这种构造函数和原型混成模式，是目前在ECMAScript中使用最广泛、认同度最高的一种创建自定义类型的方法。解决构造函数模式的问题和原型模式下的问题。

    //重写前面的例子
	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,Court,Van"
	alert(person2.friends);     //"Shelby,Court"
	alert(person1.friends  === person2.friends);  //false
	alert(person1.sayName === person2.sayName);   //true

3  构造函数、原型和实例关系

4 原型链的基本概念

ECMAScript只支持实现继承，实现继承主要靠原型链来实现。原型链的基本概念图解，如下图所示：

    根据上述图示，将原型对象等于另一个类型的实例后，在实现继承基础上，同时也方便理解构造函数、原型和实例之间的关系。假设另一个原型又是另一个类型的实例，上述关系依然成立，如此层层递进，就构成了原型链。

 

参考文献：NicholasC.Zakas. JavaScript高级程序设计[M]. 2012.P156-192