オブジェクト内のこの内側矢印関数の値

Question

thisと矢印関数の関係を理解し​​ていると思っていましたが、以下のスニペットは私の理解に疑問を投げかけています。

let person = { 
    name: 'Jim', 
    sayName:() => { 
    console.log(this.name); 
    } 
}; 

person.sayName(); 

私は矢印関数が囲むコンテキストの値thisを取得することを理解しています。私はthisがオブジェクトになると予想していましたが、代わりにWindowです。

なぜこのような場合に誰かが私に理解を助けることができますか？

Answer 1

矢印関数の理解はほとんど正しいです：矢印関数は字句がthisであり、矢印関数内のその値は周囲のスコープによって決まります。

thisは、personオブジェクトリテラル内で異なる値を取得すると考えられます。 This is not the case。

それでは、thisは、あなたの（グローバル）スコープで何を参照するか見てみましょう：sayNameに割り当てられた矢印機能が作成されたとき

console.log(this === window); // true 
 

 
let person = { 
 
    name: 'Jim', 
 
    test: console.log(this === window), // true 
 
    sayName:() => { 
 
    console.log(this === window); // true 
 
    } 
 
}; 
 

 
person.sayName();

あなたが見ることができるように、thisはを参照しますwindowオブジェクトです。

Answer 2

TLDR;それの

考えるこの方法、あなたは、矢印関数のthisはその対応に比べて、より外側のスコープthisになると思い出すことができることから、「私は非矢印機能を使用した場合、thisを何でしょう」。

例

let arrow = { 
 
    test:() => { 
 
    console.log('arrow: this === window...', this === window); 
 
    } 
 
}; 
 

 
let nonarrow = { 
 
    test: function() { 
 
    console.log('non-arrow: this === window...', this === window); 
 
    } 
 
}; 
 

 
arrow.test() 
 
nonarrow.test();

Answer 3

"この" のない結合はので、ここではありませんあなたが試したものの作業バージョンです：

let person = { 
    name: 'Jimmy the Greek', 
    sayName: (obj) => { 
    console.log(obj.name); 
    } 
}; 

person.sayName(person); 

読みよりMozilla DEVにあります。