Klesh.Cn

concentrating on knowing more...

理解Javascript中类的定义

 

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

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

function Foo(text, url) {
	this.text = text;
	this.url = url;
	
	this.render = function() {
		document.write('<a href="' + this.url + '">' + this.text + '</a>');
	}
}
(2) 利用原型prototype。
function Bar(text, url) {
	this.text = text;
	this.url = url;
}
Bar.prototype = {
	render : function() {
		document.write('<a href="' + this.url + '">' + this.text + '</a>');
	}
}

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

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

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很多时候使用起来并没有什么不同。

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

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.klesh.cn);
document.write(d.render == b.render);  // true

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

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

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

删除线和斜体部分根据木野狐同志的意见修正。

posted on 2007-09-28 11:32  Klesh Wong  阅读(1862)  评论(12编辑  收藏  举报

导航