诡异的prototype 博客分类： javascript JavaScript

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