javascript：「this」的值在調試器和實際結果之間有所不同

在僅客戶端應用程序中，我使用腳本標記一個接一個地加載兩個js文件，並獲取以下注釋中顯示的錯誤：javascript：「this」的值在調試器和實際結果之間有所不同

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

世界爲什麼會發生？爲什麼devtools調試器和瀏覽器中的實際結果之間的'this'值有所不同？

編輯：

請參閱下面的怎麼樣，當我在同時由debugger斷點被暫停控制檯執行console.log(this)自己的screentshot，「這個」是對象（），以及下一個步（相信我，它只是下一步），窗口對象正在打印到控制檯。

來源

2016-04-01 Kludge

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this – Creynders

請附上此行的截圖：'調試器; //在devtools中，'this'的值是obj，如預期的那樣。爲什麼我的devtool顯示'this'是'window'對象？ – stanleyxu2005

@ stanleyxu2005 IDK，我能夠在OS X上的linux mint和chrome canary（51）上進行Chrome測試版（50）的重新生成。您正在測試哪種瀏覽器版本/操作系統？ –

的this在箭頭函數的值是隱含在創建點的約束。不管this是在創建函數的上下文中，當函數被調用時將是值this。

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

基本上等同於

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

來源

2016-04-01 16:14:34 Pointy

所以箭頭函數不等同於「常規」函數？ – Kludge

@Kludge在這方面，沒有。它們就像'.bind（）'返回的函數。 – Pointy

那麼爲什麼devtools和實際結果之間的值不匹配？ – Kludge

javascript：「this」的值在調試器和實際結果之間有所不同

回答

相關問題