zoukankan      html  css  js  c++  java
  • 对JS中_proto_和prototype的学习

    JS中每个对象都会有_proto_属性,默认为Object,通过_proto_(原型链)去找它的父
    <script>
         var arr = [1];
         console.log(arr);
    </script>
    //这里控制台输出,_proto_属性就是Object
    proto属性的作用是用来确定当前对象的继承者,在当前对象找不到
    指定的属性和方法时,就到proto指定的对象中去找。
    JS中每一个构造函数都有一个属性prototype叫做原型
    这个prototype属性默认为Object,你能够给它添加属性。你添加给prototype的属性将会成为使用这个构造函数创建的对象的通用属性。prototype对象默认有两个属性,一个是constructor,另一个就是proto,其中proto属性和普通JS对象的proto属性一样用来找父,而constructor属性则代表了函数本身。
    <script>
          
         function a(){
             alert("aa");
         }
         var arr = [1];
         console.log(arr);
        </script>
    在控制台中出window对象,即可找到a函数 像这样

    <script type="text/javascript">   
    Number.prototype.add = function(num){
      return this+num;
    }  
    </script>
    在控制台中输出:Number.prototype就可以得到number的原型对象,
    找到add方法  。。。

    JS能够实现的面向对象的特征有:
    1. 公有属性(public field)
    2. 公有方法(public method)
    3. 私有属性(private field)
    4. 私有方法 //无意义(private method)
    5. 方法重载 (method overload)
    6. 构造函数(constructor)
    7. 事件(event)
    8. 单一继承(single inherit)
    9. 子类重写父类的属性或方法(override)
    10. 静态属性或方法(static memeber)
    公有属性,公有方法------
    <script type="text/javascript">   
       function Book(){
           this.name = "知更鸟女孩";
           this.author ="chuck";
           this.getInfo=function(){
               alert("book name:" + this.name +",author:" + this.author);
           }
       }
    
       var b  = new Book(); //b为Book类的一个实例化对象
       b.getInfo();
       
    </script>  
    私有属性-----------
    <script type="text/javascript">   
       function Book(){
           var name = "知更鸟女孩";
           this.author ="chuck";
           this.getInfo=function(){
               alert("book name:" + name +",author:" + this.author);
           }
       }
    
       var b  = new Book();
      console.log( b.name) ; //控制台输出undefined,私有属性不能直接访问,需要通过公有方法访问
       b.getInfo();
       
    </script>  
    方法重载------------
     <script type="text/javascript">   
       function Book(){
           this.type = "love";
           this.publish ="china";
           this.getInfo=function(){
               alert("book type:" + this.type +",publish country:" + this.publish);
           }
       }
    
       function Story(){
        
         
       }
       Story.prototype = new Book();  //实现继承的方式之一
       Story.prototype.type = "spy";
       var obj = new Story();
       obj.getInfo(); 
    </script> 
    注意!!实例化的对象不能用prototype,否则会出现编译错误
    定义类型上的静态成员,直接在类型上调用即可-------------
    <script>
    
        Book.meterial = "paper";
       function Book(){
           this.type = "love";
           this.publish ="china";
           this.getInfo=function(){
               alert("book type:" + this.type +",publish country:" + this.publish);
           }
       }
    
       function Story
       }
       Story.prototype = new Book();
      alert(Book.meterial);
    
    </script>
    可以在外部使用prototype为自定义的类型添加属性和方法
    <script type="text/javascript">   
      
       function Book(){
           this.type = "love";
           this.publish ="china";
           this.getInfo=function(){
               alert("book type:" + this.type +",publish country:" + this.publish);
           }
       }
    
        Book.prototype.name="mocking girl";
       var obj = new Book();
       console.log(obj.name);
        
    </script> 
    最后以一个实例结束探索prototype的用法--------
    <script type="text/javascript">
         function  Phone(){
             this.getInfo = function(){
               console.log("产地:中国");
             };
             this.getBaseInfo  = function(){
               console.log("操作系统:安卓")
             }
    
         }
         Phone.getInfo = function(){
                console.log("产地:中国 静态方法");
         }
         function Honor(){
            this.getInfo = function(){
               console.log("产地:广州");
            }
           
         }
         Honor.getInfo = function(){
              console.log("产地:广州 静态方法");
         }
         Honor.prototype = new Phone(); //实现继承的一种方式
       //
         var hr8 = new Honor();
         console.log(hr8.__proto__ === Honor.prototype);//true
         hr8.getInfo(); //产地:广州   重写了Phone父类的getInfo()方法
         hr8.getBaseInfo();//操作系统:安卓  
         //如果子想要继承父类的重名方法,用call()或apply()
         Phone.getInfo.call(hr8);//产地:中国 静态方法      
    
         var p1 = new Phone();
         console.log(p1.__proto__===Phone.prototype); //true
         p1.getInfo();//产地:中国
         
         console.log(p1.__proto__);  //Object(){}
         console.log(Phone.prototype); //Object(){} 
         console.log(hr8.__proto__); //Phone(){}
         console.log(Honor.prototype);//Phone(){}
         p1.getInfo.call(hr8);//产地:中国
    
    </script> 
    js中的prototype属性实现的继承与java中继承有很相像的部分
     
     写下这篇随笔,也是借鉴了很多小伙伴的文章,原文链接:
    JS中的prototype        http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html
     js--真正了解面向对象   http://blog.csdn.net/jcx5083761/article/details/8606576
    java 三大特性-继承:原文链接:
  • 相关阅读:
    联考20200604 T2 宝石
    联考20200604 T1 旅游
    联考20200603 T2 排列
    [HAOI2017]八纵八横
    联考20200603 T1 解码
    [POI2011]KON-Conspiracy
    CF917D Stranger Trees
    CF1278F Cards
    CF809E Surprise me!
    NOI2016 循环之美
  • 原文地址:https://www.cnblogs.com/lizimeme/p/6544468.html
Copyright © 2011-2022 走看看