您的位置：首页 > Web前端 > javascript > 正文

JS中prototype

更多时间：2014-8-14 类别：Web前端浏览量：401

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 
 
  标签：prototype javascript   
 
 


              上一篇：SQL中Truncate的用法                	  
			  下一篇：如何降低SQL语句复杂度

   


  
      您可能感兴趣
				
					
  vue常用的指令和修饰符（Vue中 Vue.prototype使用详解）
  JS中prototype
  isPrototypeOf和hasOwnProperty的区别
越南新娘（越南新娘骗婚套路流程）
菲律宾游学（菲律宾游学中介机构）
菲律宾美食（菲律宾美食排行榜前十名）
菲律宾特产（菲律宾特产最值得买回国）
越南特产（越南特产首饰）
TVB负评王连续挑战警察角色《使徒行者3》中将饰演卧底（TVB负评王连续挑战警察角色使徒行者3中将饰演卧底）

JS中prototype

JS中prototype

热门推荐

排行榜