為什么在瀏覽器中打開index.html而不是通過節點服務器提供index.html時，“ this”有何不同？

Question

我有一個index.html文件，引用了一個javascript文件

<!DOCTYPE html>
<html lang="en">

<head>
    <title>asd</title>
    <meta charset="utf-8">
</head>

<body>
    <div id="app"></div>
    <script src="index.js"></script>
</body>

</html>

在我的index.js中

function init() {
    // always prints the window-object
    console.log("init this:", this);
}
var testFunc = () => {
    // this = {} when served
    // this = window when opened directly in browser
    console.log("testFunc this:", this);
}
// prints the window-object when opening index.html
// prints {} when using a server
console.log("this:", this);
init();
testFunc();

為什么直接在瀏覽器中打開index.html文件（：文件：URL ///index.html）使this在window -object所有的時間，同時與服務器（網址服務index.html文件： HTTP：/ / localhost：1234 / ）有時給我{} ，有時給我window ？

我期望testFunc()打印{} ，並且希望將window移到其他位置。 為什么不同？

注意：我使用包裹服務於我的申請。

Answer 1

在全局范圍內， this將始終引用全局對象。 在每個環境中，全局對象都是不同的。

有關更多信息： https : //developer.mozilla.org/en-US/docs/Glossary/Global_object

Answer 2

console.log("this:", this);

在全局執行上下文中， this引用全局對象。

init();

因為這不是在呼叫建立和代碼是不是在嚴格模式下， 初始化函數內將引用全局對象（在嚴格模式下，它會undefined值）。

testFunc();

由於testFunc是箭頭函數，它的這是從它的封閉的范圍，這是全球所以再次全局對象采納。

在瀏覽器中， window對象是全局對象的別名，並具有其他屬性（例如escape和unescape ）並實現window接口。

在控制台中顯示對象時，控制台如何選擇表示對象取決於實現。

Answer 3

this是在當前代碼執行環境中對全局對象的引用，因此通常每次都會有所不同是正常的。

為什么在瀏覽器中打開index.html而不是通過節點服務器提供index.html時，“ this”有何不同？

問題描述

3 個解決方案

解決方案1
1 2019-07-24 11:53:38

解決方案2
1 已采納 2019-07-24 12:13:29

解決方案3
0 2019-07-24 11:53:58

為什么在瀏覽器中打開index.html而不是通過節點服務器提供index.html時，“ this”有何不同？

問題描述

3 個解決方案

解決方案1 1 2019-07-24 11:53:38

解決方案2 1 已采納 2019-07-24 12:13:29

解決方案3 0 2019-07-24 11:53:58

解決方案1
1 2019-07-24 11:53:38

解決方案2
1 已采納 2019-07-24 12:13:29

解決方案3
0 2019-07-24 11:53:58