javascript prototype分析

对于Javascript的初学者来说,Prototype是个蛮高深的话题,其实并不尽然。

  我说不尽然,意思是说理解Prototype的一般用法很简单。但是真正能做到融会贯通理解Prototype确实是件很难的事情。

  今天我就从Prototype的基本开始讲。上文中我讲了原型模式。其实在Javascript中原型也是这个意思。 Javascript中对象的原型属性的解释是:返回对象类型原型的引用。这是一个晕人的解释。其实就是指定了一个需要复制的对象。

  文字再多也不如代码,上代码,说最简单的,任何类都继承自Object类:

function A()
{

//todo something

}
A.prototype=new Object();

  其实这样就相当于Object对象是A的一个原型,这样就相当于了把Object对象的属性和方法复制到了A上,和原型模式的精髓一样吧!

  好,大概了解了prototype的基本用法,我们来看看原型究竟有什么用处。

  最简单的用法,动态扩展类的方法和属性。

de>function People()
{
   this.Jump=function(){
                                alert("I can jump");
                                           }
}

  现在要扩充方法:

People.prototype.Run=function(){
                                    alert("I can run,too");
                                                    }

  好,测试下:

var p=new People();
p.Jump();
p.Run();

cript玩转Prototype - Gabriel - Software Engineer" height=153 alt="Javascript玩转Prototype(二)" src="http://hiphotos.baidu.com/yafengyouxia/pic/item/9f99f91faaa8f027f724e4a1.jpg" width=231>

cript玩转Prototype - Gabriel - Software Engineer" height=138 alt="Javascript玩转Prototype(二)" src="http://hiphotos.baidu.com/yafengyouxia/pic/item/2bd66063e085f0240d33faa1.jpg" width=217>

  接下来,顺带讲一下Javascript的方法种类。我个人将Javascript的方法分为三种:

  <1>类方法

  <2>对象方法

  <3>原型方法

  先看代码,后讲区别:

function People(name)
{
this.name=name;
//对象方法
this.Introduce=function(){
alert("My name is "+this.name);
}
}
//类方法
People.Run=function(){
alert("I can run");
}
//原型方法
People.prototype.IntroduceChinese=function(){
alert(" 我的名字是"+this.name);
}

  测试下:

var p1=new People("Windking");
p1.Introduce();
People.Run();
p1.IntroduceChinese();

cript玩转Prototype - Gabriel - Software Engineer" height=124 alt="Javascript玩转Prototype(二)" src="http://hiphotos.baidu.com/yafengyouxia/pic/item/63fb606014921c00eaf8f8a1.jpg" width=203>

cript玩转Prototype - Gabriel - Software Engineer" height=140 alt="Javascript玩转Prototype(二)" src="http://hiphotos.baidu.com/yafengyouxia/pic/item/99ec8c44f1598108500ffea1.jpg" width=209>

cript玩转Prototype - Gabriel - Software Engineer" height=136 alt="Javascript玩转Prototype(二)" src="http://hiphotos.baidu.com/yafengyouxia/pic/item/7e27114c4dae42bdd62afca1.jpg" width=216>

  总结下: