3

以下のようにコールバック関数をメソッドとして定義すると、thisは呼び出し元を指してしまいます。

オブジェクトを指すには、私が知っている知識だと以下の2つが考えられます。
・bind(this)を用いる
・setTimeoutのコールバック関数をアロー関数で囲む

毎回、thisが何を指すのか意識して使うより、常にオブジェクトを指してくれると楽だなと思います。

そこでお聞きしたいのは、コールバック関数でthisがオブジェクトを指してほしいときはどう書くのが適切でしょうか。

class App {
  constructor() {
    this.value = 'hello';
  }
  greet() {
    setTimeout(this.callback, 10);
  }
  callback() {
    console.log(this.value); // #=>thisはTimeoutを指すためundefined
  }
}

let app = new App;
app.greet();

2 件の回答 2

4

私も毎回bind(this)するのは嫌だと思い、以前調べたことがあります。

"babel-plugin-transform-class-properties"を使えば、
以下のboundFunctionように関数を定義でき、
常にthisをインスタンスにバインドできるようです。

class Bork {
  //Property initializer syntax
  instanceProperty = "bork";
  boundFunction = () => {
    return this.instanceProperty;
  }
}

以下の記事で存在を知りました。

https://medium.com/@jacobworrel/babels-transform-class-properties-plugin-how-it-works-and-what-it-means-for-your-react-apps-6983539ffc22

1
  • すみません。 ncaq さんの回答とかぶりました。
    – user28902
    Commented 2018年6月17日 13:14
2

質問に書かれている2つの方法以外では

  1. コンストラクタにbindを書いてメソッドを再定義
  2. Babelを使ってメソッドをプロパティとして定義 https://babeljs.io/docs/en/babel-plugin-transform-class-properties/

する方法があります.

私は2の方法を使っています.
すでにstage 3なので次の標準になる可能性が高く,記述が簡潔なためです.

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。