JavaScript 中的多重继承

JavaScript 是一种部分面向对象的语言。要使用它，需要理解其面向对象的特性。在本文中，我们将重点关注 JavaScript 中的多重继承概念。

一个对象可以继承自多个其他对象，即该对象具有来自多个父对象（而不仅仅是一个父对象）的公共属性。在 JavaScript 中，可以通过将不同对象的属性合并到一个对象中来实现这一点。让我们看看表示如何合并多个属性的总体语法。

语法

让我们考虑如下函数语法：

function multiple(...arguments) {
   let objects = {};
   for (all arg of arguments) {
      objects = {
         ...object,
         ...arg
      };
   }
   return objects;
}

上述语法可以像这样使用：

const objects = multiple(
   { foo: 1 },
   { bar: 2 },
   { baz: 3 }
);

因此，我们可以传递多个对象，然后使用扩展运算符复制属性。类似的工作可以使用 mixin 来完成。Mixin 是可以合并到其他对象中的一些对象。在创建对象时，我们可以选择将哪些 mixin 合并到最终对象中。

寄生继承

另一种特殊的继承形式是寄生继承。在这种类型的继承中，我们获取一些对象的所有功能，并将它们转换为单个对象。以下示例将说明此概念：

示例

<!DOCTYPE html>
<html>
<head>
   <title>HTML Console</title>
</head>
<body>
   <h3> Output Console </h3>
   <p> Output: </p>
   <div id="output">
   </div>
   <div id="opError" style="color : #ff0000">
   </div>
   <script>
      var content = ''
      var error = ''
      var opDiv = document.querySelector('#output')
      var opErrDiv = document.querySelector('#opError')

      // actual javascript code
      try {
         function object(my_proto) {
            function F() { }
            F.prototype = my_proto;
            return new F();
         }
         const base2D = {
            name: '2D region',
            dimensions: 2
         };
         function rect(base2D, w, h) {
            const obj = object(base2D);
            obj.name = 'rectangle';
            obj.calculateArea = function () {
               return this.width * this.height;
            };
            obj.width = w;
            obj.height = h;
            return obj;
         }
         function circ(base2D, r) {
            const obj = object(base2D);
            obj.name = 'circle';
            obj.calculateArea = function () {
               return 3.14159 * this.rad * this.rad;
            };
            obj.rad = r;
            return obj;
         }
         const rectObj = rect(base2D, 5, 7);
         content += "The rectangle object: " + JSON.stringify(rectObj) + '<br>'
         content += "The area of rectangle: " + JSON.stringify(rectObj.calculateArea()) + '<br>'
         const circObj = circ(base2D, 10);
         content += "The circle object: " + JSON.stringify(circObj) + '<br>'
         content += "The area of the circle: " + JSON.stringify(circObj.calculateArea()) + '<br>'
      }
      catch (err) {
         error += err
      }
      finally {

         // display on output console
         opDiv.innerHTML = content
         opErrDiv.innerHTML = error
      }
   </script>
</body>
</html>

在这个例子中，我们有一个函数 object()，它返回函数 F 的一个实例。然后创建 base2D 对象，它具有 name 和 dimension 属性。我们可以使用此 dimension 属性来检查它是否为适当的类型。最后创建一个矩形对象。矩形对象本身是一个 2D 对象，它具有一些自己的属性。因此，此对象获取 base2D 对象以及 width 和 height 参数。另一个类似的对象 circ 也使用不同的参数集创建。圆形也属于 2d 形状类别，因此采用了 base2D 属性。但是这里另一个参数是半径，其面积计算逻辑不同。

构造函数借用

实现多重继承的另一种方法是借用构造函数。在这种方法中，父构造函数用于形成子构造函数。这可以通过以下示例来说明：

示例

function CustomShape(id) {
   this.id = id;
}
CustomShape.prototype.name = 'Shape';
CustomShape.prototype.toString = function() {
   return this.name;
};
function SquareShape(id, name, side) {
   CustomShape.apply(this, [id]);
   this.name = name;
   this.side = side;
}
SquareShape.prototype = new CustomShape();
SquareShape.prototype.name = 'Square';
function CircleShape(id, name, rad) {
   CustomShape.apply(this, [id]);
   this.name = name;
   this.rad = rad;
}
CircleShape.prototype = new CustomShape();
CircleShape.prototype.name = 'Circle';

在此示例中，CustomShape 参数具有 id 属性。我们通过调用 apply 函数来调用 CustomShape 构造函数。然后我们创建两种类型。通过分配 CustomShape 对象的原型来创建 SquareShape 和 CircleShape。'name' 字段在所有 SquareShape 对象中共享为 'Square'，对于所有 CircleShape 对象，则为 'Circle'。

结论

多重继承特性从不同的对象获取多个特性并将其分配给当前对象。在一些纯面向对象的语言中，我们可以将多个父类分配给某个对象，以便它们可以同时获取这些父类的属性。在 JavaScript 中，这个想法是类似的，但实现方法略有不同。JavaScript 不是完全面向对象的语言，因此应用了不同的方法来模拟系统中的多重继承特性。

更新于： 2022年8月23日

5K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告