zoukankan      html  css  js  c++  java
  • js prototype

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

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

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

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


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


    2、为用户自定义类添加方法:

    程序代码
    function TestObject(name)
    {
    this.m_Name = name;
    }

    TestObject.prototype.ShowName = function()
    {
    alert(this.m_Name);
    };

    3、更新自定义类的prototype:


    程序代码
    function TestObjectA()
    {
    this.MethodA = function()
    {
    alert(&apos;TestObjectA.MethodA()&apos;);
    }
    }

    function TestObjectB()
    {
    this.MethodB = function()
    {
    alert(&apos;TestObjectB.MethodB()&apos;);
    }
    }

    TestObjectB.prototype = new TestObjectA();


    第三个很眼熟吧?对啊,它就是我们前面介绍的原型继承法呀~~ 不过今天我们不是研究"继承",之所以可以这样来实现一种继承,只是利用了prototype属性的一个副作用而已。

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

    弄清楚了JScript中prototype属性怎么使用后,下面我们再来深入的研究它。
    上面的文章中我罗列了一下prototype属性在JScript中的各种用法,但是prototype这个东西却不是JScript创造出来的,JScript实际上是使用了我们设计模式中prototype pattern的一种衍生形式。下面我先简单的说一下prototype pattern,然后再来看到底JScript中的prototype是怎么回事?!

    What&apos;s prototype pattern?

    Specify the kinds of objects to create using a prototypical instance, and create new objects by copying this prototype.

    用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象。

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

    继续了解到底什么是prototype pattern,可以参看&apos;设计模式之Prototype(原型)&apos;这篇文章,即使不懂Java也没有关系,把它的代码都当C#看就行了。

    搞清楚什么是原型了吧?反正记着一点,prototype pattern是的实现是依赖于clone这个操作的,当然要shallow copy还是deep copy的clone看自己的需要了。

    下面我们继续说JScript里的prototype,为什么我们说它和prototype pattern里的prototype不一样呢?! 这个不是我说就说出来的,也不是我吹出来的,看看这个示例,你就能大概糊涂:

    程序代码
    <script language="javascript">
    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");
    };
    </script>

    不要着急,还没有开始做示例,只是给出了我们用来演示的一个类。RP是什么?rpwt吗?当然不是了,RP是ResearchPrototype了。好了不废话了,看示例及结果分析。


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


    运行结果闪亮登场:
    1
    RP.MethodA
    100
    this.MethodA
    这个%$@#^$%&^...,不要着急,继续看哦!


    程序代码
    <script language="javascript">
    rp = new RP();
    delete RP.PropertyA;
    alert(RP.PropertyA);
    delete RP.MethodA;
    RP.MethodA();
    delete rp.PropertyA;
    alert(rp.PropertyA);
    delete rp.MethodA;
    rp.MethodA();
    </script>
    运行结果再次登场:

    程序代码
    undefined
    A Runtime Error has occurred.
    Do you wish to Debug?
    Line: 32
    Error: Object doesn&apos;t support this property or method
    10
    RP.prototype.MethodA


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

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

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


    程序代码
    <script lanuage="javascript">
    String.prototype.trim()
    {
    return this.replace(/(^\s+)|(\s+$)/g, "");
    }
    </scritp>

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

    这下对于JScript OOP中原型继承法的理解因该没有任何的障碍了吧?同时也应该明白为什么原型继承法有那么大的天生缺陷了吧?当然如果有任何问题,欢迎继续讨论。

    附演示示例源代码:


    程序代码
    <html>
    <head>
    <meta name="author" content="birdshome@博客园">
    <title>JScript Prototype Research</title>
    </head>
    <body>
    <script language="javascript">
    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");
    };
    </script>
    <script language="javascript">
    rp = new RP();
    delete RP.PropertyA;
    alert(RP.PropertyA);
    delete RP.MethodA;
    RP.MethodA();
    delete rp.PropertyA;
    alert(rp.PropertyA);
    delete rp.MethodA;
    rp.MethodA();
    </script>
    </body>
    </html>

    本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/junkaih2008/archive/2008/07/15/2653142.aspx

  • 相关阅读:
    ubuntu12.04 死机 卡屏 画面冻结解决方案
    Install Firefox 20 in Ubuntu 13.04, Ubuntu 12.10, Ubuntu 12.04, Linux Mint 14 and Linux Mint 13 by PPA
    ListView1.SelectedItems.Clear()
    android studio 下载地址
    jquery.slider.js jquery幻灯片测试
    jquery.hovermenu.js
    jquery.tab.js选项卡效果
    适配 placeholder,jquery版
    jquery.autoscroll.js jquery自动滚动效果
    将 Google Earth 地图集成到自己的窗体上的 简单控件
  • 原文地址:https://www.cnblogs.com/aaa6818162/p/1568963.html
Copyright © 2011-2022 走看看