JavaScript中Window与window的区别解析

JavaScript中Window与window的区别解析

首先查看源代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>深入理解Javascript</title>
<script type="text/javascript" charset="utf-8">
console.log(this);
</script>
</head>
<body>
<h1>深入理解Javascript</h1>
</body>
</html>

通过浏览器打开该页面后，<script>标签内的脚本代码会被执行。

接下来，我们分析 console.log(this); 语句中 this 关键字的具体指向。

在Google Chrome浏览器中，控制台输出结果如下：

在Mozilla Firefox浏览器中，控制台输出结果如下：

从输出结果可以看出，两者都输出了Window。那么，这个Window与window是否相等呢？

为了进一步验证，我们进行以下测试。

<script type="text/javascript" charset="utf-8">
console.log(this);
console.log('this == window ? ', this == window);
</script>

运行上述代码，控制台输出 this == window ? true。这表明 Window 等于 window，但事实真的如此吗？

为了厘清它们之间的关系，我们继续进行更深入的测试。

<script type="text/javascript" charset="utf-8">
console.log('this = ', this);
console.log('this == window ?', this == window);
console.log('window = ', window);
console.log('Window = ', Window)
console.log('Window == window ?', Window == window)
</script>

观察浏览器的输出结果：

Google Chrome 浏览器输出：

Mozilla Firefox 浏览器输出：

根据输出结果，我们可以得出以下结论：

this 指向 Window 对象；
this 也等于 window 对象；
window 也是指向 Window 对象；
Window 是指向 Window{}，这是浏览器提供的对象；
Window 不等于 window；

为什么会出现这种情况呢？

我们在浏览器控制台中查看 Window 对象的结构；

原来，Window 对象包含了一些由浏览器厂商实现的 API，例如 HTML5 规范中的 sessionStorage； 它还有一个 window 属性，该属性的值指向 Window 对象； 我的理解是：Window 对象是为浏览器厂商服务的，我们不能直接操作 Window 对象的属性，但 Window 新增的 API 会反映到 window 对象中； 我们操作 window 的属性也会反映到 Window 对象中。 例如，定义一个全局变量 window.a = 'aaa';

JavaScript 的所有对象都存在于一个运行环境之中，这个运行环境本身也是一个对象，称为“顶层对象”。这意味着 JavaScript 的所有对象都是“顶层对象”的下属。不同的运行环境有不同的“顶层对象”，在浏览器环境中，这个顶层对象就是 window 对象。

所有浏览器环境的全局变量，都是 window 对象的属性。

可以将 window 理解为 JavaScriptContext 上下文环境。