• 【转】js中prototype用法


    JavaScript能够实现的面向对象的特征有:
    ·公有属性(public field)
    ·公有方法(public Method)
    ·私有属性(private field)
    ·私有方法(private field)
    ·方法重载(method overload)
    ·构造函数(constructor)
    ·事件(event)
    ·单一继承(single inherit)
    ·子类重写父类的属性或方法(override)
    ·静态属性或方法(static member)


    例子一(JavaScript中允许添加行为的类型):可以在类型上使用proptotype来为类型添加行为。这些行为只能在类型的实例上体现。 JS中允许的类型有Array, Boolean, Date, Enumerator, Error, Function, Number, Object, RegExp, String

    Js代码

    1. <script type="text/javascript">   
    2. Object.prototype.Property = 1;   
    3. Object.prototype.Method = function ()   
    4. {   
    5.     alert(1);   
    6. }   
    7.     
    8. var obj = new Object();   
    9. alert(obj.Property);   
    10. obj.Method();   
    11. </script>   
    12.           

    <script type="text/javascript">Object.prototype.Property = 1;Object.prototype.Method = function (){ alert(1);} var obj = new Object();alert(obj.Property);obj.Method();</script>

     例子二(prototype使用的限制):在实例上不能使用prototype,否则发生编译错误

    Js代码

    1. <script type="text/javascript">   
    2. var obj = new Object();   
    3. obj.prototype.Property = 1; //Error  
    4. //Error  
    5. obj.prototype.Method = function()   
    6. {   
    7.     alert(1);   
    8. }   
    9. </script>   
    10.           

    <script type="text/javascript">var obj = new Object();obj.prototype.Property = 1; //Error//Errorobj.prototype.Method = function(){ alert(1);}</script>

     例子三(如何定义类型上的静态成员):可以为类型定义“静态”的属性和方法,直接在类型上调用即可

    Js代码

    1. <script type="text/javascript">   
    2. Object.Property = 1;   
    3. Object.Method = function()   
    4. {   
    5.     alert(1);   
    6. }   
    7.     
    8. alert(Object.Property);   
    9. Object.Method();   
    10. </script>   
    11.           

    <script type="text/javascript">Object.Property = 1;Object.Method = function(){ alert(1);} alert(Object.Property);Object.Method();</script>

     例子五():这个例子演示了通常的在JavaScript中定义一个类型的方法

    Js代码

    1. <script type="text/javascript">   
    2. function Aclass()   
    3. {   
    4. this.Property = 1;   
    5. this.Method = function()   
    6. {   
    7.     alert(1);   
    8. }   
    9. }   
    10. var obj = new Aclass();   
    11. alert(obj.Property);   
    12. obj.Method();   
    13. </script>  

    <script type="text/javascript">function Aclass(){this.Property = 1;this.Method = function(){ alert(1);}}var obj = new Aclass();alert(obj.Property);obj.Method();</script>

     例子六(JavaScript中允许添加行为的类型):可以在外部使用prototype为自定义的类型添加属性和方法。

    Js代码

    1. <script type="text/javascript">   
    2. function Aclass()   
    3. {   
    4. this.Property = 1;   
    5. this.Method = function()   
    6. {   
    7.     alert(1);   
    8. }   
    9. }   
    10. Aclass.prototype.Property2 = 2;   
    11. Aclass.prototype.Method2 = function  
    12. {   
    13.     alert(2);   
    14. }   
    15. var obj = new Aclass();   
    16. alert(obj.Property2);   
    17. obj.Method2();   
    18. </script>   
    19.       

    <script type="text/javascript">function Aclass(){this.Property = 1;this.Method = function(){ alert(1);}}Aclass.prototype.Property2 = 2;Aclass.prototype.Method2 = function{ alert(2);}var obj = new Aclass();alert(obj.Property2);obj.Method2();</script>

     例子八():可以在对象上改变属性。(这个是肯定的)也可以在对象上改变方法。(和普遍的面向对象的概念不同)

    Js代码

    1. <script type="text/javascript">   
    2. function Aclass()   
    3. {   
    4. this.Property = 1;   
    5. this.Method = function()   
    6. {   
    7.     alert(1);   
    8. }   
    9. }   
    10. var obj = new Aclass();   
    11. obj.Property = 2;   
    12. obj.Method = function()   
    13. {   
    14.     alert(2);   
    15. }   
    16. alert(obj.Property);   
    17. obj.Method();   
    18. </script>  

    <script type="text/javascript">function Aclass(){this.Property = 1;this.Method = function(){ alert(1);}}var obj = new Aclass();obj.Property = 2;obj.Method = function(){ alert(2);}alert(obj.Property);obj.Method();</script>

     例子九():可以在对象上增加属性或方法

    Js代码

    1. <script type="text/javascript">   
    2. function Aclass()   
    3. {   
    4. this.Property = 1;   
    5. this.Method = function()   
    6. {   
    7.     alert(1);   
    8. }   
    9. }   
    10. var obj = new Aclass();   
    11. obj.Property = 2;   
    12. obj.Method = function()   
    13. {   
    14.     alert(2);   
    15. }   
    16. alert(obj.Property);   
    17. obj.Method();   
    18. </script>   
    19.           

    <script type="text/javascript">function Aclass(){this.Property = 1;this.Method = function(){ alert(1);}}var obj = new Aclass();obj.Property = 2;obj.Method = function(){ alert(2);}alert(obj.Property);obj.Method();</script>

     例子十(如何让一个类型继承于另一个类型):这个例子说明了一个类型如何从另一个类型继承。

    Js代码

    1. <script type="text/javascript">   
    2. function AClass()   
    3. {   
    4.        this.Property = 1;   
    5.        this.Method = function()   
    6.        {   
    7.               alert(1);   
    8.        }   
    9. }   
    10.     
    11. function AClass2()   
    12. {   
    13.        this.Property2 = 2;   
    14.        this.Method2 = function()   
    15.        {   
    16.               alert(2);   
    17.        }   
    18. }   
    19. AClass2.prototype = new AClass();   
    20.     
    21. var obj = new AClass2();   
    22. alert(obj.Property);   
    23. obj.Method();   
    24. alert(obj.Property2);   
    25. obj.Method2();   
    26. </script>   
    27.           

    <script type="text/javascript">function AClass(){ this.Property = 1; this.Method = function() { alert(1); }} function AClass2(){ this.Property2 = 2; this.Method2 = function() { alert(2); }}AClass2.prototype = new AClass(); var obj = new AClass2();alert(obj.Property);obj.Method();alert(obj.Property2);obj.Method2();</script>

     例子十一(如何在子类中重新定义父类的成员):这个例子说明了子类如何重写父类的属性或方法。

    Js代码

    1. <script type="text/javascript">   
    2. function AClass()   
    3. {   
    4.        this.Property = 1;   
    5.        this.Method = function()   
    6.        {   
    7.               alert(1);   
    8.        }   
    9. }   
    10.     
    11. function AClass2()   
    12. {   
    13.        this.Property2 = 2;   
    14.        this.Method2 = function()   
    15.        {   
    16.               alert(2);   
    17.        }   
    18. }   
    19. AClass2.prototype = new AClass();   
    20. AClass2.prototype.Property = 3;   
    21. AClass2.prototype.Method = function()   
    22. {   
    23.        alert(4);   
    24. }   
    25. var obj = new AClass2();   
    26. alert(obj.Property);   
    27. obj.Method();   
    28. </script>   
  • 相关阅读:
    将vue文件script代码抽取到单独的js文件
    git pull 提示错误:Your local changes to the following files would be overwritten by merge
    vue和uniapp 配置项目基础路径
    XAMPP Access forbidden! Access to the requested directory is only available from the local network.
    postman与newman集成
    postman生成代码段
    Curl命令
    POST方法的Content-type类型
    Selenium Grid 并行的Web测试
    pytorch转ONNX以及TnesorRT的坑
  • 原文地址:https://www.cnblogs.com/wangluochong/p/2799607.html
Copyright © 2020-2023  润新知