js中的面向对象的prototype，call的用法

妖狐艹你老母 2022-08-25 02:13 162阅读 0赞

javascript可以实现面向对象的思想的用法。其中prototype是常见的关键字，它的含义可以实际上是“引用”，而非“赋值”。也就是给一个类添加一个属性或者方法，是给它添加了个引用，而非赋值一份给它。

例子如下：

<table> 
 <tbody> 
 <tr> 
 <td>&lt;script type="text/javascript"&gt; function MyObject(name,size){//方法可以写为一个对象的形式 &nbsp; this.name=name; &nbsp; this.size=size; } MyObject.prototype.height="2.5m"; &nbsp;//引用对象，并扩展属性 MyObject.prototype.tellHeight=function(){//引用对象，并扩展方法 &nbsp; return "height of "+this.name+"is "+this.height; } var myobj1= new MyObject("box",3); if(myobj1.tellHeight){ alert(myobj1.tellHeight());//显示 height of box is 2.5m } &lt;/script&gt;</td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> 
 <div> 
 &nbsp; function MyApplication() { &nbsp; &nbsp; &nbsp; this.counter = 0; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; MyApplication.prototype.onMapClick = function() { &nbsp; &nbsp; &nbsp; &nbsp; this.counter++; &nbsp; &nbsp; &nbsp; &nbsp; alert("这是您第 " + this.counter + " 次点击地图"); &nbsp; &nbsp; }&nbsp; 
 </div> </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td>&lt;script type="text/javascript"&gt; &nbsp; function ClassA() { &nbsp; &nbsp; &nbsp; alert("a"); &nbsp; &nbsp; &nbsp; this.a=function(){alert();}; &nbsp; &nbsp; } &nbsp; &nbsp; function ClassB() { &nbsp; &nbsp; &nbsp; alert("b"); &nbsp; &nbsp; &nbsp; this.b=function(){alert();}; &nbsp; &nbsp; } &nbsp; &nbsp;&nbsp; &nbsp; ClassB.prototype.a=new ClassA(); &nbsp; &nbsp; &nbsp; &nbsp;//会导致弹出 a 对话框 &nbsp; &nbsp; ClassB.prototype.xx = "xx"; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; function initialize() { &nbsp; &nbsp; &nbsp; &nbsp;var objB1=new ClassB(); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //弹出 b 对话框 &nbsp; &nbsp; &nbsp; &nbsp;var objB2=new ClassB(); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //弹出 b 对话框 &nbsp; &nbsp; &nbsp; &nbsp;alert(objB1.a==objB2.a); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//true &nbsp; &nbsp; &nbsp; &nbsp;alert(objB1.b==objB2.b); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//false &nbsp; &nbsp; &nbsp; &nbsp;alert("objB1.xx: " + objB1.xx + ", objB2.xx: " + objB2.xx); //objB1.xx: xx, objB2.xx: xx &nbsp; &nbsp; &nbsp; &nbsp;ClassB.prototype.xx = "yy"; &nbsp; &nbsp; &nbsp; &nbsp;alert("objB1.xx: " + objB1.xx + ", objB2.xx: " + objB2.xx); //objB1.xx: yy, objB2.xx: yy &nbsp; &nbsp; &nbsp; &nbsp;objB2.xx = "zz"; &nbsp; &nbsp; &nbsp; &nbsp;alert("objB1.xx: " + objB1.xx + ", objB2.xx: " + objB2.xx); //objB1.xx: yy, objB2.xx: zz &nbsp; &nbsp;} &nbsp; initialize();&nbsp; &lt;/script&gt;</td> 
 </tr> 
 </tbody> 
</table>

prototype、call的用法

<table> 
 <tbody> 
 <tr> 
 <td>&lt;script type="text/javascript"&gt; function baseClass(){ &nbsp; &nbsp; this.showMsg = function() { &nbsp; &nbsp; &nbsp; &nbsp; alert("baseClass::showMsg"); &nbsp;&nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; this.baseShowMsg = function() { &nbsp; &nbsp; &nbsp; &nbsp; alert("baseClass::baseShowMsg"); &nbsp; &nbsp; } } baseClass.showMsg = function(){ &nbsp; &nbsp; alert("baseClass::showMsg static"); } function extendClass(){ &nbsp; &nbsp; this.showMsg =function () &nbsp;{ &nbsp; &nbsp; &nbsp; &nbsp; alert("extendClass::showMsg"); &nbsp; &nbsp; } } extendClass.showMsg = function(){ &nbsp; &nbsp; alert("extendClass::showMsg static") } extendClass.prototype = new baseClass(); var instance = new extendClass(); instance.showMsg(); //显示extendClass::showMsg instance.baseShowMsg(); //显示baseClass::baseShowMsg instance.showMsg(); //显示extendClass::showMsg baseClass.showMsg.call(instance);//显示baseClass::showMsg static var baseinstance = new baseClass(); baseinstance.showMsg.call(instance);//显示baseClass::showMsg &lt;/script&gt;</td> 
 </tr> 
 </tbody> 
</table>

参考：[http://blog.csdn.net/xiaoyuemian/article/details/3844305][http_blog.csdn.net_xiaoyuemian_article_details_3844305]

[http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html][http_www.cnblogs.com_yjf512_archive_2011_06_03_2071914.html]

[http_blog.csdn.net_xiaoyuemian_article_details_3844305]: http://blog.csdn.net/xiaoyuemian/article/details/3844305
[http_www.cnblogs.com_yjf512_archive_2011_06_03_2071914.html]: http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html