当前位置:Web前端 > javascript> 正文

JS中prototype

时间:2014-8-14类别:Web前端

JS中prototype

JS中prototype

javascript中的每个对象都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。

一、prototype的定义

你不需要显式地声明一个prototype属性,因为在每一个构造函数中都有它的存在。你可以看看下面的例子:


function Test()
{
}
alert(Test.prototype); // 输出 "Object"

二、给prototype添加属性

prototype是一个对象,因此,你能够给它添加属性。你添加给prototype的属性将会成为使用这个构造函数创建的对象的通用属性。

例如,我下面有一个数据类型Fish,我想让所有的鱼都有这些属性:livesIn="water"和price=20;为了实现这个,我可以给构造函数Fish的prototype添加那些属性。

  •  
  •  
  • JScript 代码   复制
  • 
    function Fish(name, color)
    {
    this.name=name;
    this.color=color;
    }
    Fish.prototype.livesIn="water";
    Fish.prototype.price=20;
    
    
    var fish1=new Fish("mackarel", "gray");
    var fish2=new Fish("goldfish", "orange");
    var fish3=new Fish("salmon", "white");
    
    
    
    alert(fish1.name+","+fish1.color+","+fish1.livesIn+","+fish1.price);
    alert(fish2.name+","+fish2.color+","+fish2.livesIn+","+fish2.price);
    
    alert(fish3.name+","+fish3.color+","+fish3.livesIn+","+fish3.price);
    
    		
  • 输出结果是:

    "mackarel, gray, water, 20"
    "goldfish, orange, water, 20"
    "salmon, white water, 20"

     三、用prototype给对象添加函数

    在构造函数的prototype上定义的所有属性和方法,都是可以通过其构造的对象直接访问和调用的。也可以这么说,prototype提供了一群同类对象共享属性和方法的机制。
     

  • JScript 代码   复制
  •     function Person(name) 
        { 
             this.name = name;   //设置对象属性,每个对象各自一份属性数据 
        }; 
         
        Person.prototype.SayHello = function() //给Person函数的prototype添加SayHello方法。 
        { 
             alert("Hello, I'm " + this.name); 
        } 
    
        var BillGates = new Person("Bill Gates");   //创建BillGates对象 
        var SteveJobs = new Person("Steve Jobs");   //创建SteveJobs对象 
    
        BillGates.SayHello();   //通过BillGates对象直接调用到SayHello方法 
        SteveJobs.SayHello();   //通过SteveJobs对象直接调用到SayHello方法 
    
        alert(BillGates.SayHello == SteveJobs.SayHello); //因为两个对象是共享prototype的SayHello,所以显示:true
    
    		
  • 四、以下是一些关于类型和对象的例子,大家看完例子后可能更容易理解类型和对象之间的联系

  • 1、可以在类型上使用proptotype来为类型添加行为。这些行为只能在类型的实例上体现

    JS中允许的类型有Array, Boolean, Date, Enumerator, Error, Function, Number, Object, RegExp, String
  •  
  •  
  • JScript 代码   复制
  •  
      Object.prototype.Property = 1;
    Object.prototype.Method = function ()
    {
    
        alert(1);
    
    }
    
     
    var obj = new Object();
    
    alert(obj.Property);
    
    obj.Method();
    
    			
  • 2、在实例上不能使用prototype,否则发生编译错误

    例如

  •  
  • JScript 代码   复制
  • var obj = new Object();
     obj.prototype.Property = 1; //Error
    
    //Error
    
    obj.prototype.Method = function()
    
    {
    
        alert(1);
    
    }
    
    		
  • 3、可以为类型定义“静态”的属性和方法,直接在类型上调用即可

  •  
  • JScript 代码   复制
  • Object.Property = 1;
    
    Object.Method = function()
    
    {
    
        alert(1);
    
    }
    
    alert(Object.Property);
    
    Object.Method();
    
    		
  • 4、可以在外部使用prototype为自定义的类型添加属性和方法

  •  
  • JScript 代码   复制
  • 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();
    
    		
  • 5、在外部不能通过prototype改变自定义类型的属性或方法

    该例子可以看到:调用的属性和方法仍是最初定义的结果。

  • JScript 代码   复制
  • function Aclass()
    
    {
    
    this.Property = 1;
    
    this.Method = function()
    
    {
    
        alert(1);
    
    }
    
    }
    
    Aclass.prototype.Property = 2;
    
    Aclass.prototype.Method = function
    
    {
    
        alert(2);
    
    }
    
    var obj = new Aclass();
    
    alert(obj.Property);
    
    obj.Method();
    
    		
  • 6、下面例子说明了一个类型如何从另一个类型继承

  •  
  • JScript 代码   复制
  • 
     
    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(); 
    
    		
  • 7、下面例子说明了子类如何重写父类的属性或方法

  •  
  • JScript 代码   复制
  • function AClass()
    
    {
    
           this.Property = 1;
    
           this.Method = function()
    
           {
    
                  alert(1);
    
           }
    
    }
    
    function AClass2()
    
    {
    
           this.Property2 = 2;
    
           this.Method2 = function()
    
           {
    
                  alert(2);
    
           }
    
    }
    
    AClass2.prototype = new AClass();
    
    AClass2.prototype.Property = 3;
    
    AClass2.prototype.Method 标签:
  • 上一篇下一篇

    猜您喜欢

    热门推荐