Skip to content
全栈开发

Javascript中的全局对象

完整的JavaScript包含三部分：ECMAscript、浏览器对象模型和文档对象模型。

浏览器对象模型 BOM

由于网页是在浏览器中运行的，因此 JavaScript 提供了一系列对象以便同浏览器窗口进行交互。这些对象有 window、navigator、location、document、screen 和 history 等，这些对象通称为浏览器对象模型（Browser Object Model），简称 BOM。

BOM 提供了独立于页面内容而与浏览器窗口进行交互的对象，其中 window 对象是整个 BOM 的核心，所有对象和集合都以某种方式与 window 对象关联。

navigator、location、document、screen 和 history 是 windows 对象的子集，document 对象又包含若干子对象（location、forms、anchors、images、links、embeds、applets），BOM 中的对象关系如图所示：

window 对象

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

Window 对象表示整个浏览器窗口，但不包括其中的页面内容，使用 window 对象可以直接对浏览器窗口进行操作。window 对象提供可以主要功能有：调整窗口大小和位置；打开新窗口和关闭窗口；系统提示框；状态栏控制；定时操作。由于 window 对象的属性和方法众多，我们就不一一作介绍，如想深入了解，请访问https://developer.mozilla.org/zh-CN/docs/Web/API/Window。

常用属性

Window 对象拥有众多属性，常用的有：

  1. innerHeight 浏览器显示区域高度
  2. innerWidth 浏览器显示区域宽度
  3. document window 对象的子对象 document 是 javascript 的核心对象，HTML 文档中包含 BODY 元素时就会创建一个 document 实例。
  4. location 给出当前窗口的 URL 信息或指定打开窗口的 URL。

常用方法

  1. close() 关闭页面。
  2. open() 打开页面。
  3. alert() 弹出警告对话框。
  4. print() 模拟用户点击浏览器上的“打印”按钮，通知浏览器打开打印对话框打印当前页。
  5. confirm() 显示需要用户确认信息的对话框。
  6. scrollTo() 将窗口中的内容滚动到指定位置。
  7. scrollByPages() 滚动当前文档到指定页。
  8. setTimeout() 在指定的延迟时间之后调用一个函数或执行一个代码片段。
  9. setInterval() 周期性地调用一个函数 (function) 或者执行一段代码。

window 对象的属性和方法在调用时，可以省略其对象名称，即 window.innerHeight 可简写为 innerHeight。

例如：

<html>
<body>
<input type="text" id="clock" />
<script language=javascript>
var int = setInterval("clock()",50);
function clock() {
  var t = new Date();
  document.getElementById("clock").value = t
  }
</script>
<button onclick="int=window.clearInterval(int)">Stop interval</button>
</body>
</html>

控制台

在开发学习过程中，我们经常使用console.log()输出信息，方便调试。

可以使用控制台中的计时功能，获取代码执行的时间，以便优化代码质量。

console.time("timer");
for(var i=0;i<10000;i++){}
console.assert(a===1,"这时候条件是a==1,实际a是1");
console.assert(b===1,"这时候条件是b==1，实际b是2");
console.warn("这是一段警告信息");
console.error("出错啦，你的配置信息有误");
console.timeEnd("timer");

navigator 对象主要用来检查客户端浏览器信息、浏览器版本、操作系统的类型等等。navigator 对象最常用的属性是 userAgent，该属性能读取浏览器及操作系统的信息。

location 对象

location 对象的主要作用是分析和设置页面的 URL 地址，其中 location.herf 属性用于获得和设置窗口的 URL。

screen 对象

screen 对象主要用来获取用户计算机的屏幕信息，包括屏幕的分辨率、屏幕的颜色深度等信息。

history 对象

history 对象主要用来控制浏览器的后退和前进。它可以访问历史页面，但不能获取历史页面的 URL。

document 对象

从 BOM 的角度看，document 对象是一系列集合构成，这些集合可以访问文档的各个部分，并提供页面自身的信息。由于 BOM 没有统一标准，各种浏览器中的 document 对象特性并不完全相同，因此要使用各类浏览器都支持的通用属性和方法。常用的属性和方法有 title、lastModified、write 等等。

参考资料

  1. https://www.w3.org/DOM/DOMTR