理解Javascript中类的定义

关于如何在Javascript中定义类，网上可以找到不少的文章。在开始讲之前，还是先来看看定义类的两种基本方式吧：

(1) 利用函数构造类型。

1
2
3
4
5
6
7


function Foo(text, url) {
    this.text = text;
    this.url = url;
    this.render = function() {
        document.write(‘<a href=”‘ + this.url + ‘“>’ + this.text + ‘</a>’);
    }
}

(2) 利用原型prototype。

1
2
3
4
5
6
7
8
9


function Bar(text, url) {
    this.text = text;
    this.url = url;
}
Bar.prototype = {
    render : function() {
        document.write(‘<a href=”‘ + this.url + ‘“>’ + this.text + ‘</a>’);
    }
}

代码并不复杂，相信大多数人看完之后都会晓得怎么使用了。但是当我第一次看到这种类的定义方式的时候觉得很奇怪，很长一段时间里都是知其然而不知其所以然。如果你有和我一样的困惑，也许可以分享一下我的一点经验。

先来看看怎么使用定义好的类型，

1
2
3
4


var a = new Foo(‘Link A’, ‘http://www.cnblogs.com');
var b = new Bar(‘Link B’, ‘http://www.csdn.net');
a.render();
b.render();

跟很多面向对象语言（如C#）的使用方法一样，都是使用new关键字实例化类，而且当你用instanceof来测试它们是不是相应类型时，都可以得到预望的答案。两种不同方式定义出来的类型Foo和Bar很多时候使用起来并没有什么不同。

但它们在原理上是完全不同，方式１,是在构造函数中动态中创建类的成员，这就意味着每个Foo的实例它们的render方法其实是两个完全独立的函数；而方式２,则是通过原型prototype的方式将类的共享成员与类的实例绑定在一起，所以每个Bar实例的render方法都是指向同一个方法，它是静态的。请看以下代码：

1
2
3
4
5


document.write(Object.prototype==String.prototype);
var c = new Foo(‘Link C’, ‘http://www.asp.net');
document.write(c.render == a.render);  // false
var d = new Bar(‘Link D’, ‘http://www.kleshwong.com);
document.write(d.render == b.render);  // true

Foo在实例化后就是一个独立的个体，它的任何改动不会影响到原来的类型定义，也不会影响到其他的实例；而Bar则不同，它的所有实例都依然受 prototype的影响，通过对Bar.prototype的修改或扩展，可以影响到所有包括已经实例化的实例。回过头来看Foo，由于它的成员，特别是成员函数是动态创建的，利用闭包，则可以模拟面向对象中的“私有成员”，这一点内容会很长，稍后有时间再和大家分享。

两种方式各有特点。但是最后，严格来说，无论什么方式，都只能说是“模拟自定义类型”，因为在基于对象的Javascript中，它事实上是没有原生的“自定义类型”的概念的（这一点也很长，暂不细说）。

最后推荐大家一般使用方式２来在Javascript模拟自定义类，一来，速度上会比较快，而且还可以通过prototype对类型进行修改，除非你有需要用到闭包来模拟“私有成员”。

Contents