javascript: 'this' değeri hata ayıklayıcı ile gerçek sonuç arasında farklı

Question

Sadece istemci tarafında bir uygulamada, birbiri ardına komut dosyası içeren iki js dosyası yüklüyorum ve aşağıdaki yorumlarda görüldüğü gibi hatalar alıyorum:

obj.js

'use strict'; 

let obj = {}; 

obj.func1 =() => { 
    return 'stuff'; 
} 

obj.func2 = (arr) => { 
    debugger; // in devtools, value of 'this' is obj, as expected 
    console.log(this); // clicking 'next' button in devtools, 
        // the object that is actually being printed to 
        // console is the window object!!! 
        // javascript, wtf?!?! 
    debugger; 

    let myStuff = this.func1(); // fails because window has no 'func1' property 

    ... 
    ... 
} 

window.obj = obj; 

script.js

'use strict'; 

obj.func2() 
// Uncaught TypeError: this.func1 is not a function 

Neden dünyada zaman olur

? Neden devtools debugger ile tarayıcıdaki gerçek sonuç arasında 'this' değerinde bir fark var?

Düzenleme:

Ben debugger kırılma noktası tarafından duraklatılmasına ederken konsolunda kendim console.log(this) yürütme olduğumda nasıl aşağıya screentshot See, 'bu' Object() ve bir sonraki adımdır (tam olarak bir adım ileride olduğuna inanıyorum), pencere nesnesi konsola yazdırılıyor.

Answer 1

ok işlevinde this değeri dolaylı oluşturulması noktasında bağlanır. İşlev çağrıldığında, this işlevi, oluşturulduğu bağlamda this değeri olacaktır.

obj.func2 = (arr) => { 
    // ... 
}; 

için temelde eşdeğer

obj.func2 = function(arr) { 
    // ... 
}.bind(this);