`

诡异的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

 

 

分享到:
评论
1 楼 sygjzmh 2014-01-03  

相关推荐

    prototype_PrototypeJS1.6_

    标题"prototype_PrototypeJS1.6_"中提到的"Prototype"是一个JavaScript库,它为JavaScript编程提供了一套丰富的工具集,主要用于简化DOM操作、创建Ajax应用以及实现对象的继承机制。"1.6版本"表明这是该库的一个特定...

    prototype_1.7.3.js 最新版本

    《prototype_1.7.3.js:JavaScript框架的里程碑》 在JavaScript的世界里,Prototype库是一个不可或缺的重要组成部分,尤其在Web开发领域,它为开发者提供了强大的功能和便利性。Prototype_1.7.3.js是这个库的一个...

    Prototype-1.6.0 中文版\英文版\Prototype.js

    Prototype.js 是一个广泛使用的JavaScript库,它为JavaScript语言增加了许多实用的功能,使开发Web应用程序变得更加简单。这个压缩包包含了Prototype的1.6.0版本,包括中文版和英文版的文档,以及源代码文件。 首先...

    Prototype_1.4.doc,Prototype_1.5.1.chm 中文版

    标题提及了两个版本的Prototype文档,分别是"Prototype_1.4.doc"和"Prototype_1.5.1.chm"。Prototype是JavaScript库的一个早期且广泛使用的版本,它提供了许多实用的功能,如对象扩展、事件处理、Ajax操作等,极大地...

    prototype-1.6.0.3.js+prototype1.4 、1.5中文手册+prototype1.6英文手册

    Prototype是JavaScript库,它为浏览器环境提供了强大的对象扩展和功能,尤其在处理DOM(文档对象模型)和Ajax交互时。这个压缩包包含了Prototype库的多个版本的手册和源代码文件,便于开发者理解和使用。 首先,...

    prototype

    标题中的"prototype"一词在IT领域中通常指的是JavaScript编程语言中的原型(Prototype)概念。JavaScript是一种基于对象和原型的动态类型语言,它的对象继承机制是通过原型链(Prototype Chain)来实现的。在...

    prototype帮助中文文档

    Prototype 是一个广泛使用的JavaScript库,它为浏览器端的开发提供了许多强大的功能,特别是对于处理DOM操作、Ajax交互以及对象扩展等方面。这个“prototype帮助中文文档”涵盖了Prototype库的核心概念、方法和最佳...

    prototype 1.6中文手册 chm+prototype 1.6.js源码 最新版

    Prototype JavaScript 框架是Web开发中的一个关键工具,它为JavaScript编程提供了许多实用的类库函数和设计模式。这个“Prototype 1.6中文手册 chm+prototype 1.6.js源码 最新版”正是面向希望深入学习和掌握...

    非常有用的prototype实例

    在JavaScript中,`prototype`是一个核心概念,它与对象继承紧密相关。`prototype`机制是JavaScript实现面向对象编程的关键部分,允许我们为对象添加或扩展属性和方法。在这个"非常有用的prototype实例"中,我们可以...

    prototype1.6.0prototype1.6.0prototype1.6.0prototype1.6.0

    标题中的"prototype1.6.0"多次提及,暗示了我们正在讨论JavaScript库Prototype的1.6.0版本。Prototype是Web开发中一个强大的JavaScript框架,它为浏览器环境提供了许多实用的功能,增强了JavaScript语言的面向对象...

    Prototype中文帮助文档

    **Prototype JavaScript 库** Prototype 是一个广泛使用的JavaScript库,它为Web开发提供了强大的工具和功能。这个库的主要目标是简化JavaScript编程,通过提供面向对象的语法、强大的DOM操作以及Ajax功能,来提升...

    prototype中文帮助文档

    Prototype.js 是一个广泛使用的JavaScript库,它为JavaScript编程提供了许多实用的功能,极大地简化了DOM操作、事件处理、Ajax交互以及对象扩展等任务。这个压缩包包含的“prototype.js”文件就是Prototype.js的核心...

    Prototype

    **Prototype 框架详解** Prototype 是一个广泛使用的JavaScript库,设计目的是为了简化JavaScript的开发,尤其是处理DOM操作、AJAX交互以及事件处理等方面的工作。它通过提供一系列实用的工具函数和面向对象的特性...

    prototype 1.3 源码解读

    ### Prototype 1.3 源码解读 #### 前言 Prototype 是一个轻量级的 JavaScript 库,它简化了 DOM 操作,并提供了一系列便捷的方法来处理对象、数组等基本类型。版本 1.3 相对于之前的 1.2 版本有了不少改进与增强,...

    Prototype-1.pdf

    ### Prototype框架概览 #### 一、Prototype框架简介 **Prototype** 是一款JavaScript库,它为Web开发提供了强大的工具集,特别是在实现Ajax交互方面。该文档由知名的作者和开发者Marty Hall编写,针对的是...

    prototype从入门到精通

    Prototype是JavaScript库,它扩展了JavaScript的基本对象,提供了强大的面向对象编程功能,使得在JavaScript中进行复杂的编程操作变得更加简单。这个“prototype从入门到精通”的教程涵盖了从基础概念到高级特性的...

    Div+css布局教程,Prototype教程,js教程

    Prototype Codes TextBook.rar:Prototype实战教程(爆爽,推荐); 2.Prototype API: Prototype1.5.1_API_CN_A.CHM:Prototype1.5.1中文API,版本一(推荐); prototype1.5.1_API_CN_B.CHM:Prototype1.5.1中文API,版本二...

    prototype开发者手册(中文版)+prototype.js

    《Prototype开发者手册(中文版)》是一本专为JavaScript开发者准备的重要参考资料,它详细介绍了Prototype JavaScript框架的使用方法和核心概念。Prototype是一个广泛使用的开源JavaScript库,它的目标是简化...

    Prototype1.5.1使用手册

    《Prototype 1.5.1使用手册》是针对JavaScript库Prototype的一个详细指南,该库是Web开发中的一个强大工具,尤其在处理DOM操作、Ajax交互和函数增强方面表现卓越。本手册以.chm(Compiled Help Manual)格式提供,...

Global site tag (gtag.js) - Google Analytics