44828


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

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

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

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

[code]

    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();
    
[/code]


CC BY-SA 4.0
2018-06-17T12:45:20.080
44827
2018-06-17T13:13:21.097
27100
question
javascript
javascript ES6でのメソッド定義でのthisについて


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

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

する方法があります.

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


CC BY-SA 4.0
2018-06-17T13:09:36.920
44828
2018-06-17T13:09:36.920
12216
44827
answer


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

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

[code]

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

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

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


CC BY-SA 4.0
2018-06-17T13:13:21.097
44829
2018-06-17T13:13:21.097
44827
answer