javascript - 合并 2 个类

标签 javascript ecmascript-6 es6-class

我想合并 2 个类或将 1 个类的所有方法添加到另一个类。将来会是更多的类,而不仅仅是一个(ContainerClient)类。

ClientContainerClient

我试过了,但我认为它可以更容易地完成。

for (var a of Object.getOwnPropertyNames(ContainerClient.prototype)) {
  Client.prototype[a] = ContainerClient.prototype[a];
}

原理:ContainerClient依赖于Client

数据.js

class Data {
  constructor () {

  }
}

客户端.js

class Client extends Data {
  me () {
    return {
      id: '1',
    };
  }
}

容器.js

class Container extends Data {
  containers () {
    return [
      {
        clientId: '1',
        id: '2',
      },
      {
        clientId: '2',
        id: '3',
      },
    ];
  }
}

ContainerClient.js

class ContainerClient extends Data {
  containers () {
    return {
      clientId: '1',
      id: '2',
    };
  }
}

--> 导出之前的Client.js <--

// --> HERE <--
for (var a of Object.getOwnPropertyNames(ContainerClient.prototype)) {
  Client.prototype[a] = ContainerClient.prototype[a];
}

// -> [ 'constructor', 'me', 'containers' ]​​​​​ 👍
console.log(Object.getOwnPropertyNames(Client.prototype));

索引.js

const client = new Client();
const container = new Container();

// -> { clientId: '1', id: '2' }​​​​​ 👍
console.log(client.containers());

最佳答案

首先是简短的回答:您正在做的(几乎)是您能做的最好的。为了进行微小的改进,您可以将 for 循环替换为 Object.assign,这会将它缩短一行,但它仍然会做同样的事情。

现在是长答案。

我首先要说,我同意很多关于此设计的评论(如代码气味)。很可能不应该有继承,并且每种类型都应该使用其他类型的实例。客户端应该使用 数据对象。容器应该是一组客户端对象。等等。

有了免责声明,这里是对您问题的更直接的回答。

您要查找的名称是多重继承/混入。 Python,仅举一个简单的例子,原生支持多重继承,所以在 Python 中你可以这样写:

class Client(Data, ContainerClient):
    ...

但 JavaScript 的原型(prototype)链仅支持单继承,因此您必须接受某种变通方法。一种这样的解决方法 creates subclasses on the fly with a variable base .像这样的东西:

const ClientMixin = Sup => class extends Sup {
    // ...
};
const ContainerMixin = Sup => class extends Sup {
    // ...
};

然后你可以像这样定义你的具体类:

class Container extends ContainerMixin(Data) {
    // ...
}

class ContainerClient extends ClientMixin(ContainerMixin(Data)) {
    // ...
}

这是否看起来比您已经在做的事情更容易取决于您。因为另一种解决方法当然是像您所做的那样简单地将属性从一个类复制到另一个类。

关于javascript - 合并 2 个类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50347811/

相关文章:

javascript - 在给定时间内从 n 到 0 倒计时,负最终值

javascript - 如何获取边界并更改边界以删除或添加标记 Google map 列表

javascript - 什么是 "new.target"?

javascript - 在 render 中调用方法或使用 getter

javascript - 意外 token = 用于 Node 8.4 中的类属性

javascript - 类属性作为 ES6 中的语句

javascript - 在设备上第一次单击禁用 anchor 标记,需要第二次单击才能工作

javascript - 在 Node.js 命令上,为什么我收到错误消息 "windows cannot find $. Make sure you' 已经正确输入了名称...”

javascript - 如何在 react 中获取对象中的嵌套数组?

javascript:使用 EcmaScript 6/immutable js 左合并两个对象