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

深入了解js面向对象中的prototype

2012-08-14 
深入理解js面向对象中的prototype一、基本使用方法prototype属性可算是JavaScript与其他面向对象语言的一大

深入理解js面向对象中的prototype

一、基本使用方法

   prototype属性可算是JavaScript与其他面向对象语言的一大不同之处。prototype就是“一个给类的对象添加方法的方法”,使用prototype属性,可以给类动态地添加方法,以便在JavaScript中实现“继承”的效果。 

   具体来说,prototype 是在 IE 4 及其以后版本引入的一个针对于某一类的对象的方法,当你用prototype编写一个类后,如果new一个新的对象,浏览器会自动把prototype中的内容替你附加在对象上。这样,通过利用prototype就可以在JavaScript中实现成员函数的定义,甚至是“继承”的效果。

    对于javascript本身而言是基于对象的,任何元素都可以看成对象。然而类型和对象是不同的,而我们所讲的prototype属性即是基于类型的一种属性。对于prototype的基本使用就如对象的创建及属性赋值一样的简单。直接通过赋值操作即可完成属性的创建。如:

Obj

x

1

y

2

Object.prototype

constructor

Object

当然我们也可以构造如下带有构造函数的类,并生成其对象。

obj

x

1

y

2

AClass.prototype

constructor

AClass

Object.prototype

(constructor)

Object

在js中,每个对象都可以继承自另外一个其它的对象,我们可以称之为引用原型。当我们访问一个属性时,如果能通过对象本身直接找到,则返回,否则它会向引用原型中追溯,直到根部prototype(即object)。如下所示:

对应生成的对象x的内部结构图如下所示:

x

inB

4

B.prototype

constructor

B

inA

2

inBProto

5

A.prototype

(constructor)

A

inAProto

3

Object.prototype

(constructor)

Object

inObj

1

三、prototype的继承使用

1、将ClassA的一个实例赋值给ClassB,则 ClassB就继承了ClassA的所有属性。

<script>    var ClassA = function() {        this.a = [];    };    var ClassB = function() {        this.b = "b";    };    ClassB.prototype = new ClassA();    var objB1 = new ClassB();    var objB2 = new ClassB();    objB1.a.push(1,2,3);    alert(objB2.a); // 1,2,3</script>

由此可以看出,在子类对象中访问原型的成员对象后,由于采用的是引用原型方式,其实它和ClassB.a.push实现的是同样的功能。所以其它的子类也会跟着变化。

 


热点排行