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); //falsealert(person1.sayName === person2.sayName); //true

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