在 ES6 代码中扩展 EcmaScript 5 类

2024-01-09

我想在新项目中使用 EcmaScript 6(通过 Browserify 和 Babelify),但它依赖于用 ES5 编写的第三方库。问题是在我的项目中创建从库中的子类扩展的子类。

E.g:

// Library written in ES5
function Creature(type) {
   this.type = type;
}

// my code in ES6

class Fish extends Creature {
  constructor(name) {
    super("fish");
    this.name = name;
  }
}

除了不运行 Creature() 构造函数之外,这几乎可以工作。我设计了一种解决方法/黑客,它首先构造父类的对象,然后向其附加内容:

class Fish extends Creature {
  constructor(name) {
    super("throw away"); //have to have this or it wont compile
    let obj = new Creature("fish");
    obj.name = name;
    return obj;
  }
}

只要原始类没有“构造函数”函数,这种方法似乎就有效。

我的问题是:这是使用 ES6 的类时扩展它们的最佳方式吗(无需要求库的作者迁移)?或者还有更好的方法吗?我想在我的项目中继续使用 class {} 语法。


您的解决方案使用 babel 可以正常工作。您的代码将被编译为以下 ES5 代码。

// Library written in ES5
"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }

function Creature(type) {
  this.type = type;
}

// my code in ES6

var Fish = (function (_Creature) {
  function Fish(name) {
    _classCallCheck(this, Fish);

    _Creature.call(this, "fish");
    this.name = name;
  }

  _inherits(Fish, _Creature);

  return Fish;
})(Creature);

从上面的代码可以看出,构造函数Creature类被正确调用。线_Creature.call(this, "fish");.

我添加了以下代码来演示fish是一个实例Creature以及一个实例Fish.

var fish = new Fish("test");

console.log(fish.type);
console.log(fish.name);

console.log( fish instanceof Creature );
console.log( fish instanceof Fish);

Output:

fish
test
true
true
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 ES6 代码中扩展 EcmaScript 5 类 的相关文章

  • 如何删除事件监听器?

    下面是我的事件监听器代码 window addEventListener beforeunload function e if sessionStorage token abide call api 如果我想删除这个事件监听器 我该怎么办
  • 需要禁用引导时间选择器的输入

    我正在使用 Bootstrap 时间选择器 我已经成功实施了 但我需要的是用户只能在 30 分钟间隙内插入 例如 10 00 10 30 11 00 等 为此我尝试过的是minuteStep如下图所示 效果完美 fantasyleague
  • 通过 AJAX 发送 XML

    我在 jQuery 中创建了一个 xml 文档 如下所示 var xmlDocument
  • 如何处理 d3 中 Beeswarm 图中的碰撞?

    我一直在玩这个例子here https gf neocities org co2bs co2bee html一会儿 我想做的是突出显示图中的单个节点 圆圈 通过使用边框使其变大 稍后我也想在其中添加文本或字母 目前 我已经圈了Bhutan图
  • 通过搜索查找下一个文本并突出显示不起作用

    当在搜索框中搜索任何文本时 它可以找到并突出显示正确的文本 但是当搜索下一个 新文本时 它无法找到下一个 新文本 再次搜索时它不起作用 我无法找到问题 这JS below JS button search click function va
  • 标点符号加载“动画”,javascript?

    我正在寻找一种好方法来显示一些标点符号加载 动画 我想要的是这样的 This will display at second 1 Waiting for your input This will display at second 2 Wai
  • JavaScript:参数列表后缺少 )

    这个 JavaScript 产生一个错误 参数列表后缺少 在 firebug 中使用代码 我究竟做错了什么 功能d缺少左括号 answer after 不应该逃避 只需常规报价即可
  • 从 JavaScript 将参数传递给 p:remoteCommand

    我想将值传递给remoteCommand来自 JavaScript 如果这是可能的 我该如何做到这一点以及如何在支持 bean 中接收它们 对的 这是可能的 如何执行此操作取决于 PrimeFaces 版本 你可以在PrimeFaces 用
  • jquery:如何检查div中的所有单选按钮是否被选中

    我的 html 看起来像这样 div div
  • Backbone.js 与 Google 地图 - 有关此问题和侦听器的问题

    我有一个为 Google Maps v3 创建的模块 我正在尝试将其转换为 Backbone js 视图构造函数 到目前为止 这是我的视图模块 我将解释代码后遇到的问题 pg views CreateMap Backbone View ex
  • 使用 jQuery 的 javascript 关联数组长度

    我正在使用 javascript 关联数组 例如 var testarray testarray one 1 testarray two 2 testarray three 3 我也在旁边使用jquery 如何使用 jquery 或任何其他
  • Hydrate with RTK Query 确实会抛出错误

    我有一个非常简单的组件来显示来自本地 API 的数据 使用 Nextjs API 路由制作 我使用 RTK 查询来获取数据 const api createApi reducerPath data baseQuery fetchBaseQu
  • 设置股票数据 Highcharts xAxis 的格式

    我已经浏览了需要为 xAxis 属性设置的 Highcharts 选项来格式化时间标签 但没有运气了解这对于这种情况到底是如何工作的 我在白天 盘中 检索了股票的动态数据 我需要显示这些数据 因为检索的数据每天从 9 30 开始到 17 0
  • json、rails、javascript 中的解析错误

    我需要将 ruby 数组放入 javascript 数组中 但出现解析错误 var characters 这就是我将 ruby 嵌入到内联 javascript 中的方式 但它出现了解析错误 我应该如何将此 ruby 数组放入 javasc
  • 动态地将 .on() 方法与事件映射绑定

    我使用此语法来确保事件绑定动态添加li元素 ul list on click li function do something 我尝试使用这样的事件映射来存档相同的内容 ul list hammer css hacks false on s
  • 两个日期之间间隔 15 分钟 javascript

    问题 我需要将两个日期 时间戳之间的所有 15 分钟时隙 日期格式 2016 08 10 16 00 00 创建为 HH mm 格式的数组 其中分钟限制为 00 15 30 45 示例 中午 12 30 到下午 2 30 将 gt 12 3
  • React TypeError:x 不是函数

    我在子组件中从父组件调用函数 booksRefresh 但出现错误 类型错误 booksRefresh 不是函数 我不知道为什么 因为 booksRefresh 是一个函数 有人可以帮我解释为什么会出现这个错误吗 这是我的代码 import
  • 如何在 JavaScript 中从代理对构造 UTF-16 字符?

    以下计算 Unicode 代码点的 UTF 16 代理对 戴着医用口罩的脸 https emojipedia org face with medical mask 但是如何从代理对构造字符以在字符串中使用呢 const codepoint
  • 在 React JSX 中返回配对元素

    问题 在 React 中 您希望通过映射数组来创建 DOM 结构 但数组中的每个项目应返回 2 个元素 例如 import React from react import from lodash let Component React ex
  • 通过ajax执行后期操作时如何克服CORS重定向问题?

    我可以通过外部登录表单中的 post 方法类型提交表单来登录 roundcube 实例 托管在另一台服务器上 我收到此错误 通过 ajax 签名时 XMLHttpRequest 无法加载https 192 168 0 7 mail http

随机推荐

  • 环形包裹地图上一组点之间的“质心”,可最小化到所有点的平均距离

    edit 正如有人指出的那样 我正在寻找的实际上是最小化所有其他点之间的总测地距离的点 我的地图在地形上与 吃豆人 和 小行星 中的地图相似 越过顶部将使您扭曲到底部 越过左侧将使您扭曲到右侧 假设我在地图上有两个点 质量相同 我想找到它们
  • 开发面板中的本地化错误

    我购买了一个应用程序 尝试更新开发面板上的信息 当我尝试保存时收到以下错误 您的 1 个本地化内容有错误 它显示了错误位置 但我不知道问题是什么 如果您在选中媒体管理器中的复选框以使用新的 较大的屏幕尺寸屏幕截图之前没有删除较小 较旧尺寸的
  • Web.config保存问题

    我想通过 Web 应用程序的前端向用户公开一些 web config 设置 我可以毫无问题地检索设置 但是当我保存时 我要么收到错误 要么更改不会保留到 web config 文件中 我是在VS中调试的 如果我运行这个 private vo
  • 根据颜色图绘制条形图中的 y 值

    我已经在论坛上搜索过 发现this https stackoverflow com questions 42656585 barplot colored according a colormap 但我的问题有点不同 正如您从代码和下面的图像
  • 自定义 DataGridView 重复列

    我通过从 DataGridView 子类化创建了一个自定义 Winforms 控件 自定义 datagridview 定义自己的列和映射 但是 每当我将其从工具箱拖到窗体的设计图面上时 窗体都会为自定义控件中的每一列重新创建一个列控件 Da
  • Keras ML 库:梯度更新后如何进行权重裁剪? TensorFlow 后端

    我正在尝试使用 Keras 来实现需要权重裁剪的算法的一部分 即限制梯度更新后的权重值 到目前为止 我还没有通过网络搜索找到任何解决方案 作为背景 这与 WGAN 算法有关 https arxiv org pdf 1701 07875 pd
  • Spring Security OAuth 与 JWK 示例

    有人有一个带有 JWT 和非对称密钥的 Spring Security OAuth 2 资源服务器 SP 示例 该示例使用带有 JWKS 端点的 JWK 吗 多谢 散文 Spring Security OAuth 2 资源服务器可以配置为使
  • 什么会导致无法计算 UDP 数据报的 IP 标头校验和?

    我试图将 UDP 数据报从 Windows XP 上的 UdpClient 发送到设备 但它没有响应 当我在 Wireshark 中查看该流量时 我发现出站数据包很糟糕 因为它们的所有 IP 标头校验和都是 0x0000 该机器有两个网卡
  • 执行 kubeadm Reset 后 Kubernetes 无法为 pod 设置网络

    我用以下命令初始化了 Kuberneteskubeadm init 并且在我使用之后kubeadm reset重置它我发现 pod network cidr错了 更正后我尝试使用kubeadm像这样再次初始化 Kubernetes kube
  • Logstash 的 Django 日志记录格式

    我正在尝试将 django 应用程序配置为以 Logstash 易于使用的格式写入日志 受到 Node 的 Winston 日志记录包的启发 Logstash 需要一个 JSON 对象 其中包含键 message 和时间戳 timestam
  • 未找到“Mage_Googlecheckout_Helper_Data”类

    我们刚刚从 Magento 版本 1 8 0 0 升级到 1 8 1 0 现在当我们转到站点的配置部分时 我们会收到以下消息 Fatal error Class Mage Googlecheckout Helper Data not fou
  • 下沉 kafka 流时看不到消息,并且在 flink 1.2 中看不到打印消息

    我的目标是使用kafka读取json格式的字符串 对字符串进行过滤 然后将消息接收出来 仍然是json字符串格式 出于测试目的 我的输入字符串消息如下所示 a 1 b 2 我的实现代码是 def main args Array String
  • Django 静态文件无法正确加载

    我尝试使用静态文件设置我的项目 但似乎没有成功 我想要一个全局静态文件而不是应用程序内文件 所以我的 settings py 是 STATIC URL static STATICFILES DIRS os path join BASE DI
  • self.variableName 与 _variableName 与 @sysnthesize 变量名 [重复]

    这个问题在这里已经有答案了 可能的重复 可可 Objective C 类中变量前面的下划线如何工作 https stackoverflow com questions 822487 how does an underscore in fro
  • awk gsub 和神秘的“1”

    我认为这是一个更普遍的理解问题 但这是我的问题 如果我在终端中运行以下命令 awk gsub a H 1 在文件marks txt上 1 阿米特物理802 拉胡尔数学 903 夏姆生物学874 基达尔英语855 哈里历史 89 我得到以下结
  • 计算第 95 个百分位值?

    我正在尝试计算表列中的第 95 个百分位数 并使用TOP 95 PERCENT构造 我想知道以下方法是否正确 或者是否有更好的方法来做同样的事情 SELECT AVG Value FROM SELECT TOP 95 PERCENT WIT
  • 使用 Swift 获取字符串中子字符串的索引

    我习惯在 JavaScript 中这样做 var domains abcde substring 0 abcde indexOf cd Returns ab Swift没有这个功能 如何做类似的事情 编辑 更新 Xcode 11 4 Swi
  • 如何在 Vite 开发服务器中填充“process”Node 模块?

    在我的 Vite 项目中 我依赖于一个使用process节点在其功能之一中是全局的 我没有从我的代码中调用这个函数 但是Vite dev当我导入模块时 服务器仍然给我这个错误 Uncaught ReferenceError process
  • 如何使用 slick 3.2 + 在 select 子句中编写嵌套查询

    有没有办法使用 slick 3 2 创建嵌套选择 基本上我需要的所有内容都在这里描述如何在 select 子句中编写嵌套查询 https stackoverflow com questions 14920153 how to write n
  • 在 ES6 代码中扩展 EcmaScript 5 类

    我想在新项目中使用 EcmaScript 6 通过 Browserify 和 Babelify 但它依赖于用 ES5 编写的第三方库 问题是在我的项目中创建从库中的子类扩展的子类 E g Library written in ES5 fun