Classes in JScript – Part III 类的继承与封装

【原文地址】Classes in JScript – Part III: Class Hierarchy and Data Encapsulation

【原文发表日期】Published Wednesday, October 31, 2007 8:10 在这篇博客中，我们将会来讨论如何在Jscript中实现类的继承与封装。 我仍然会使用之前第一部分和第二部分文章中所使用的示例代码，并按需要来修改它们。 function Rectangle (ht, wt) { this.height = ht; this.width=wt; } Rectangle.prototype.area = function() {return this.height * this.width;} var rect1 = new Rectangle(5,10); var rect2 = new Rectangle(2,4); var rect1Area = rect1.area(); // rect1.area() will return 50. var rect2Area = rect2.area(); // rect2.area() will return 8. 在支持而向对象的语言中都会有两个不同而有联系的概念：类和实例。在第一篇文章中，我们定义的类是对象的框架结构，在类中定义了对象所拥有的字段属性，类别和对对象进行操作的方法。类是一个抽象的概念，一个类可以拥有很多不同的实例，每个实例都有自己不同的状态。 但是，基于prototype 的语言（比如：JScript），并没有对类和实例进行区分。这种语言中只有对象(objects)的概念。基于prototype的语言中，都提供了一个prototype对象，这个对象可以为新对象提供初始化属性的模板。任何对象都可以给prototype属性赋不同的值。 在支持Class的语言中，类的继承关可以通过类的来定义。定义类的时候，我们可以指定它继承于一个已经存在的类。 前面的文章中已经介绍过了，在Jscript中并不支持Class关键字（来定义类）。它是通过Constructor和Prototype对象来模拟类。因此，类的继承也可以通过Constructor和Prototype来实现。 让我们扩展上类的例子，定义一个带有坐标的Rectangle。理论上，我们可能需要定义8个点（topLeftX, topLeftY, topRight(X & Y),bottomLeft(X & Y) and bottomRight(X & Y) ）才能完全定位坐标，但是我们这里将它简化一下，只需要前面两个。 定义PositionedRectangle: function PositionedRectangle (topLeftX,topLeftY,height,width) { this.topLeftX = topLeftX; this.topLeftY = topLeftY; } 修改PositionedRectangle的prototype值为Rectangle的一个实例。 PositionedRectangle.prototype = new Rectangle; 类似的，我们可以创建一个PositionedRectangle对象。 var prObj = new PositionedRectangle(2,3,4,5); 当prObj创建的时候，它会从Rectangle类中继承height和width，因为我们修改了PositionedRectangle的值为Rectangle的一个实例。 通过下面的代码，我们可以看到topLeftX，topLeftY，height，width不同的值： alert(prObj.topLeftX+" "+ prObj.topLeftY+" "+ prObj.height+" "+ prObj.width); // 显示 2 3 undefined undefined 因为Rectangle的height 和 width，未被赋值，所以我们看到它们的值是undefined。这就是以上做法的不完善的地方。如果我们像下面这样在构造器中给height和width属性设置默认值： function Rectangle () { this.height = 1; this.width=1; } 这样的结果会是2 3 1 1。但是它不是我们希望的结果，因为参数值未被传递下来。 为了解决这个问题，我们可以往构造器中添加一些代码： function PositionedRectangle (topLeftX,topLeftY,height,width) { this.topLeftX = topLeftX; this.topLeftY = topLeftY; //其中一种做法分别新建这两个属性 this.height = height; this.width=width; //另一种做法是调用基类的构造器 Rectangle(height,width); (译注：2008/1/16更新 原代码的调用有误，应该是这样:Rectangle.call(this,height,width); ) } PositionedRectangle.prototype = new Rectangle; var prObj = new PositionedRectangle(2,3,4,5); alert(prObj.topLeftX+" "+ prObj.topLeftY+" "+ prObj.height+" "+ prObj.width); 这样的输出结果会是2 3 4 5。这里我们做调用子类的一个普通法一样调用基类构造器，来设置正确的值。 它是如何工作的？ 1． 首先，new操作符会创建一个普通的对象，将它的prototype属性的值赋给PositionedRectangle.prototype.。 2． New操作符传入一个新创建的对象给PositionedRectangle构造器，用this关键字来表示它。 3． 接下来初始化topLeftX和topLeftX。 4． 在新创建的对象作用域里调用Rectangle方法，来初始化height和width的值。 5． 在PositionedRectangle构造器返回时，将新创建的对象赋值给prObj。 如果我们以后创建一个PositionedRectangle的子类，那么就需要为子类的prototype属性赋值为PositionedRectangle的实例，然后在子类的构造器里像调用普通方法一样调基类的构造器。 数据封装 所谓的数据封装，就是说对象的数据成员只能内部访问，而通过一些公用的方法来暴露给外界。简单的说，就是外界无法直接访问和修改对象的属性。 在Jscript中，默认情况下所有的成员都是公有的，不需要通过方法来访问和修改这些成员。像上面的例子： ect1.height = 10; //会将height的值修改为10 那么我们该如何来封装成员呢？ 答案就是能过使用内嵌函数，而不要在对象成员前加this关键字。让我们来为Rectangle增加一个colour属性。我们要将colour定义为私有的，而通过公有函数来向对界开放。 function Rectangle (ht, wt) { this.height = ht; this.width=wt; var colour = null; // colour now is a private member of this class. this.setColour = setColour; this.getColour=getColour; //These methods will be used to access / modify colour. function setColour (passedColour) { colour =passedColour; } function getColour() { return colour; } } ar rect1 = new Rectangle(5,10); rect1.setColour (“blue”); // 设置颜色为blue. alert(rect1.getColour); // 这里会弹出blue alert(rect1.colour) // 这里会弹出undefined Rect1.colour =”red”; /*这里并不会弹出任何错误，也不会修改原先的color属性的值，而是会在Rect1对象上创建一个公有的colour属性。 */ alert(rect1.getColour); //这里仍然会弹出blue alert(rect1.colour) // 而这里则会弹出red. 这就是我们定义私有成员，和通过公有方法来访问私有成员的途径。这样我们就可以达到封装数据的目的了。 到这里所介绍的并不是在Jscript中实现类的全部，但是做为一个开始已经是足够了。希望这个博客对你是有用的，并且你也喜欢阅读。 这三篇就是我们计划在这个主题上的所有讨论了。这里还有一些有用的链接： http://www.webdevelopersjournal.com/articles/jsintro3/js_begin3.html http://dean.edwards.name/weblog/2006/03/base/ http://www.crockford.com/javascript/inheritance.html http://devedge-temp.mozilla.org/viewsource/2001/oop-javascript/ 谢谢， Ritesh SDET, JScript Team.