【问题标题】:Extending array fails in JavaScript ES6在 JavaScript ES6 中扩展数组失败
【发布时间】:2019-04-05 15:39:17
【问题描述】:

我在扩展 JS 数组时遇到了一些问题。这些是我的课程:

// ArrayList.js
export default class ArrayList extends Array {
  clear() {
    this.splice(0, this.length);
  }
}

// MyItem.js
export default class MyItem {
  constructor() {
    this._id = 0;
  }

  getID() {
    return this._id;
  }

  setID(value) {
    if (typeof value === 'number') {
      this._id = value;
    }
  }
}

// Test.js
import ArrayList from './ArrayList';
import MyItem from './MyItem';

let list = new ArrayList();

let item1 = new MyItem();
item1.setID(1);
list.push(item1);

let item2 = new MyItem();
item2.setID(2);
list.push(item2);

如果我现在执行:

list.forEach(function(item) {
  console.log(item.getID());
});

一切都很完美,但如果我尝试调用我的自定义方法,我会遇到错误:

list.clear();
console.log(list.length);

例外是:

TypeError: list.clear is not a function

+++更新+++

我将测试脚本与 node.js 一起使用:

node start.js

这是我的 start.js:

require('babel-register')({
    presets: [ 'env' ]
})
module.exports = require('./Test.js')

然后每个类都存储在一个单独的 JS 文件中。

【问题讨论】:

  • 你在哪里/如何打电话给clear()?经过快速尝试,我在浏览器和节点中都没有问题。
  • 基础类在这里可以正常工作jsfiddle.net/wx0ht86n
  • 你在使用 Babel 吗?扩展内置类不适用于 Babel。
  • 嗯,好的。但是我如何在没有 Babel 的情况下使用导入?我读到这是必要的?
  • @altralaser:您只能启用您需要的功能,例如模块转换。 preset-env 只会启用目标环境不支持的功能。 babeljs.io/docs/en/babel-preset-env

标签: javascript node.js ecmascript-6


【解决方案1】:

我不喜欢你的进出口。尝试模块 (https://nodejs.org/api/modules.html),这应该可以在 Node 中没有 Babel 的情况下工作。

module.exports =  class MyItem {
   // class content 
}

module.exports =  class ArrayList extends Array {
    clear() {
        this.splice(0, this.length);
    }
}

// in the test file
const ArrayList = require('./ArrayList');
const MyItem = require('./MyItem');


【讨论】:

  • 您的解决方案有效,因此我接受了它,但它与导入用例不完全匹配。
  • 如果你想使用导入,就像在你的示例代码中一样,你必须正确设置 babel。在这里robinwieruch.de/minimal-node-js-babel-setup 你可以找到如何做到这一点的好例子。
  • 但是您写道,使用 Babel(我已经配置)不允许您继承任何内置类。这似乎是典型的先有鸡还是先有蛋的因果困境。我怀疑这个问题只能通过选择上面发布的代码或为数组构建一个包装类来解决。
  • 我明白你的意思。如果你想在“array”类中添加新方法,也许你可以像这里一样扩展这个类的原型 - stackoverflow.com/questions/948358/…。在我看来,更好的方法是创建一些 utils 方法。清除数组中的数据,方法可以得到数组,参数end返回清除的数组。
猜你喜欢
  • 2019-11-18
  • 2018-02-26
  • 2016-02-26
  • 1970-01-01
  • 2016-11-22
相关资源
最近更新 更多