这些类有层次之分吗?
另一个好问题的是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支持面向对象的开发(2)