JavaScript - これは矢印機能付きタイムアウトの内部

Question

setTimeoutの中のthisが、矢印機能を使用するときにレンダリング機能を呼び出すオブジェクトと同じではないのはなぜですか？

class X { 
     constructor(config) { 
     this.data = config.data; 
     this.render_ = config.render; 
     } 
     render() { 
     this.render_(this.data); 
     } 
    } 
    var x = new X({ 
     data: [1, 2, 3], 
     render: (data) => { 
     setTimeout(() => { 
      console.log(this); 
     }, 200); 
     } 
    }); 
    x.render(); 

Answer 1

言うarrow function documentationの部分を読むには、要約で

「アロー関数はメソッドとして使用」：関数は単にthisまたはthisの独自のバージョンを結合しない矢印ではなく、グローバルウィンドウを参照オブジェクト。

Answer 2

arrow functionsは、です。字句的にはです。つまり、彼らは宣言の時点で "this"の価値を引き受けます。これらは、bind,applyおよびcallなどのメソッドまたは関数として呼び出されるなど、thisの値を変更する他の手段の影響を受けません。それはまだwindowを参照するように、矢印機能が作成された時点で

function F() { 
 
    this.type = 'F'; 
 
    this.logTypeExpression = function() { 
 
    console.log(this.type); 
 
    }; 
 
    this.logTypeArrow =() => { 
 
    console.log(this.type); 
 
    }; 
 
} 
 

 
function G() { 
 
    this.type = 'G'; 
 
} 
 

 
var f = new F(); 
 
var g = new G(); 
 

 
f.logTypeExpression(); // F 
 
f.logTypeArrow(); // F 
 

 
// Now lets give these functions to G 
 
g.logTypeExpression = f.logTypeExpression; 
 
g.logTypeArrow = f.logTypeArrow; 
 

 
g.logTypeExpression(); // G 
 
g.logTypeArrow(); // F(!) (That's because `this` was assigned by the arrow function)

Answer 3

、thisは、任意のオブジェクトにバインドされていません。その具体的なインスタンスを参照したい場合は、console.log(x);を試してみてください。

Answer 4

以下のコードは、オブジェクトリテラル構文を使用して作成した関数への参照のみを保持しています。 バインドを使用して

this.render_ = config.render; 

は（この）はあなたのXオブジェクトのインスタンス内の関数を呼び出すときに、この基準として、パラメータオブジェクトを使用する関数を教えてくれます。

class X { 
    constructor(config) { 
     this.data = config.data; 
     this.render_ = config.render.bind(this); 
    } 
    render() { 
     this.render_(this.data); 
    } 
} 

また、コードスニペットの矢印機能か正規表現かどうかは関係ありません。