首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

诡谲的prototype

2012-11-23 
诡异的prototypejavascript中的prototype使用起来感觉变化莫测,不是很好理解。现总结一下,以便日后查阅。1.p

诡异的prototype
javascript中的prototype使用起来感觉变化莫测,不是很好理解。现总结一下,以便日后查阅。1.prototype只能通过类名(或者叫function名)来访问2.父类中的变量只能通过子类名.prototype.变量名的方式来修改,通过子类的对象只能读父类中的变量,如果修改的话,其实修改的是子类自己的同名变量
3.通过子类的对象读取一个变量时,先在子类中找,如果子类中没有,再到父类中找4.每个子类对象都持有同一个父类的引用
比如:

function ClassA()
{
??? this.a='a';

??? this.f=function(){alert();};
}
function ClassB()
{
??? this.b='b';

??? this.sf=function(){alert();};
}

ClassB.prototype=new ClassA();? //ClassB继承自ClassA

?

var objB1=new ClassB();

var objB2=new ClassB();

?

alert(objB1.f == objB2.f);? //参照同一个父类的方法

alert(objB1.sf == objB2.sf); //参照各自的子类方法

?

alert(objB1.a); //因为ClassB中没有a,所以访问父类的变量a

?

objB1.a='x'; //ClassB中增加变量a,值为x,和父类中的变量a没有关系

?

ClassB.prototype.a='y';? //将ClassA中的a的值修改为y

?

alert(objB1.a); //因为ClassB中有a,所以访问子类的变量a

?

输出:

true

false

a

x

5.可以通过子类名.prototype.变量名的方式来修改父类中的变量,或者向父类中增加变量也可以通过子类的对象名.变量名的方式来修改子类中的变量,或者向子类中增加变量。
比如:

function ClassA()
{

??? this.a='a';
}
function ClassB()
{

??? this.b='b';
}

ClassB.prototype=new ClassA();

?

var objB1=new ClassB();

?

objB1.c='c';? //objB1中增加变量c

ClassB.prototype.d='d'; //父类的对象中增加变量d

?

alert(objB1.c);

alert(objB1.d);

?

输出:

c

d

6.给prototype赋值的注意事项

方法1:

function ClassA()
{

??? this.a='a';
}
function ClassB()
{

??? this.b='b';
}

?

//ClassB.prototype相当于ClassA的一个对象
ClassB.prototype=new ClassA();

?

var objB1=new ClassB();

?

//修改ClassA中的变量a

ClassB.prototype.a='a1';

//向ClassA中增加变量c

ClassB.prototype.c='c';

alert(objB1.a);

alert(objB1.c);

?

输出:

a1

c

?

方法2:

function ClassA()
{

??? this.a='a';
}
function ClassB()
{

??? this.b='b';
}

?

ClassB.prototype.x='x';

ClassB.prototype.y='y';

?

var objB1=new ClassB();

//创建对象时已经创建了变量x和y

alert(objB1.x);
alert(objB1.y);

?

//此时objB1已经创建完,所以ClassA不是ClassB的父类

ClassB.prototype=new ClassA();

//追加父类时原来的变量x和y不会丢失

alert(objB1.x);
alert(objB1.y);

?

//ClassA不是ClassB的父类

alert(objB1.a);

输出:

x

y

x

y

undefined

?

方法3:

function ClassA()
{

??? this.a='a';
}
function ClassB()
{

??? this.b='b';
}

?

ClassB.prototype.x='x';

ClassB.prototype.y='y';

ClassB.prototype=new ClassA();

?

var objB1=new ClassB();

//new ClassA()时x和y被覆盖

alert(objB1.x);

alert(objB1.y);

?

输出:

undefined

undefined

?

?

热点排行