举例理解js的prototype

| 阅读数:--次| 作者:小猪仔
摘要:举例理解js的prototype
javascript所有的function类型的对象都有一个prototype属性。这个prototype属性本身又是一个object类型的对象,因此我们也可以给这个prototype对象添加任意的属性和方法。可以说,prototype提供同类对象共享属性和方法的机制。

在JavaScript中,一共有两种类型的值,原始值和对象值。每个对象都有一个内部属性 prototype ,我们通常称之为原型。原型的值可以是一个对象,也可以是null。如果它的值是一个对象,则这个对象也一定有自己的原型。这样就形成了一条线性的链,我们称之为原型链。

举个栗子:
js代码
function Animal(name)   //积累构造函数
{
this.name = name;//设置对象属性
}

Animal.prototype.behavior = function() //给基类构造函数的prototype添加behavior方法
{  
alert("this is a "+this.name);
}

var Dog = new Animal("dog");//创建Dog对象
var Cat = new Animal("cat");//创建Cat对象

Dog.behavior();//通过Dog对象直接调用behavior方法
Cat.behavior();//output "this is a cat"

alert(Dog.behavior==Cat.behavior);//output true;
可以从程序运行结果看出,构造函数的prototype上定义的方法确实可以通过对象直接调用到,而且代码是共享的

原型链:当从一个对象那里调取属性或方法时,如果该对象自身不存在这样的属性或方法,就会去自己关联的prototype对象那里寻找,如果prototype没有,就会去prototype关联的前辈prototype那里寻找,如果再没有则继续查找Prototype.Prototype引用的对象,依次类推,直到Prototype.….Prototype为undefined(Object的Prototype就是undefined)从而形成了所谓的“原型链”。

原型继承:在原型链的末端,就是Object构造函数prototype属性指向的那个原型对象。这个原型对象是所有对象的祖先,这个老祖宗实现了诸如toString等所有对象天生就该具有的方法。其他内置构造函数,如Function,Boolean,String,Date和RegExp等的prototype都是从这个老祖宗传承下来的,但他们各自又定义了自身的属性和方法,从而他们的子孙就表现出各自宗族的那些特征。

再举个栗子:
js代码
function Person(name)
{
this.name = name;//设置对象属性
};

Person.prototype.company = "Microsoft";//设置原型的属性
Person.prototype.SayHello = function() //原型的方法
{  
alert("Hello,I'm "+ this.name+ " of " + this.company);
};

var BillGates = new Person("BillGates");//创建Dog对象
BillGates.SayHello();//继承了原型的内容,输出"Hello,I'm BillGates of Microsoft"

var Jobs = new Person("Jobs");
Jobs.company = "Apple";//设置自己的company属性,掩盖了原型的company属性
Jobs.SayHello = function()
{
alert("Hi,"+this.name + " like " + this.company);
};
Jobs.SayHello();//自己覆盖的属性和方法,输出"Hi,Jobs like Apple"
BillGates.SayHello();//Jobs的覆盖没有影响原型,BillGates还是照样输出
看下面一个原型链例子:
js代码
function Year(){
this.value = 21;
}
Year.prototype = {
method:function(){

}
};

function Hi(){

};
//设置Hi的prototype属性为Year的实例对象
Hi.prototype = new Year();
Hi.prototype.year = 'Hello World';

Hi.prototype.constructor = Hi;

var test = new Hi();//创建一个Hi的新实例

//原型链
test [Hi的实例]
Hi.prototype [Year的实例]
    {year:'Hello World'}
    Year.prototype
           {method:……};
           object.prototype
                     {toString:...};
从上面例子中,test对象从Hi.prototype和Year.prototype中继承下来;因此他能访问Year的原型方法method,同时他能访问实例属性value
返回顶部
学到老代码浏览 关闭浏览