0

以下のコードで Array オブジェクトをサブクラス化しようとしています。ブラウザでコードを実行すると、正常に動作します。ただし、このコードを .js ファイルに配置し、そのファイルを<script>タグでインクルードすると、.add()メソッドは未定義になります。

class Collection extends Array {
  constructor(data) {
    super(...data);
  }

  add(model) {
    this.push(model);
  }

}

const coll = new Collection(['item1', 'item2']);

console.log(coll);      // -> ['item1', 'item2']
console.log(coll.add);  // -> undefined

ページをロードすると、.add()未定義です。しかし、まったく同じコードをコンソールにコピーして貼り付けると、機能します。

どうしたの？

更新 トランスパイルに Babel.js (v6.x) も使用していますが、Fuechter が回答で説明しているように、これが問題であることが判明しました。

4

1 に答える 1

1

修理：

class Collection extends Array {
  constructor(data) {
    super(...data);
    this.add = function(model) {
      this.push(model);
    }
  }
}

どうして：

ネイティブ クラスの拡張は、Babel ではサポートされていません。バージョン 5.2.17 で削除されました (このコミットを参照)

適切に機能していなかったため削除されました。バグを参照してください: https://phabricator.babeljs.io/T1424

シミュレートできる機能ではないため、追加される可能性はほとんどありません。ブラウザーでのネイティブ サポートを待つ必要があります (実験モードで既にサポートされているものもあります)。これは、現在、ブラウザによって動作が異なることも意味します。

参考：リンク

于 2016-09-07T18:10:24.077 に答える