JavaScript面向对象代码的变迁过程

注：本文主要内容整理自《JavaScript高级程序设计》。

Object构造函数或者对象字面量：

//对象构造函数
var person = new Object();
person.name = "Nick";
person.age = 29;
person.job = "doctor";

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

//对象字面量
var person={
name: "Nick",
age: 29,
job: "doctor",

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

缺点：一个接口创建很多对象，产生大量重复代码。

↓
工厂模式：

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("Nick", 29, "doctor");
var person2 = createPerson("Summer", 24, "student");

缺点：无法知道一个对象的类型。

↓

构造函数：

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

this.sayName = function(){
alert(this.name);
};
}
var person1 = new Person("Nick", 29, "doctor");
var person2 = new Person("Summer", 24, "student");

缺点：每个实例都会重新创建方法(如例子中的sayName())。

既然这样，就有人会想，将构造函数的方法移到函数外部，不就可以了？然而，方法移到外部后就成了全局函数，但此函数也只局限于此构造函数的相关实例对象使用，并非真正意义上的“全局函数”。而且，当实例对象需要定义函数很多时，就要定义多个全局函数,毫无封装性可言。

↓
原型模式：

function Person(){
}
Person.prototype.name = "Nick";
Person.prototype.age = 29;
Person.prototype.job = "doctor";

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

var person1 = new Person();

简单说，“原型模式”是通过构造函数所创建实例对象的原型对象，属性和方法由所有实例共享，构造函数成为空函数，实例外部有一个指向构造函数的原型对象的指针。
缺点：所有实例获得相同的属性值

↓

构造函数与原型模式混用：

function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.friends = {"Jack", "Rose"};
}

Person.prototype = {
constructor : Person,
sayName : function(){
alert(this.name);
}
}
var person1 = new Person("Nick", 29, "doctor");
var person2 = new Person("Summer", 24, "student");

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

这种模式是目前使用自广泛、认同度最高的一中创建自定义类型的方法。