关于javascript:理解JavaScript中的window对象

前言

每个 JavaScript 环境都有一个全局对象（global object）。在全局范畴内创立的任何变量实际上都是这个对象的属性，而任何函数都是它的办法。在浏览器环境中，全局对象是 window 对象，它代表了蕴含网页的浏览器窗口。

在这篇文章中，咱们将介绍 Window 对象的一些重要用处：

• 浏览器对象模型（Browser Object Model）
• 获取浏览器信息
• 获取并应用浏览器 history 对象
• 创立并管制浏览器窗口
• 获取屏幕尺寸以及显示细节

浏览器对象模型

浏览器对象模型（简称 BOM）是一个属性和办法的汇合，蕴含了对于浏览器和计算机屏幕的信息。比如说，咱们能够找出哪个浏览器正在被用来浏览一个页面，只管这种方法不牢靠。咱们还能够找出它被浏览的屏幕尺寸，以及在以后页面之前曾经拜访过哪些页面。它还能够用于创立弹出式窗口这种相当可疑的做法，如果你喜爱惹恼你的用户的话。

BOM 没有官网的规范，只管所有支流浏览器都反对许多属性和办法，但这曾经成为了一种事实上的规范。这些属性和办法是通过 window 对象提供的，每一个浏览器窗口，tab 页，弹窗，frame 以及 iframe 都具备 window 对象。

浏览器环境

请记住，JavaScript 能够在不同的环境上运行。BOM 只在浏览器环境中有意义。这意味着其余环境可能没有 window 对象，只管他们仍有全局对象。比如说，Node.js 领有一个称为 global 的对象。

如果你不晓得全局对象的名称，你能够在全局作用域中应用关键字 this 来援用全局对象。上面的代码提供了一种将变量 global 赋值给全局对象的快捷方式：

const global = this;

深刻全局变量

全局变量是不应用 const、let 或var关键字创立的变量。全局变量能够在整个程序中进行拜访。

全局变量是全局对象的属性。在浏览器环境中，全局对象就是 window 对象。这意味着任何创立的全局变量都是 window 对象的属性，能够从如下示例中看出：

x = 6;  // 创立的全局变量
>> 6
window.x // 同一个变量能够作为 window 对象的一个属性被拜访
>> 6
// window.x === x
>> true

通常状况下，你应该在不应用 window 对象的状况下援用全局变量。这样能够缩小字符输出，并且你的代码在不同的环境中也更容易移植。如果你须要查看一个全局变量是否曾经被定义，则是一个例外。比如说，如果 x 没有被定义，上面的代码将会抛出 ReferenceError 谬误：

if (x) {// do something}

然而，如果变量作为 window 对象的属性进行拜访，那么代码依然能够失常运行，window.x会间接返回false，意味着代码块将不会被执行：

if (window.x) {// do something}

有些函数比如说 parseInt() 和isNaN()，就是全局对象的办法。在浏览器环境中，它们就是 window 对象的办法。与变量一样，习惯上省略通过 window 对象而间接拜访它们。

对话框

在浏览器中，有三个函数用来生成对话框：alert()，confirm()以及 prompt()。这些都不是 ECMAScript 规范的一部分，只管所有支流浏览器都反对它们作为window 对象的办法。

Alert Dialog

window.alert()会暂停程序的执行，并在对话框中显示音讯。音讯被作为参数提供给办法，办法总是返回undefined：

window.alert('Hello');
>> undefined

Confirm dialog

window.confirm()办法会进行程序的执行，并显示一个确认对话框。展现作为参数提供的信息，并给出确定或勾销的选项。如果用户点击确定，则返回布尔值true，如果用户点击勾销，则返回布尔值false：

window.confirm('Do you wish to continue?');
>> undefined

Prompt dialog

window.prompt() 办法会进行程序的执行，并显示一个对话框。展现作为参数提供的信息，以及一个容许用户输出文本的输出字段。当用户点击确定时，该文本会作为字符串进行返回。如果用户点击勾销时，将会返回null：

window.prompt('Please enter your name:');

审慎应用原生对话框

值得再次强调的是，这些办法会在程序执行过程中让程序进行执行。这意味着在办法被调用的时刻，所有都将进行解决，直到用户点击确认或者勾销。如果程序须要同时解决其余货色，或者程序在期待回调函数，那么这种形式就会造成问题。

在一些场合，这种性能因具备一些劣势从而能够应用。比如说，window.confirm()对话框能够被用来当做最终确认，检查用户是否想要删除资源。这将阻止程序持续进行并阻止删除资源，直到用户来决定如何解决。

还值得注意的是，大多数浏览器容许用户禁用任意反复呈现的对话框，这意味着该性能是不牢靠的。

浏览器信息

window对象有一系列的属性和办法，这些属性和办法提供了无关用户浏览器的信息。

Navigator 对象

window对象有一个属性叫做 navigator，该属性返回Navigator 对象的援用。Navigator对象蕴含无关正在应用的浏览器的信息。下面的 userAgent 属性将会返回无关正在应用的浏览器和操作系统的信息。比如说，如果运行上面的代码，它将显示我正在应用 Mac OS 上的 Safari 10 版本：

window.navigator.userAgent
>>"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/602.4.8 (KHTML, like Gecko) Version/10.0.3 Safari/602.4.8"

不过，不要依赖这些信息，因为用户能够批改这些信息，从而伪装成其余浏览器。对返回的字符串也很难有任何意义，因为在某种程度上，所有的浏览器都会伪装成其余浏览器。

比如说，每个浏览器都会在其本身的 userAgent 属性上蕴含 Mozilla 字符串，因为遗留的 Netscape 兼容性的起因。userAgent曾经从官网规范中废除，然而它依然在所有支流浏览器中失去很好的反对。

URL

window.location是一个对象，该对象蕴含无关以后页面 URL 的信息。它蕴含一些属性，提供对于 URL 的不同片段的信息。

href属性将残缺的 URL 作为字符串进行返回：

window.location.href
>> "<https://www.sitepoint.com/javascript-window-object/>"

该属性（以及本节其余大多数属性）是可读 / 可写属性，这意味着能够通过赋值被更改。如果实现赋值操作，以后页面将会应用新的属性值进行从新加载。比如说，输出上面的代码到浏览器的控制台中，浏览器将会重定向到指定页面：

window.location.href = '<https://www.sitepoint.com/>'
>> "<https://www.sitepoint.com/>"

protocol属性返回一个形容所应用的协定（比方 http, https, pop2, ftp 等等）的字符串。留神字符串的开端有冒号：

window.location.protocol
>> "https:"

host属性返回一个形容以后 URL 的域名以及端口号的字符串。如果应用的默认端口号 80，那么端口号通常会被省略：

window.location.host
>> "www.sitepoint.com"

hostname属性返回一个形容以后 URL 域名的字符串：

window.location.hostname
>> "www.sitepoint.com"

port属性返回一个形容端口号的字符串，如果端口没有显式地在 URL 中申明，它将返回空字符串：

window.location.port
>> ""

pathname属性返回域名前面的门路字符串：

window.location.pathname
>> "/javascript-window-object/"

search属性返回一个以 ”?” 结尾的字符串，前面是查问字符串参数。如果没有查问字符串参数，将会返回空字符串：

window.location.search
>> ""

hash属性返回一个以 ”#” 结尾的字符串，前面是片段标识符。如果没有片段标识符，将返回空字符串：

window.location.hash
>> ""

origin属性返回一个字符串，展现以后页面起源的协定和域名。这个属性是只读的，所以不能被扭转：

window.location.origin
>> "<https://www.sitepoint.com>"

window.location还具备以下办法：

• reload()办法能够用来强制从新加载以后页面。如果传递参数true，会强制浏览器从服务端从新加载页面，而不是应用缓存的页面。

• assign()办法能够用来从参数提供的 URL 中加载另一个资源。比如说：

  window.location.assign('<https://www.sitepoint.com/>')

• replace()办法与 assign() 办法作用简直雷同，除了以后页面不会存储于浏览器历史记录中。所以用户不能应用返回按钮进行返回。

• toString()办法返回一个蕴含整个 URL 的字符串：

  window.location.toString();
  >> "<https://www.sitepoint.com/javascript/>"

浏览器历史

window.history属性可用于拜访以后浏览器会话中任何先前拜访过的页面的信息。防止将其与新的 HTML5 History API 混同。

window.history.length 属性显示在达到以后页面之前曾经拜访了多少个页面。

window.history.go()办法能够用于跳转至指定页面，0 示意跳转至以后页面：

window.history.go(1); // 后退一个页面
window.history.go(0); // 从新加载以后页面
window.history.go(-1); // 后退一个页面

还有 window.history.forward() 以及window.history.back() 办法，可别离用于后退或后退一个页面，就如同应用了浏览器的后退和后退按钮。

管制窗口

能够应用 window.open() 办法关上一个新的窗口。该办法接管将要关上的页面 URL 作为第一个参数，窗口的题目作为第二个参数，以及一系列属性作为第三个参数。这也能够赋值给一个变量，这样窗口就能够在当前的代码中被援用：

const popup = window.open('<https://sitepoint.com>','SitePoint','width=700,height=700,resizable=yes');

close()办法可用于敞开一个窗口，假如你有一个窗口援用：

popup.close();

也能够应用 window.moveTo() 办法挪动窗口。该办法接管两个参数，别离是窗口要挪动到的屏幕的 X 轴和 Y 轴坐标：

window.moveTo(0,0); 
// 挪动窗口到屏幕的左上角

你能够应用 window.resizeTo() 办法来调整窗口大小。该办法接管两个参数，用来指定调整后的窗口尺寸的宽度和高度：

window.resizeTo(600,400);

烦人的弹框

这些办法在很大水平上负责给 JavaScript 一个坏名声，因为它们被用来创立烦人的弹出式窗口，这些窗口通常蕴含侵入性的广告。从可用性的角度来看，调整或移动用户窗口的大小也是一个坏主意。

许多浏览器阻止弹出式窗口，并在某些状况下不容许调用其中的一些办法。例如，如果有一个以上的标签关上，你就不能调整一个窗口的大小。你也不能挪动或调整一个不是用 window.open() 创立的窗口的大小。

尽量少的应用这些办法是理智的，所以在应用它们之前要认真思考。简直总是会有一个更好的代替计划，而一个优良程序员会致力找到它。

屏幕信息

window.screen对象蕴含了对于浏览器所显示的屏幕的信息。你能够别离应用 height 和width属性找出屏幕的高度和宽度，单位为像素：

window.screen.height
>> 1024
window.screen.width
>> 1280

availHeight和 availWidth 可用于查找屏幕的高度和宽度，其中不包含任何操作系统的菜单：

window.screen.availWidth
>> 1280
window.screen.availHeight
>> 995

colorDepth属性可用于查找用户显示器的色彩位深度，只管除了收集用户统计数据外，很少有这样做的用例：

window.screen.colorDepth;
>> 24

更实用于挪动平台

屏幕对象对挪动设施有更多的用处。它还容许你做一些事件，如敞开设施的屏幕，检测其方向的变动或将其锁定在一个特定的方向。

审慎应用

上一节中所波及的许多办法和属性在过来被滥用于可疑的流动，如用户代理嗅探，或检测屏幕尺寸以决定是否显示某些元素。这些做法当初曾经被更好的做法所取代了，比方媒体查问和特色检测。

文档对象

每个 window 对象蕴含一个 document 对象。该对象有一系列的属性和办法，用来解决曾经加载到窗口的页面。document对象蕴含一些值得关注的办法。

document.write()

write() 办法只是将一串文本写到页面上。如果页面曾经加载，它将彻底替换以后文档：

document.write('Hello, world!');

这将用字符串 Hello, world! 替换整个文档。能够在字符串中蕴含 HTML，这将成为 DOM 树的一部分。例如，上面这段代码将创立一个 <h1> 标签节点和一个文本子节点：

document.write('<h1>Hello, world!</h1>');

document.write()办法也能够在文档中的 <script> 标签内应用，用于将字符串注入到标记中。这不会笼罩页面上的其余 HTML。上面的例子将把文本 "Hello, world!"放在 <h1> 标签内，页面的其余局部将失常显示：

<h1>
    <script>document.write("Hello, world!")</script>
</h1>

document.write()的应用是十分不受欢迎的，因为它只能通过在 HTML 文档中混合 JavaScript 来进行应用。依然有一些极其常见的非法用处，但一个杰出的程序员简直不须要应用它。

总结

以上就是无关 window 对象的所有次要内容，感激你的浏览。如果让你学到了常识，欢送点赞珍藏转发~