0

プロパティ初期化子を使用して、アロー関数をクラスのメソッドとして使用しようとしています。ただし、メソッドが宣言されるまでアクセスできません。それらが宣言されている順序を変更すると、機能します。

それは予想される動作ですか、それともバベル変換ですか

class SampleClass1 {
  method2 = this.method1();
  method1() {
    return "works";
  }
}

console.log((new SampleClass1()).method2); // Works

class SampleClass2 {
  method2 = this.method1();
  method1 = () => {
    return "works";
  }
}

console.log((new SampleClass2()).method2); // Error

次の URL は、デモンストレーションしたいコードを含む babel repl インスタンスです。参照してください。

https://babeljs.io/repl/#?evaluate=true&presets=es2015%2Creact%2Cstage-0%2Cstage-2&experimental=false&loose=false&spec=false&code=class%20SampleClass1%20%7B%0A%20%20method2%20% 3D%20this.method1()%3B%0A%20%20method1()%20%7B%0A%20%20%20%20return%20%22works%22%3B%0A%20%20%7D%0A% 7D%0A%0Aconsole.log(%22(new%20SampleClass1()).method2%22)%3B%0Aconsole.log((new%20SampleClass1()).method2)%3B%0A%0Aclass%20SampleClass2%20% 7B%0A%20%20method2%20%3D%20this.method1()%3B%0A%20%20method1%20%3D%20()%20%3D%3E%20%7B%0A%20%20% 20%20return%20%22works%22%3B%0A%20%20%7D%0A%7D%0A%0Aconsole.log(%22(new%20SampleClass2()).method2%22)%3B%0Aconsole.log ((new%20SampleClass2()).method2)%3B

4

2 に答える 2

0

別の方法で説明しようと思います。コンテキストは、Babel トランスパイルと ES2016 になります。

代入は変数を作成します。

InSampleClass2 method1は単なる変数であり、たまたまその値として関数を持っています。

class SampleClass2 {
  method2 = this.method1(); // variable
  method1 = () => {  // oops, variable because of assignment.
    return "works";
  }
}

コンストラクターはメソッドを含むオブジェクトを構築できず、2 つの変数しか取得できなかったと考えてください。

method1後で定義したので、method2未定義です。次に、未定義のものを呼び出そうとします。

それがエラーメッセージの理由です。

このように削除する()と：

class SampleClass2 {
  method2 = this.method1; // no longer an error
  method1 = () => {
    return "works";
  }
}

インスタンス化中にエラーは発生しませんSampleClass2。

なぜ最初のケースが機能したのですか？

class SampleClass1 {
  method2 = this.method1();
  method1() {
    return "works";
  }
}

これは基本的に、名前付きの関数method1をのプロトタイプに入れSampleClass1、新しいオブジェクトを構築するときmethod2に、メソッドの戻り値という名前の変数を割り当てることを言っています[sic] method1。

プロトタイプ関連のものを信じないでください。

次のコードを Babel で確認してください。

console.log(SampleClass1.prototype.method1) // function body
console.log(SampleClass2.prototype.method1) // nothing

何かを見逃したり、間違えたりした場合はお知らせください。それが役に立てば幸い。:)

于 2016-04-08T04:31:07.027 に答える