JavaScript系列 — window和this的区别

前言

前端开发过程中，经常用到window、this，还有Window，这三个老是搞不清楚，这里作一下记录（菜鸡的挣扎~）。参考文章 JavaScript之this和window

window 对象

所有浏览器都支持 window 对象。它代表浏览器的窗口。所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。

另外，（HTML DOM 的）document 对象也是 window 对象属性。平常用到的location也是window的子对象

值得注意的是：要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写 document，而不必写 window.document。同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 window.alert()。

甚至window包含自己（window.window），我们平时用的window就是这个

windoe.localstorage
复制代码

document 页面

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问

history 历史记录

History 对象包含用户(在浏览器窗口中)访问过的 URL。

• history.back() 加载历史列表中的前一个 URL（如果存在）。
• history.forward() 加载历史列表中的下一个 URL。
• history.go(0):可以刷新当前网页

location 地址url

Location 对象包含有关当前 URL(统一资源定位符) 的信息。（Uniform Resource Location），可通过 window.location 属性来访问。常见的一个操作是：

• location.href 返回完整的 URL。
• location.assgin() 使窗口载入并显示指定URL中的文档，保留浏览历史；

navigator 浏览器信息

• navigator.appName 返回浏览器的名称。
• navigator.platform 返回运行浏览器的操作系统平台。

screen 屏幕

Screen 对象包含有关客户端显示屏幕的信息。

• screen.height 返回显示屏幕的高度。 width 返回显示器屏幕的宽度。
• screen.availHeight 显示屏幕的可用高度 (除 Windows 任务栏之外)。
• screen.availWidth 显示屏幕的可用宽度 (除 Windows 任务栏之外)

以上只列举了其中一些属性/方法，详细见 JavaScript 参考手册

window 和 Window 的区别

对window、Window二者一直搞不清楚，在网上搜了一下，大概有点思路：

我们先在控制台输出这两者：

可以看到：

• Window是一个函数，我理解其为一个浏览器自带的构造函数
• windo是一个对象，是构造函数Window创建出来的一个实例对象

验证一下：

其余的history和History、document和Document、location和Location等等也都是这样的关系，即后者是前者对应的构造函数，前者是后者构造出来的实例对象。前者的属性/方法来源于后者的prototype对象里面。