使用Modello编写JavaScript类

From：http://www.ajaxwing.com/index.php?id=2


一，背景
回顾一下编程语言的发展，不难发现这是一个不断封装的过程：从最开始的汇编语言，到面向过程语言，然后到面向对象语言，再到具备面向对象特性的脚本语言，一层一层封装，一步一步减轻程序员的负担，逐渐提高编写程序的效率。这篇文章是关于 JavaScript 的，所以我们先来了解一下 JavaScript 是一种怎样的语言。到目前为止，JavaScript 是一种不完全支持面向对象特性的脚本语言。之所以这样说是因为 JavaScript 的确支持对象的概念，在程序中我们看到都是对象，可是 Javascipt 并不支持类的封装和继承。曾经有过 C++、Java或者 php、python 编程经验的读者都会知道，这些语言允许我们使用类来设计对象，并且这些类是可继承的。JavaScript 的确支持自定义对象和继承，不过使用的是另外一种方式：prototype（中文译作：原型）。用过 JavaScript 的或者读过《设计模式》的读者都会了解这种技术，描述如下：

每个对象都包含一个 prototype 对象，当向对象查询一个属性或者请求一个方法的时候，运行环境会先在当前对象中查找，如果查找失败则查找其 prototype 对象。注意 prototype 也是一个对象，于是这种查找过程同样适用在对象的 prototype 对象中，直到当前对象的 prototpye 为空。

在 JavaScript 中，对象的 prototype 在运行期是不可见的，只能在定义对象的构造函数时，创建对象之前设定。下面的用法都是错误的：

o2.prototype = o1;
/*
  这时只定义了 o2 的一个名为“prototype”的属性，
  并没有将 o1 设为 o2 的 prototype。
*/

// ---------------

f2 = function(){};
o2 = new f2;
f2.prototype = o1;
/*
  这时 o1 并没有成为 o2 的 prototype，
  因为 o2 在 f2 设定 prototype 之前已经被创建。
*/

// ---------------

f1 = function(){};
f2 = function(){};
o1 = new f1;
f2.prototype = o1;
o2 = new f2;
/*
  同样，这时 o1 并不是 o2 的 prototype，
  因为 JavaScript 不允许构造函数的 prototype 对象被其它变量直接引用。
*/

正确的用法应该是：

f1 = function(){};
f2 = function(){};
f2.prototype = new f1;
o2 = new f2;

从上面的例子可以看出：如果你想让构造函数 F2 继承另外一个构造函数 F1 所定义的属性和方法，那么你必须先创建一个 F1 的实例对象，并立刻将其设为 F2 的 prototype。于是你会发现使用 prototype 这种继承方法实际上是不鼓励使用继承：一方面是由于 JavaScript 被设计成一种嵌入式脚本语言，比方说嵌入到浏览器中，用它编写的应用一般不会很大很复杂，不需要用到继承；另一方面如果继承得比较深，prototype 链就会比较长，用在查找对象属性和方法的时间就会变长，降低程序的整体运行效率。