一、基本使用方法
prototype属性可算是JavaScript与其他面向对象语言的一大不同之处。
简而言之,prototype就是“一个给类的对象添加方法的方法”,使用prototype属性,可以给类动态地添加方法,以便在JavaScript中实现“继承”的效果。
具体来说,prototype 是在 IE 4 及其以后版本引入的一个针对于某一类的对象的方法,当你用prototype编写一个类后,如果new一个新的对象,浏览器会自动把prototype中的内容替你附加在对象上。这样,通过利用prototype就可以在JavaScript中实现成员函数的定义,甚至是“继承”的效果。
一个简单的示例如下:
Number.prototype.add = function (num){ return ( this +num);}
这是对已有类添加方法。这样写,可以增强已有类的功能,例如可以给Array类增加push方法如下:
Array.prototype.push = function (new_element){ this [ this .length]=new_element; return this .length; }
对于自定义的类(或者称函数对象),也可以这样写:
function MyApplication() { this .counter = 0; this .map = new GMap2(document.getElementById( "map_canvas" )); this .map.setCenter( new GLatLng(39.917,116.397), 14); GEvent.bind(this .map, "click" , this , this .onMapClick); } MyApplication.prototype.onMapClick = function() { this .counter++; alert("这是您第 " + this .counter + " 次点击地图" ); }
这里定义了创建地图的类,并且为其定义了“单击”事件的响应函数。
二、prototype的动态特性及弊端
需要注意的是,prototype为我们提供了方便,使我们可以在类定义完成之后,仍可以随时为其添加方法、属性,随时添加随时使用——也就是prototype的定义具有动态性。 但是越灵活的语言出现错误的可能性越大。这就需要我们在使用时,必须养成一些良好的习惯。
“首先,如果可以动态添加属性和方法,那么很容易让人想到,当我调用时,我想要调用的属性或者方法存在不? 这是一个很严肃的问题,如果当我们调用时根本没有该属性或者方法,将可能导致我们的脚本down掉。” 对于这个问题,在使用时我们以后可以按照下面的写法书写:
function MyObject(name, size) { this .name = name; this .size = size; } MyObject.prototype.height = "2.26 meters" ; MyObject.prototype.tellHeight = function () { return "height of " + this .name+ " is " + this .height; } var myobj1 = new MyObject( "haha" , 3); if (myobj1.tellHeight) { domDiv.innerHTML += myobj1.tellHeight()+"; }
属性和方法在不在的问题简单,可是属性和方法变不变化的问题可就严重了。在不在我们可以检测,变不变呢?比如,请看下面的代码:
function MyObject(name, size) { this .name = name; this .size = size; } MyObject.prototype.color = "red" ; MyObject.prototype.tellColor = function() { return "color of " + this .name+ " is " + this .color; } var myobj1 = new MyObject( "tiddles" , "7.5 meters" ); domDiv.innerHTML += myobj1.tellColor()+"<br /><br />" ; MyObject.prototype.color = "green" ; domDiv.innerHTML += myobj1.tellColor()+"<br /><br />" ;
修改的是类MyObject的color属性。但是你惊奇的会看到你之前实例化的对象myobj1的属性值竟然也变化了: color of tiddles is red color of tiddles is green 上面是属性,还有方法,方法也是可以变的!
function MyObject(name, size) { this .name = name; this .size = size; } MyObject.prototype.color = "red" ; MyObject.prototype.tellColor = function () { return "color of " + this .name+ " is " + this .color; } var myobj1 = new MyObject( "tiddles" , "7.5 meters" ); domDiv.innerHTML += myobj1.tellColor()+"<br /><br />" ; MyObject.prototype.color = "green" ; MyObject.prototype.tellColor = function () { return "your color of " + this .name+ " is " + this .color; } domDiv.innerHTML += myobj1.tellColor()+"<br /><br />" ;
这段代码的结果是:
color of tiddles is red your color of tiddles is green
Java和C#这些比较严格的语言,虽然降低了灵活性,但也减少了犯错误的可能。这样,即使一个新手,他写出的代码也不会与高手差太多。但是,像Javascript这样的脚本语言,由于太灵活,所以,一定要有好的代码编写习惯,否则出现了上面的问题,调试时可就难咯!
三、prototype的实现机制
可以说,prototype实际上是“引用”,而非“赋值”。也就是给一个类添加一个属性或者方法,是给它添加了个引用,而非赋值一份给它。 看看下面的这个例子:
<html> <head> <meta http-equiv="content-type" content= "text/html; charset=UTF-8" /> <title>Test "prototype" </title> <mce:script type="text/javascript" ><!-- function ClassA() { alert("a" ); this .a= function (){alert();}; } function ClassB() { alert("b" ); this .b= function (){alert();}; } ClassB.prototype.a=new ClassA(); ClassB.prototype.xx = "xx" ; function initialize() { var objB1= new ClassB(); var objB2= new ClassB(); alert(objB1.a==objB2.a); alert(objB1.b==objB2.b); alert("objB1.xx: " + objB1.xx + ", objB2.xx: " + objB2.xx); ClassB.prototype.xx = "yy" ; alert("objB1.xx: " + objB1.xx + ", objB2.xx: " + objB2.xx); objB2.xx = "zz" ; alert("objB1.xx: " + objB1.xx + ", objB2.xx: " + objB2.xx); } </head> <body> <mce:script type="text/javascript" ><!-- initialize(); </body> </html>
其执行结果是依次弹出以下窗口: a b b true false objB1.xx: xx, objB2.xx: xx objB1.xx: yy, objB2.xx: yy objB1.xx: yy, objB2.xx: zz 相关的解释已经注释在代码中。从上面的代码可以发现,prototype只是给ClassB添加了ClassA实例的引用。因此,两个ClassB的实例中的a实例相等。
同时,ClassA的构造函数只在添加引用时被执行一次,此后ClassB的对象实例化时,只执行ClassB的构造函数。