标题:JavaScript支持面向对象的开发
只看楼主
好学
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
帖 子:622
专家分:318
注 册:2004-5-4
结帖率:50%
 问题点数:0 回复次数:7 
JavaScript支持面向对象的开发

如果你使用JavaScript编程,你或许会怀疑它是否包含了面向对象(OO)的结构。实际上,JavaScript的确支持面向对象的架构――在某种程度上。本文将通过一个可扩展向量图形(SVG)的实例来说明JavaScript的OO结构。

我如何在类中定义方法和属性? OO开发的一个基本方面是类及其相应的方法和/或属性的使用。JavaScript通过function关键字支持类(及其属性)的使用。下面的代码定义了一个叫做Figure的JavaScript类:

function Figure() { this.centerX=0; this.centerY=0; this.area=0; this.transform = transform; // methods are defined like this function transform(moveX,moveY,angle) { this.centerX += moveX; this.centerY += moveY; } }

这个Figure类有三个属性:centerX,centerY,和area。另外,它还有一个方法叫做transform()。前三行是这个类的构造器。

但是它看起来不像一个类 你会想Figure()看起来不像一个类,而更像一个JavaScript的函数。那么为什么Figure()定义的是个类?  

严格的说,Figure()函数没有定义一个类,但是它仿造了一个。它实际上创建了一个对象,在括号里的代码使这个对象的构造器。JavaScript的对象支持是很基础的,它并不区分类和对象。 这就引到了问题为什么Figure()函数创建的是一个对象。对象是可以有属性和方法的。基本上,因为Figure()函数同时包含了属性和方法,它就是个对象。在JavaScript里,所有的函数即是对象又是可调用的代码块。这不像它听起来的那样容易被误解。要创建一个Figure()类/对象,你只用使用以下句法:

MyFigure = new Figure();

你也可以把Figure()函数当作代码块调用,就像这样:

figValue = Figure();

变量figValue没有被定义是因为代码块Figure()没有返回任何值。如果你把return(this.area)加到函数的最后一行,figValue就会有个值0。所以figValue是个类型数字,MyFigure是对象 Rectangle的实例。

为什么所有的变量前面都一个“this”? 这个关键字this表示这是对象的实例变量,可以使用MyFigure.centerX从对象外部访问。要让变量成为私有变量,去掉前缀this就行了。this.transform = transform这一行让方法成为公用方法。这个方法通过MyFigure.transform(100,100,0)调用。

这些类有层次之分吗? 另一个好问题的是JavaScript的类是否有层次之分。回答是肯定有。我们来仔细看看是怎么做到分层的。

我们可以定义一个Rectangle子类,并把Figure作为父类:  

function Rectangle(startX, startY, endX, endY) { this.width = endX - startX; this.height = endY - startY; this.centerX = (endX + startX)/2; this.centerY = (endY + startY)/2; this.computeArea = computeArea; function computeArea() { this.area = this.width*this.height; } } Rectangle.prototype = new Figure();

Rectangle对象是用4个自变量创建的,前四行是构造器。 Rectangle类包含了一个方法: computeArea()。最后一行Rectangle.prototype = new Figure();,把Rectangle类定义为从Figure类继承来的子类。

然我来解释一下prototype(原型)。每个对象构造器都有prototype属性;这是用来给所有的对象增加新属性和方法的。这就是为什么原型被用来实现继承:child.prototype = new parent();。通过原型,父对象的所有属性和方法都被添加到子对象上。

要注意this.centerX,this.centerY,和area是Rectangle类中所使用的属性,但是它们是 Figure父类的属性。和Rectangle类相似,Circle类可以被定义成Figure类的原型。这种父子关系可以按你需要来定义深度;你可以创建另一个Rectangle的子类。

我如何创建一个类的实例? 在JavaScript里创建一个类的实例很容易:

rect = new Rectangle(100,100,900,800);

这就创建了Rectangle类型的一个对象。Rectangle的构造器在属性width, height, centerX, 和centerY中填入了值。rect.area属性的值是零(0)。使用这个命令就能调用area方法:

rect.computeArea();

rect.area的值现在是560,000。要调用transform方法使用:

rect.transform(100,200,0);

父和子对象的属性可以像这样访问到:

var ar = rect.area; var wi = rect.width;

我能超越属性和方法吗? 就像你在Java中的一样,你可以超越属性和方法。在子类中定义的属性或者方法可以超越同名的父类的属性和方法。

和全局变量互动 JavaScript也支持全局变量的使用。在以下代码段中测试一下g_area变量的范围:

<HTML> <SCRIPT> var g_area = 20; function Figure() { … this.area=g_area; … } function Rectangle(){ … } Rectangle.prototype = new Figure(); function test(){ g_area = 40; rect = new Rectangle(); alert(rect.area); } </SCRIPT> <BODY onLoad = 'test()'/> </BODY> </HTML>

rect.area的值是20(不是你预计的40),这是因为Rectangle对象是Figure对象的原型,这种关系在test()被调用以前就被定义了。要使用g_area的新值,你需要用以下的方法:  

function test() { g_area = 40; Rectangle.prototype = new Figure(); rect = new Rectangle(); alert(rect.area); }

对于所有的Rectangle的新实例,这将改变area属性的值。或者,你可以使用这种方法:function test() { g_area = 40; rect = new Rectangle(); Rectangle.prototype.area = g_area; alert(rect.area); }

这将改变Rectangle所有现存的以及新实例的area属性的值。

结论 为了效仿OO开发,JavaScript提供了必需的继承、封装和超越属性,尽管它不支持接口和方法的过载。如果你是刚接触到OO开发,用它试试。OO概念允许开发者将一组数据和相关操作集中入一个对象。这在管理浏览器事件和管理浏览器内SVG图时很有用。

搜索更多相关主题的帖子: JavaScript 面向对象 Figure 属性 定义 
2004-05-13 15:31
lmclxl1227
Rank: 1
等 级:新手上路
帖 子:36
专家分:0
注 册:2004-7-23
得分:0 
原来脚本也能干00
2004-07-28 17:35
cux2002
Rank: 1
等 级:新手上路
帖 子:2
专家分:0
注 册:2004-8-16
得分:0 

00是什么啊

看不大懂javascript支持面向对象的开发这文章..

谁能给说讲明白一点好吗?

在此先谢了

2004-08-16 22:50
Afritxia
Rank: 1
等 级:新手上路
帖 子:2
专家分:0
注 册:2004-8-27
得分:0 

有关JavaScript的继承特性

http://www20.brinkster.com/Afritxia/Java.html

2004-08-27 16:35
jacky
Rank: 1
等 级:新手上路
帖 子:104
专家分:0
注 册:2004-12-17
得分:0 
OO?
2004-12-18 10:24
jzhiqing
Rank: 1
等 级:新手上路
帖 子:7
专家分:0
注 册:2005-2-8
得分:0 
OO不是00,就是面对对象
2005-02-08 10:46
kingcat_1985
Rank: 1
等 级:新手上路
帖 子:207
专家分:0
注 册:2004-11-7
得分:0 
好!好文章~~~尽管没看懂~~~但是已经看到实际价值~~~

我是菜鸟~~~   各位大哥要照住小弟我啊~~~
2005-02-08 13:00
gfl1689
Rank: 1
等 级:新手上路
帖 子:5
专家分:0
注 册:2005-5-5
得分:0 
你的頭像好漂亮!謝謝,以後要多多指教!

我是個菜鳥。多多指教
2005-05-05 16:29



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-1429-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.397168 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved