1

次のようなデフォルトパラメータを持つES6クラスがあります。

constructor({
    // defaults
    defaultOne     = 'default value one',
    defaultTwo     = ['default','value','two],
    defaultThree   = 'default value three,
}) {
    this.defaultOne   = defaultOne
    this.defaultTwo   = defaultTwo
    this.defaultThree = defaultThree

    return this
}

クラスのインスタンスを作成すると、値を指定すると期待どおりに機能します。 

new Class({defaultOne: 'one',defaultTwo: ['t','w','o'], defaultThree: 'three'})

しかし、値のないインスタンスをインスタンス化すると:

new Class()

未定義のエラーがスローされます。このアプローチは、標準の関数宣言/式でうまく機能するようです。ここで何が欠けているのか分かりますか?

これについて何か助けてくれてありがとう。

4

2 に答える 2

4

少し醜いことに同意しますが、これはbabelがこれを次のようにトランスパイルするために発生します。

constructor(_ref) {
  var _defaultOne = _ref.defaultOne; // « this is where it goes wrong. _ref = undefined
}

オブジェクト プロパティの既定値を設定していますが、オブジェクト自体の既定値ではありません。したがって、これは修正可能です。babel がこれをやってくれたらいいのですが、そうではありません。

これを修正するには、次の代わりに引数オブジェクトのデフォルトを指定します。

// es6
const foo = ({ bar = 'baz' }) => {};

// transpiled
var foo = function foo(_ref) {
  var _ref$bar = _ref.bar;
  var bar = _ref$bar === undefined ? 'baz' : _ref$bar;
};

あなたは書く必要があります

// es6
const foo = ({ bar = 'baz'} = {}) => {};

// transpiled
var foo = function foo() {
  var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];

  var _ref$bar = _ref.bar;
  var bar = _ref$bar === undefined ? 'baz' : _ref$bar;
};

完全にするには、あなたの例は次のようになります。

constructor({
  // defaults
  defaultOne     = 'default value one',
  defaultTwo     = ['default','value','two'],
  defaultThree   = 'default value three',
} = {}) { // « notice the change on this line
  this.defaultOne   = defaultOne
  this.defaultTwo   = defaultTwo
  this.defaultThree = defaultThree
}

new Class({defaultOne: 'one',defaultTwo: ['t','w','o'], defaultThree: 'three'})
new Class()
于 2016-08-02T09:47:35.707 に答える
0

仕様ではクラスの引数を直接分解できないようですが、このソリューションは非常によく似た構文を提供します。

class Test {
    constructor(options) {
      let {
        defaultOne   : defaultOne   = 'default one value', 
        defaultTwo   : defaultTwo   = 'default two value', 
        defaultThree : defaultThree = 'default three value'
      } = (options) ? options:{};

      this.defaultOne   = defaultOne;
      this.defaultTwo   = defaultTwo;
      this.defaultThree = defaultThree;

      this.init();
    }

  init() {
    console.log(this.defaultOne);
    console.log(this.defaultTwo);
    console.log(this.defaultThree);
  }
}

new Test({defaultOne: 'Override default one value'});
new Test();

ES6 バベルテスト

コンパイル済み Babel ES5

于 2016-05-23T03:33:34.400 に答える