【问题标题】:ES6 class inheritance without "extends" keyword没有“extends”关键字的 ES6 类继承
【发布时间】:2018-11-23 14:19:16
【问题描述】:

我想在没有 extends 关键字的 es6 类中进行继承:

典型方法:

class Foo extends Bar {
  contructor() {
    ...
  }
}

我正在寻找的是生成一个具有相同签名但使用此模式的对象:

class Foo {
  contructor(Bar) {
    // use Bar class somehow
    ...
  }
}

谢谢

== 编辑 ==

上下文:

我为 JS 库 threejs 构建了一个扩展 (ami)。 它提供了在threejs 中无缝工作的新对象。

问题:

threejs 具有为每个对象生成唯一 ID 的内部机制,这对其正确行为至关重要。

当前的实现依赖于 three 作为全局变量公开,因此创建对象的任何人都必须引用它以确保 id 实际上是唯一的。

// in ami
// ID of this object will be unique accros all classes
// that are based of global THREE.Mesh
class Foo extends THREE.Mesh {
  contructor() {
    ...
  }
}

使用全局变量可以正常工作,但我想摆脱全局命名空间要求。

如果我没有在 ami 和我的应用程序中引用相同的基本元素,id 可能会发生冲突。

// in ami
import {Mesh} from 'three';

class Foo extends Mesh {
  contructor() {
    ...
  }
}

// in my app
import {Foo} from 'ami';
imoport {Mesh} from 'three';

const foo = new Foo(); // it uses "Mesh" from ami as a base.
const mesh = new Mesh(); // it uses current "Mesh" as a base.
// IDs will conflict...

一个可行的解决方案是我在ami 构造函数中提供一个新参数,以提供three 参考:

// in ami
class Foo {
  contructor(mesh) {
    ...
  }
}

// in my app
imoport {Mesh} from 'three';
import {Foo} from 'ami';

const foo = new Foo(Mesh);
const mesh = new Mesh();

但是我不知道如何实现这个解决方案。

【问题讨论】:

  • 你想这样做吗?当然,您总是可以以 ES5 风格显式地进行继承,但这完全违背了class 语法的目的。
  • 到目前为止你尝试过什么?您对extends 的工作原理了解多少,比如需要做哪些事情?
  • 也许您正在寻找组合而不是继承?只需this.inner = new Bar
  • 感谢您的反馈,在问题中添加了更多详细信息-
  • Mesh 继承自 Object3D 其中 doesn't do anything weird 关于 uuid。听起来您的代码库很混乱,因此使用 import … from 'three' 会解析为 three.js 库的两个不同实例。修复你的模块加载器/捆绑器,而不是重写代码。

标签: javascript class inheritance ecmascript-6


【解决方案1】:

此答案解决了最初提出的问题,并且足以帮助 OP 改进问题并立即获得支持。如果您不是仅仅因为球门柱移动了而投反对票,我将不胜感激。

假设你没疯,这是一个学习练习,学习如何实现它的最好方法是获取 Typescript,使用 extends 编写一个类,以 ES5 为目标进行编译,然后查看生成的 JavaScript .确保您的基类具有方法、属性、静态方法、静态属性以及带有混合必需参数和可选参数的构造函数。然后从中派生另一个类并覆盖一些方法并替换一些方法。你会看到那些认真对待它的人是如何做到的。

【讨论】:

  • 感谢您的反馈,在问题中添加了更多详细信息-
  • 清除全局命名空间是 Aurelia SPA 框架的作者所做的事情,即删除了 所有内容,有时它可能是一个任务弄清楚如何将事物带回进入范围。我不能自己做修改后的问题,但我强烈建议您与 Aurelia 的作者在gitter.im/aurelia/Discuss 互动,您可以鼓励他们在堆栈溢出时回答这个问题。您也可以搜索“Aurelia threejs”,因为这个特定问题可能已经解决了。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-05-08
  • 1970-01-01
  • 2015-05-14
  • 1970-01-01
  • 2016-02-09
  • 2012-12-15
相关资源
最近更新 更多