JavaScript:面向对象编程的模拟实现方法(一)

JavaScript本身是一门基于对象的语言，就是说这门语言本身存在对象的概念，但是它是不满足面向对象的三大基本特征的。不过语言是死的，代码是活的，我们还是可以使用一些方法来模拟JavaScript的面向对象开发的。

三大特征

面向对象的三个特征是继承，封装，多态。使用JavaScript语言本身提供的特性和一些技巧，我们基本上能够模拟这三大特征。有通过原型或构造函数等多种方式来模拟继承；可以使用闭包的方式在构造函数内部定义私有变量来模拟封装；至于多态，已经用不着模拟了，因为JavaScript是一门动态语言，所有的变量都不会声明类型，可以随时指向不同的对象，如果先指向父类后指向子类，则会调用子类的方法。因此可以默认认为JavaScript是支持多态的。

创建对象的方法

1.1. 工厂模式

/* Factory mode */ function createPerson(name, age, job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function() { alert(this.name); }; } var factoryPer1 = createPerson("John", 23, "Doctor");

  无法识别对象类型。

1.2. 构造函数模式

/* Constructor mode */ function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = function() { alert(this.name); }; } var constructorPer1 = new Person("John", 23, "Doctor");

  每个方法都要在每个实例上重新创建一遍，内存占用是个问题。

1. 3. 原型模式

/* Prototype Mode example1 */ function Person() { } Person.prototype.name = "John"; Person.prototype.age = 23; Person.prototype.job = "Doctor"; Person.prototype.sayName = function() { alert(this.name); }; var prototypePer1 = new Person();

 

/* Prototype Mode example2 */ function Person() { } Person.prototype = { constructor : Person, name : "John", age : 23, job : "Doctor", sayName : function() { alert(this.name); } }; var prototypePer2 = new Person();

  类中的属性是被所有的实例共享的，修改一个，则会影响其他的每一个。没有构造函数的初始化过程。

1. 4. 组合使用构造函数模式和原型模式

/* Composite Constructor and Prototype mode */ function Person(name, age, job) { this.name = name; this.age = age; this.job = job; } Person.prototype = { constructor : Person, sayName : function() { alert(this.name); } } var compositePer1 = new Person("John", 23, "Doctor");

  认同度最高的一种方法。

1. 5. 动态原型模式

/* Dynamic Prototype Mode*/ 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 dynamicPer1 = new Person("John", 23, "Doctor");

  与组合模式相比，只是看起来更像个类而已。

1. 6. 寄生构造函数模式

/* Parasitic Constructor Mode */ 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 parasiticPer1 = new Person("John", 23, "Doctor");

  无法使用instanceof来确定对象类型。

1. 7. 稳妥构造函数模式

/* Durable Constructor Mode */ function createPerson(name, age, job) { var o = new Object(); o.sayName = function() { alert(name); }; return o; } var durablePer1 = new Person("John", 23, "Doctor");

  同寄生构造函数模式，instanceof无效。

继承的方法

2.1. 原型链

/* Prototype chain mode */ function SuperType() { this.property = true; } SuperType.prototype.getSuperValue = function() { return this.property; }; function SubType() { this.subProperty = false; } SubType.prototype = new SuperType(); SubType.prototype.getSubValue = function() { return this.subProperty; }; var instance = new SubType(); alert(instance instanceof SuperType); alert(Object.prototype.isPrototypeOf(instance));

  父类的实例属性成为了子类的原型属性，因此这些属性将被所有的子类实例共享。

2. 2. 借用构造函数

/* Constructor Stealing mode */ function SuperType() { this.colors = ["red", "blue", "green"]; } function SubType() { SuperType.call(this); } var instance = new SubType();

  每个方法都要在每个实例上重新创建一遍，内存占用是个问题。

2. 3. 组合继承(原型链和借用构造函数)

/* Composite Inheritance */ function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function() { alert(this.name); }; function SubType(age) { SuperType.call(this, name); this.age = age; } SubType.prototype = new SuperType(); SubType.prototype.sayAge = function() { alert(this.age); }; var instance = new SubType("John", 23);

  最常用的继承模式。instanceof和isPrototypeOf()也可以正常使用。

2. 4. 原型式继承

/* Prototypal Inheritance */ function object(o) { function F() {} F.prototype = o; return new F(); } var person = { name : "John", friends : ["Mike", "Lily"] }; var anotherPerson = object(person); anotherPerson.name = "Jack";

  同原型链模式，引用的属性将被所有的子类实例共享。

2. 5. 寄生式继承

/* parasitic Inheritance */ function createAnother(original) { var clone = object(original); clone.sayHi = function () { alert("hi"); }; return clone; } var person = { name : "John", friends : ["Mike", "Lily"] }; var anotherPerson = createAnother(person); anotherPerson.sayHi();

  无法做到函数复用。

2. 6. 寄生组合式继承

/* Parasitic Composite Inheritance */ function inheritPrototype(subType, superType) { var prototype = object(superType.prototype); prototype.constructor = subType; subType.prototype = prototype; } function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function() { alert(this.name); }; function SubType(age) { SuperType.call(this, name); this.age = age; } inheritPrototype(SubType, SuperType); SubType.prototype.sayAge = function() { alert(this.age); }; var instance = new SubType("John", 23);

  普遍认为的引用类型最理想的解决范式。

参考资料

1.  JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
   http://www.jb51.net/article/18254.htm
2.  javascript constructor 详解
   http://hi.baidu.com/maxwin2008/blog/item/8da86102c1ceda034bfb51a3.html
3.  Douglas Crockford的网站
   http://www.crockford.com/
4. Object-Oriented Javascript
   http://nefariousdesigns.co.uk/archive/2006/05/object-oriented-javascript/
5. JavaScript高级程序设计(第2版)