王娟 — Wed, 25 Jul 2007 07:27:00 GMT

理解�cȝ��实现机制

　　在JavaScript中可以��用function关键字来定义一�?#8220;�c?#8221;�Q�如何�ؓ�c�L��加成员。在函数内通过this指针引用的变量或者方法都会成为类的成员，例如�Q?br>

�E�序代码

function class1(){
       　var s="abc";
       　this.p1=s;
       　this.method1=function(){
              　　alert("this is a test method");
       　}
}
var obj1=new class1();

　　通过new class1()获得对象obj1�Q�对象obj1便自动获得了属性p1和方法method1�?br>
　　在JavaScript中，function本��n的定义就是类的构造函敎ͼ��l�合前面介绍�q�的对象的性质以及new操作�W�的用法�Q�下面介�l��用new创徏对象的过�E��?br>　　�Q?�Q�当解释器遇到new操作�W�时便创��Z��个空对象�Q?br>　　�Q?�Q�开始运行class1�q�个函数�Q��ƈ��其中的this指针都指向这个新建的对象�Q?br>　　�Q?�Q�因为当�l�对象不存在的属性赋值时�Q�解释器��׃��为对象创��属性，例如在class1中，当执行到this.p1=s�q�条语句�Ӟ��׃��d��一个属性p1�Q��ƈ把变量s的��D��l�它�Q�这样函数执行就是初始化�q�个对象的过�E�，卛_��现构造函数的作用�Q?br>　　�Q?�Q�当函数执行完后�Q�new操作�W�就�q�回初始化后的对象�?br>
　　通过�q�整个过�E�，JavaScript中就实现了面向对象的基本机制。由此可见，在JavaScript中，function的定义实际上��是实现一个对象的构造器�Q�是通过函数来完成的。这�U�方式的�~�点是：
　　·��所有的初始化语句、成员定义都攑ֈ�一��P��代码逻辑不够清晰�Q�不易实现复杂的功能�?br>　　·每创��Z��个类的实例，都要执行一�ơ构造函数。构造函��C��定义的属性和�Ҏ��总被重复的创建，例如�Q?br>

�E�序代码

this.method1=function(){
　alert("this is a test method");
}

　　�q�里的method1每创��Z��个class1的实例，都会被创��Z��ơ，造成了内存的��费。下一节介�l�另一�U�类定义的机�Ӟ��prototype对象�Q�可以解��x��造函��C��定义�c�L��员带来的�~�点�?br>

使用prototype对象定义�c�L��?/strong>
　　现在介绍另一�U��ؓ�c�L��加成员的机制�Q�prototype对象。当new一个function�Ӟ��该对象的成员��自动赋�l�所创徏的对象，例如�Q?br>

�E�序代码

�Q�script language="JavaScript" type="text/javascript"�Q?br>�Q?--
　//定义一个只有一个属性prop的类
　function class1(){
       　　this.prop=1;
　}
　//使用函数的prototype属性给�c�d��义新成员
　class1.prototype.showProp=function(){
       　　alert(this.prop);
　}
　//创徏class1的一个实�?br>　var obj1=new class1();
　//调用通过prototype原型对象定义的showProp�Ҏ��
　obj1.showProp();
//--�Q?br>�Q?script�Q?

　　prototype是一个JavaScript对象�Q�可以�ؓprototype对象��d��、修攏V��删除方法和属性。从而�ؓ一个类��d��成员定义�?br>
　　了解了函数的prototype对象�Q�现在再来看new的执行过�E��?br>　　�Q?�Q�创��Z��个新的对象，�q�让this指针指向它；
　　�Q?�Q�将函数的prototype对象的所有成员都赋给�q�个新对象；
　　�Q?�Q�执行函��C��Q�对�q�个对象�q�行初始化操作；
　　�Q?�Q�返回（1�Q�中创徏的对象�?br>
　　和new的执行过�E�相比，多了用prototype来初始化对象的过�E�，�q�也和prototype的字面意思相�W�，它是所对应�cȝ��实例的原型。这个初始化�q�程发生在函��C��Q�构造器�Q�执行之前，所以可以在函数体内部调用prototype中定义的属性和�Ҏ��Q�例如：

�E�序代码

�Q�script language="JavaScript" type="text/javascript"�Q?br>�Q?--
//定义一个只有一个属性prop的类
function class1(){
       　this.prop=1;
       　this.showProp();
}
//使用函数的prototype属性给�c�d��义新成员
class1.prototype.showProp=function(){
       　alert(this.prop);
}
//创徏class1的一个实�?br>var obj1=new class1();
//--�Q?br>�Q?script�Q?

　　和上一�D�代码相比，�q�里在class1的内部调用了prototype中定义的�Ҏ��showProp�Q�从而在对象的构造过�E�中��弹��Z��对话框，昄��prop属性的��gؓ1�?br>
　　需要注意，原型对象的定义必��d��创徏�c�d��例的语句之前�Q�否则它��不会�v作用�Q�例如：

�E�序代码

�Q�script language="JavaScript" type="text/javascript"�Q?br>�Q?--
//定义一个只有一个属性prop的类
function class1(){
       　this.prop=1;
       　this.showProp();
}
//创徏class1的一个实�?br>var obj1=new class1();
//在创建实例的语句之后使用函数的prototype属性给�c�d��义新成员�Q�只会对后面创徏的对象有�?br>class1.prototype.showProp=function(){
       　alert(this.prop);
}
//--�Q?br>�Q?script�Q?

　　�q�段代码��会产生�q�行旉��误，昄��对象没有showProp�Ҏ��Q�就是因��Ҏ��的定义是在实例化一个类的语句之后�?br>
　　由此可见�Q�prototype对象专用于设计类的成员，它是和一个类紧密相关的，除此之外�Q�prototype�q�有一个重要的属性：constructor�Q�表�C�对该构造函数的引用�Q�例如：

�E�序代码

function class1(){
       　alert(1);
}
class1.prototype.constructor(); //调用�cȝ��构造函�?

　　�q�段代码�q�行后将会出现对话框�Q�在上面昄��文字“1”�Q�从而可以看��Z��个prototype是和一个类的定义紧密相关的。实际上�Q�class1.prototype.constructor===class1�?br>

一�U�JavaScript�cȝ��设计模式

　　前面已经介绍了如何定义一个类�Q�如何初始化一个类的实例，且类可以在function定义的函��C��中添加成员，又可以用prototype定义�cȝ��成员�Q�编�E�的代码昑־�混�ؕ。如何以一�U�清晰的方式来定义类呢？下面�l�出了一�U�类的实现模式�?br>
　　在JavaScript中，�׃��对象灉|��的性质�Q�在构造函��C��也可以�ؓ�c�L��加成员，在增加灵�z�L��的同时�Q�也增加了代码的复杂度。�ؓ了提高代码的可读性和开发效率，可以采用�q�种定义成员的方式，而��用prototype对象来替代，�q�样function的定义就是类的构造函敎ͼ��W�合传统意义�cȝ��实现�Q�类名和构造函数名是相同的。例如：

�E�序代码

function class1(){
       　//构造函�?br>}
//成员定义
class1.prototype.someProperty="sample";
class1.prototype.someMethod=function(){
       　//�Ҏ��实现代码
}

　　虽然上面的代码对于类的定义已�l�清��C��很多�Q�但每定义一个属性或�Ҏ��Q�都需要��用一�ơclass1.prototype�Q�不仅代码体�U�变大，而且易读性还不够。�ؓ了进一步改�q�，可以使用无类型对象的构造方法来指定prototype对象�Q�从而实现类的成员定义：

�E�序代码

//定义一个类class1
function class1(){
       　//构造函�?br>}
//通过指定prototype对象来实现类的成员定�?br>class1.prototype={
       　someProperty:"sample",   someMethod:function(){
           　　//�Ҏ��代码
       　},
       　…//其他属性和�Ҏ��.
}

　　上面的代码用一�U�很清晰的方式定义了class1�Q�构造函数直接用�c�d��来实玎ͼ�而成员��用无�c�d��对象来定义，以列表的方式实现了所有属性和�Ҏ��Q��ƈ且可以在定义的同时初始化属性的倹{��这也更象传�l�意义面向对象语�a�中类的实现。只是构造函数和�cȝ��成员定义被分��Z��两个部分�Q�这可看成JavaScript中定义类的一�U�固定模式，�q�样在��用时会更加容易理解�?br>
　　注意�Q�在一个类的成员之间互相引用，必须通过this指针来进行，例如在上面例子中的someMethod�Ҏ��中，如果要��用属性someProperty�Q�必��通过this.someProperty的�Ş式，因�ؓ在JavaScript中每个属性和�Ҏ��都是独立的，它们通过this指针联系在一个对象上�?

王娟 2007-07-25 15:27 发表评论

国产精品亚洲网站,欧美精品综合,亚洲精品中文在线

js中innerHTML与innerText的用法与区别