javascript_继承

最新推荐文章于 2023-07-06 20:08:18 发布

转载最新推荐文章于 2023-07-06 20:08:18 发布 · 1.3k 阅读

文章标签：

#javascript #prototype #uml #mozilla #测试 #function

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文深入讲解JavaScript中的继承机制，包括对象冒充、原型链等多种实现方式，并通过具体示例介绍了如何在实际应用中运用这些机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明继承机制最简单的方法是，利用一个经典的例子——几何形状。实际上，几何形状只有两种，即椭圆形（是圆形的）和多边形（具有一定数量的边）。圆是椭圆形的一种，它只有一个焦点。三角形、矩形和五边形都是多边形的一种，具有不同数量的边。正方形是矩形的一种，所有的边等长。这就构成了一种完美的继承关系。

在这个例子中，形状（Shape）是椭圆形（Ellipse）和多边形（Polygon）的基类（base class）（所有类都由它继承而来）。椭圆具有一个属性foci，说明椭圆具有的焦点的个数。圆形（Circle）继承了椭圆形，因此圆形是椭圆形的子类（subclass），椭圆形是圆形的超类（superclass）。同样的，三角形（Triangle）、矩形（Rectangle）和五边形（Pentagon）都是多边形的子类，多边形是它们的超类。最后，正方形（Square）继承了矩形。

最好用图来解释这种继承关系，这是UML（统一建模语言）的用武之地。UML的主要用途之一是，可视化地表示像继承这样的复杂对象关系。图4-1是解释Shape和它的子类之间关系的UML图示。

在UML中，每个方框表示一个类，由类名说明。Triangle、Rectangle和Pentagon顶部的线段汇集在一起，指向Shape，说明这些类都由Shape继承而来。同样的，从Square指向Rectangle的箭头说明了它们之间的继承关系。

如果有兴趣学习UML，可以参考三位UML创始人所著的《UML用户指南（第二版）》。

图 4-1

要用ECMAScript实现继承机制，首先从基类入手。所有开发者定义的类都可作为基类。出于安全原因，本地类和宿主类不能作为基类，这样可以防止公用访问编译过的浏览器级的代码，因为这些代码可以被用于恶意攻击。

选定基类后，就可以创建它的子类了。是否使用基类完全由你决定。有时，你可能想创建一个不能直接使用的基类，它只是用于给子类提供通用的函数。在这种情况下，基类被看作抽象类。

尽管ECMAScript并没有像其他语言那样严格地定义抽象类，但有时它的确会创建一些不允许使用的类。通常，我们称这种类为抽象类。

创建的子类将继承超类的所有属性和方法，包括构造函数及方法的实现。记住，所有属性和方法都是公用的，因此子类可直接访问这些方法。子类还可添加超类中没有的新属性和方法，也可以覆盖超类中的属性和方法。

4.2.1 继承的方式

和其他功能一样，ECMAScript中实现继承的方式不止一种。这是因为JavaScript中的继承机制并不是明确规定的，而是通过模仿实现的。这意味着所有的继承细节并非由解释程序处理。作为开发者，你有权决定最适用的继承方式。

1. 对象冒充

构想原始的ECMAScript时，根本没打算设计对象冒充（object masquerading）。它是在开发者开始理解函数的工作方式，尤其是如何在函数环境中使用this关键字后才发展出来的。

其原理如下：构造函数使用this关键字给所有属性和方法赋值（即采用类声明的构造函数方式）。因为构造函数只是一个函数，所以可使ClassA的构造函数成为ClassB的方法，然后调用它。ClassB就会收到ClassA的构造函数中定义的属性和方法。例如，用下面的方式定义ClassA和ClassB：

还记得吗？关键字this引用的是构造函数当前创建的对象。不过在这个方法中，this指向的是所属的对象。这个原理是把ClassA作为常规函数来建立继承机制，而不是作为构造函数。如下使用构造函数ClassB可以实现继承机制：

在这段代码中，为ClassA赋予了方法newMethod（记住，函数名只是指向它的指针）。然后调用该方法，传递给它的是ClassB构造函数的参数sColor。最后一行代码删除了对ClassA的引用，这样以后就不能再调用它。

所有的新属性和新方法都必须在删除了新方法的代码行后定义。否则，可能会覆盖超类的相关属性和方法：

为证明前面的代码有效，可以运行下面的例子：

有趣的是，对象冒充可以支持多重继承。也就是说，一个类可以继承多个超类。用UML表示的多继承机制如图4-2所示。

图 4-2

例如，如果存在两个类ClassX和ClassY，ClassZ想继承这两个类，可以使用下面的代码：

这里存在一个弊端，如果ClassX和ClassY具有同名的属性或方法，ClassY具有高优先级，因为继承的是最后的类。除这点小问题之外，用对象冒充实现多继承机制轻而易举。

由于这种继承方法的流行，ECMAScript的第三版为Function对象加入了两个新方法，即call()和apply()。

2. call()方法

call()方法是与经典的对象冒充方法最相似的方法。它的第一个参数用作this的对象。其他参数都直接传递给函数自身。例如：

在这个例子中，函数sayColor()在对象外定义，即使它不属于任何对象，也可以引用关键字this。对象obj的color属性等于"red"。调用call()方法时，第一个参数是obj，说明应该赋予sayColor()函数中的this关键字值是obj。第二个和第三个参数是字符串。它们与sayColor()函数中的参数prefix和suffix匹配，最后生成的消息"The color is red, a very nice color indeed"将被显示出来。

要与继承机制的对象冒充方法一起使用该方法，只需将前三行的赋值、调用和删除代码替换即可：

这里，想让ClassA中的关键字this等于新创建的ClassB对象，因此this是第一个参数。第二个参数sColor对两个类来说都是唯一的参数。

3. apply()方法

apply()方法有两个参数，用作this的对象和要传递给函数的参数的数组。例如：

这个例子与前面的例子相同，只是现在调用的是apply()方法。调用apply()方法时，第一个参数仍是obj，说明应该赋予sayColor()中的this关键字值是obj。第二个参数是由两个字符串构成的数组，与sayColor()的参数prefix和suffix匹配。生成的消息仍是"The color is red, a very nice color indeed"，将被显示出来。

该方法也用于替换前三行的赋值、调用和删除新方法的代码：

同样的，第一个参数仍是this。第二个参数是只有一个值color的数组。可以把ClassB的整个arguments对象作为第二个参数传递给apply()方法：

当然，只有超类中的参数顺序与子类中的参数顺序完全一致时才可以传递参数对象。如果不是，就必须创建一个单独的数组，按照正确的顺序放置参数。此外，还可使用call()方法。

4. 原型链

继承这种形式在ECMAScript中原本是用于原型链的。上一章介绍了定义类的原型方式。原型链扩展了这种方式，以一种有趣的方式实现继承机制。

在上一章中学过，prototype对象是个模板，要实例化的对象都以这个模板为基础。总而言之，prototype对象的任何属性和方法都被传递给那个类的所有实例。原型链利用这种功能来实现继承机制。

如果用原型方式重定义前面例子中的类，它们将变为下列形式：

原型链的神奇之处在于突出显示的代码行。这里，把ClassB的prototype属性设置成ClassA的实例。这很有意义，因为想要ClassA的所有属性和方法，但又不想逐个将它们赋予ClassB的prototype属性。还有比把ClassA的实例赋予prototype属性更好的方法吗？

注意，调用ClassA的构造函数时，没有给它传递参数。这在原型链中是标准做法。要确保构造函数没有任何参数。

与对象冒充相似，子类的所有属性和方法都必须出现在prototype属性被赋值后，因为在它之前赋值的所有方法都会被删除。为什么？因为prototype属性被替换成了新对象，添加了新方法的原始对象将被销毁。所以，为ClassB类添加name属性和sayName()方法的代码如下：

可通过运行下面的例子测试这段代码：

此外，在原型链中，instanceof运算符的运行方式也很独特。对ClassB的所有实例，instanceof为ClassA和ClassB都返回true。例如：

在ECMAScript的弱类型世界中，这是极其有用的工具，不过使用对象冒充时不能使用它。

原型链的弊端是不支持多重继承。记住，原型链会用另一类型的对象重写类的prototype属性。

5. 混合方式

这种继承方式使用构造函数定义类，并未使用任何原型。对象冒充的主要问题是必须使用构造函数方式（如上一章中学到的），这不是最好的选择。不过如果使用原型链，就无法使用带参构造函数了。开发者该如何选择呢？答案很简单，两者都用。

在前一章，你学过创建类的最好方式是用构造函数方式定义属性，用原型方式定义方法。这种方式同样适用于继承机制，用对象冒充继承构造函数的属性，用原型链继承prototype对象的方法。用这两种方式重写前面的例子，代码如下：

在此例子中，继承机制由两行突出显示的代码实现。在第一行突出显示的代码中，在ClassB构造函数中，用对象冒充继承ClassA类的sColor属性。在第二行突出显示的代码中，用原型链继承ClassA类的方法。由于这种混合方式使用了原型链，所以instanceof运算符仍能正确运行。

下面的例子测试了这段代码：

在真正的Web站点和应用程序中，几乎不可能创建名为ClassA和ClassB的类，更可能的是创建表示特定事物（如形状）的类。考虑本章开头所述的形状的例子，Polygon、Triangle和Rectangle类就构成了一组很好的探讨数据。

1. 创建基类

首先考虑Polygon类。哪些属性和方法是必需的？首先，一定要知道多边形的边数，所以应该加入整数属性sides。还有什么是多边形必需的？也许你想知道多边形的面积，那么加入计算面积的方法getArea()。图4-3展示了该类的UML表示。

图 4-3

在UML中，属性由属性名和类型表示，位于紧接类名之下的单元中。方法位于属性之下，说明方法名和返回值的类型。

在ECMAScript中，可以如下编写类：

注意，Polygon类不够详细精确，还不能使用，方法getArea()返回0，因为它只是一个占位符，以便子类覆盖。

2. 创建子类

现在考虑创建Triangle类。三角形具有三条边，因此这个类必须覆盖Polygon类的sides属性，把它设置为3。还要覆盖getArea()方法，使用三角形的面积公式，即1/2×底×高。但如何得到底和高的值呢？需要专门输入这两个值，所以必须创建base属性和height属性。Triangle类的UML表示如图4-4所示。

该图只展示了Triangle类的新属性及覆盖过的方法。如果Triangle类没有覆盖getArea()方法，图中将不会列出它。它将被看作从Polygon类保留下来的方法。完整的UML图还展示了Polygon和Triangle类之间的关系（图4-5），使它显得更清楚。

在UML中，决不会重复显示继承的属性和方法，除非该方法被覆盖（或被重载，这在ECMAScript中是不可能的）。

Triangle类的代码如下：

注意，虽然Polygon的构造函数只接受一个参数sides，Triangle类的构造函数却接受两个参数，即base和height。这因为三角形的边数是已知的，且不想让开发者改变它。因此，使用对象冒充时，3作为对象的边数被传给Polygon的构造函数。然后，把base和height的值赋予适当的属性。

在用原型链继承方法后，Triangle将覆盖getArea()方法，提供为三角形面积定制的计算。

最后一个类是Rectangle，它也继承Polygon。矩形有四条边，面积是用长度×宽度计算的，长度和宽度即成为该类必需的属性。在前面的UML图中，要把Rectangle类填充在Triangle类的旁边，因为它们的超类都是Polygon（如图4-6所示）。

图 4-6

Rectangle的ECMAScript代码如下：

注意，Rectangle构造函数不把sides作为参数，同样的，常量4被直接传给Polygon构造函数。与Triangle相似，Rectangle引入了两个新的作为构造函数的参数的属性，然后覆盖getArea()方法。

3. 测试代码

可以运行下面代码来测试为该示例创建的代码：

这段代码创建一个三角形，底为12，高为4，还创建一个矩形，长为22，宽为10。然后输出每种形状的边数及面积，证明sides属性的赋值正确，getArea()方法返回正确的值。三角形的面积应为24，矩形的面积应该是220。

4. 采用动态原型方法如何？

前面的例子用对象定义的混合构造函数/原型方式展示继承机制，那么可以使用动态原型来实现继承机制吗？不能。

继承机制不能采用动态化的原因是，prototype对象的独特本性。看下面代码（这段代码不正确，却值得研究）：

上面的代码展示了用动态原型定义的Polygon和Triangle类。错误在于突出显示的设置Triangle.prototype属性的代码。从逻辑上讲，这个位置是正确的，但从功能上讲，却是无效的。从技术上说来，在代码运行前，对象已被实例化，并与原始的prototype对象联系在一起了。虽然用极晚绑定可使对原型对象的修改正确地反映出来，但替换prototype对象却不会对该对象产生任何影响。只有未来的对象实例才会反映出这种改变，这就使第一个实例变得不正确。

要正确使用动态原型实现继承机制，必须在构造函数外赋予新的prototype对象，如下所示：

这段代码有效，因为是在任何对象实例化前给prototype对象赋值的。遗憾的是，这意味着不能把这段代码完整的封装在构造函数中了，而这正是动态原型的主旨。