「this」がES6の矢印機能で機能しないのはなぜですか？

Question

は、ここに私のコードです：

'use strict'; 

let obj = { 
    username : 'Hans Gruber', 
    hello:() => 'hello, ' + this.username 
}; 
console.log(obj.hello()); 

しかし、出力は次のようになります。hello, undefined。

出力がhello, Hans Gruberであると予想します。

私は矢印機能でthisを理解していないと思いますか？誰が私に明確な外見を与えることができますか？

Answer 1

矢印関数は、関数が作成されたときに作成されたクロージャーにthisのバインディングを保存します。したがって、関数の呼び出しのコンテキストにはthisは設定されません。あなたのケースでは

、thisはあなたがオブジェクトを作成したときwindowに結合するので、this.usernameはwindow.username、ないobj.usernameですました。 documentationから

：（また脂肪矢印機能として知られている）

矢印関数式は、関数式に比べて短い構文を持っており、は字句this値

Answer 2

矢印をバインド関数は、それが定義されたレキシカルスコープを保持します。したがって、hello関数のthisは、その関数が定義されているときはthisと同じであり、プロパティであるオブジェクトではありません。それはあなたが望むものを、本質的にES5の

function() { 
    return 'hello, ' + this.username; 
}.bind(this); 

の省略形であること

let obj = { 
    username: 'Hans Gruber', 
    hello() {return `hello, ${this.username}`;} 
};