`
dvtwill
  • 浏览: 9962 次
  • 性别: Icon_minigender_1
  • 来自: 济南
最近访客 更多访客>>
社区版块
存档分类
最新评论

JavaScript中的prototype(转自http://www.cnblogs.com/rgxs/archive/2008/01/13/javascrip

阅读更多
首先,Javascript中每个对象都有prototype属性,他是用来返回对象类型原型的引用的。我们使用prototype属性提供对象的类的一组基本功能。并且对象的新实例会"继承"赋予该对象原型的操作。但是这个prototype到底是怎么实现和被管理的呢?

对于对象的prototype属性的说明,Javascript手册上如是说:所有 Javascript内部对象都有只读的 prototype 属性。可以向其原型中动态添加功能(属性和方法),但该对象不能被赋予不同的原型。然而,用户定义的对象可以被赋给新的原型。

下面我们看三个经典的prototype属性的使用示例。

为脚本环境内建对象添加方法

Array.prototype.max = function()
{
    var i,max = this[0];
    for(i=0; i<this.length; i++)
    {
        if (max<this[i])
        max = this[i];
    }
    return max;
}

为用户自定义类添加方法

function SkyObject(name)
{
    this._name=name;
}

SkyObject.prototype.ShowName=function()
{
    alert(this._name);
}

更新自定义类的prototype

function SkyTestA()
{
    this.MethodA = function()
    {
        alert("SkyTestA.MethodA()");
    }
}

function SkyTestB()
{
    this.MethodB = function()
    {
        alert("SkyTestB.MethodB()");
    }
}

SkyTestB.prototype = new SkyTestA();

第三个使用了继承(原型继承,另外还有构造继承,调用继承等),SkyTestB继承了SkyTestA的方法。

prototype还有一个默认的属性:constructor,是用来表示创建对象的函数的(即我们OOP里说的构造函数)。constructor属性是所有具有prototype属性的对象的成员。它们包括除Global和Math对象以外的所有Javascript内部对象。constructor属性保存了对构造特定对象实例的函数的引用。

弄清楚了Javascript中prototype属性怎么使用后,下面我们再来深入的研究它。

Javascript实际上是使用了我们设计模式中prototype pattern的一种衍生形式。下面我先简单的说一下prototype pattern,然后再来看到底JScript中的prototype是怎么回事?!

What's prototype pattern?
Specify the kinds of objects to create using a prototypical instance, and create new objects by copying this prototype.
用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象。

原型模式允许一个对象再创建另外一个可定制的对象,根本无需知道任何如何创建的细节,工作原理是:通过将一个原型对象传给那个要发动创建的对象,这个要发动创建的对象通过请求原型对象拷贝它们自己来实施创建。

下面我们继续说Javascript里的prototype,为什么我们说它和prototype pattern里的prototype不一样呢?! 继续看示例:

function RP()
{
    RP.PropertyA = 1;
    RP.MethodA = function()
    {
        alert("RP.MethodA()");
    }
    this.PropertyA = 100;
    this.MethodA = function()
    {
        alert("this.MethodA()");
    }
}

RP.prototype.PropertyA = 10;
RP.prototype.MethodA = function()
{
    alert("RP.prototype.MethodA()");
}

RP是ResearchPrototype,看示例及结果分析:

程序代码:
<script type="text/javascript">
    var rp = new RP();
    alert(RP.PropertyA);
    RP.MethodA();
    alert(rp.PropertyA);
    rp.MethodA();
</script>

运行结果:
1
RP.MethodA
100
this.MethodA

继续

程序代码:
<script type="text/javascript">
    var rp=new RP();
    delete RP.prototype.PropertyA;
    alert(RP.prototype.PropertyA);
    delete RP.prototype.MethodA;
    RP.prototype.MethodA();
    delete rp.PropertyA;
    alert(rp.PropertyA);
    delete rp.MethodA;
    rp.MethodA();
</script>

运行结果:
undefined
对象不支持此属性或方法
RP.prototype.MethodA();

再来

程序代码:
<script type="text/javascript">
    var rp=new RP();
    delete rp.PropertyA;
    alert(rp.PropertyA);
    delete rp.MethodA;
    rp.MethodA();
</script>

运行结果:
10
RP.Prototype.MethodA()

这里的RP.PropertyA和RP.MethodA只是用来做参照的,可是怎么把this.PropertyA和this.MethodA都delete了,还能出来结果,而且还是prototype导入的属性和方法呢?

这就是Javascript的prototype和prototype pattern中prototype最大的不同了,Javascript中的这个所谓的prototype属性其实是个语言本身支持的特性,这里没有发生任何的copy,不管shallow还是deep的。对于Javascript的解释引擎,它在处理"."或"[keyName]"引用的对象的属性和方法时,先在对象本身的实例(this)中查找,如果找到就返回或执行。如果没有查找到,就查找对象的prototype(this.constructor.prototype)里是否定义了被查找的对象和方法,如果找到就返回或执行,如果没有查找到,就返回undefined(对于属性)或runtime error(对于方法)。

正因为prototype导入类实例的属性或方法是动态查找的,所以我们才能对系统内部对象添加prototype属性和方法,比如给String对象添加trim方法:

程序代码:
String.prototype.trim()
{
return this.replace(/(^\s+)|(\s+$)/g, "");
}

显然Javascript中的这种用法也是prototype pattern中的prototype不能解释和支持的。

分享到:
try
评论

相关推荐

    android IM

    即时通讯相关的资料: ... 成功解决asmack不能收发文件的问题 ...http://www.cnblogs.com/not-code/archive/2011/08/01/2124340.html MTQQ http://www.cnblogs.com/charley_yang/archive/2011/03/27/1997938.html ...

    sso详细设计说明书(下篇)转载(海纳百川文章http://www.cnblogs.com/David-weihw/a)

    SSO(Single Sign-On)单点登录是一种身份验证机制,允许用户在多个应用系统中只需登录一次,即可访问所有相互信任的应用系统,无需再次进行身份验证。本详细设计说明书的下篇将深入探讨SSO的核心原理、实现方式及...

    HSQLDB安装与使用-转自http://www.cnblogs.com/wllyy189/archive/2008/11/15/1334002.html

    2. **配置环境**: 如果你需要在命令行中运行HSQLDB,将`hsqldb.jar`添加到你的Java类路径中。对于Java项目,可以通过Maven或Gradle将其作为依赖添加到构建配置中。 3. **启动服务器**: 使用Java命令行启动HSQLDB...

    23种设计模式的java实现

    命令模式 http://www.cnblogs.com/java-my-life/archive/2012/06/01/2526972.html 解释器模式 http://www.cnblogs.com/java-my-life/archive/2012/06/19/2552617.html 迭代模式 ...

    Web 断点续传批量上传上传工具

    开发文档-ASP.NET:http://www.cnblogs.com/xproer/archive/2012/02/17/2355469.html 升级日志:http://www.cnblogs.com/xproer/archive/2012/02/17/2355449.html 示例下载:...

    .net C# 学习过程中收藏的一些比较有用的和感兴趣的链接

    http://www.360doc.com/userhome.aspx?userid=19107491&cid=3 jQuery基本选择器及用法 前端模块化开发(AMD和CDM规范) ...http://www.cnblogs.com/dwlsxj/p/4052871.html 浅析MSIL中间语言——PE文件结构篇

    webApi请求插件PostMan

    webApi请求插件PostMan,请参考博客:http://www.cnblogs.com/chenwolong/p/PostMan.html。webApi请求插件PostMan,请参考博客:http://www.cnblogs.com/chenwolong/p/PostMan.html。webApi请求插件PostMan,请参考博客...

    一个牛人提供的GIS源码(很好)

    原来论文部分请见:校园WebGIS开发与实践(论文部分) http://www.cnblogs.com/Tangf/archive/2006/01/13/316918.html 特色一:提出了地图接口的概念(其实当时的想法是将网络上的所谓企业标注移植到了这个系统上,只是...

    根据本地浏览器的版本自动更新chromedriver 自适应114版本以前的版本,也适应之后的版本115、116、117、118

    https://www.cnblogs.com/interdrp/p/17650069.html 在此提交bug 有需要的自行下载 https://sms.reyo.cn/test/v2.zip 2023-08-24 已更新自适应版本下载,不再需要配置不同版本的ini文件了,请保持对应关系即可!!!...

    android的回调机制(转自http://www.cnblogs.com/vtianyun/archive/2012/06/19/2555427.html)

    在Android开发中,回调机制是实现组件间交互和事件处理的关键技术。回调允许一个对象在完成特定任务或触发特定事件时通知另一个对象。这个概念在软件工程中广泛使用,尤其在事件驱动编程中。Android系统中的回调机制...

    C# 并发测试

    存储过程版、EF框架版,详情请结合博客:http://www.cnblogs.com/chenwolong/p/BF.html 网址。 C#并发处理。存储过程版、EF框架版,详情请结合博客:http://www.cnblogs.com/chenwolong/p/BF.html 网址。 C#并发...

    C# 简单的作业调度

    ,C# 简单的作业调度,亦可参考博客:http://www.cnblogs.com/chenwolong/p/Job.html,C# 简单的作业调度,亦可参考博客:http://www.cnblogs.com/chenwolong/p/Job.html,C# 简单的作业调度,亦可参考博客:...

    JS截屏控件

    开发文档-ASP.NET(C#):http://www.cnblogs.com/xproer/archive/2010/12/04/1896552.html 开发文档-PHP:http://www.cnblogs.com/xproer/archive/2011/05/16/2047915.html 开发文档-JSP:...

    谷歌开源的Google Preview Image Extractor.zip

    这个项目可以考虑用在特定情况下加速加载无损格式的预览图,提升用户体验 该项目没有demo代码,demo代码可参考博客园的一位网友的文章:http://www.cnblogs.com/tntmonks/p/5143350.html 标签:无损图片

    django项目实例(django 简易博客开发)

    http://www.cnblogs.com/cacique/archive/2012/10/01/2709668.html django 简易博客开发 4 comments库使用及ajax支持 http://www.cnblogs.com/cacique/archive/2012/10/03/2710803.html django 简易博客开发 5 ...

    EyesBaby1.0 源代码

    眼保程序源代码(EyesBaby1.0)...EyesBaby功能实现之窗口渐现效果(http://www.cnblogs.com/yizhuqing/archive/2010/01/13/1645974.html) 作者:Billy Qing(http://www.cnblogs.com/yizhuqing/) 如有问题,请及时联系!

    集XMPP推送与聊天于一体的Openfire开发Android

    与标题一致的描叙,你值得拥有,确实很值。...http://www.cnblogs.com/not-code/archive/2011/08/01/2124340.html http://android-zhang.iteye.com/blog/1836312 http://www.2cto.com/kf/201303/199088.html ...

    MVC5&EF6入门教程_Part3

    转自:http://www.cnblogs.com/miro/p/4030622.html 整理到了doc文档里,内含代码。 方便一起学习。

    bndong https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2/#/

    bndong https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2/#/

    dhtmlxScheduler_v36_std_121203下载地址

    http://www.cnblogs.com/xuqiang/archive/2010/11/02/1953419.html http://ynial.iteye.com/blog/741092 http://www.oschina.net/p/dhtmlxscheduler/news http://www.fanganwang.com/Product-detail-item-1447.html ...

Global site tag (gtag.js) - Google Analytics