12.1 window对象

BOM 的核心是 window 对象，表示浏览器的实例。window 对象在浏览器中有两重身份，一个是ECMAScript 中的 Global 对象，另一个就是浏览器窗口的 JavaScript 接口。
这意味着网页中定义的所有对象、变量和函数都以 window 作为其 Global 对象，都可以访问其上定义的 parseInt()等全局方法。

12.1.1 Global作用域

因为 window 对象被复用为 ECMAScript 的 Global 对象，所以通过 var 声明的所有全局变量和函数都会变成 window 对象的属性和方法。

如果在这里使用 let 或 const 替代 var，则不会把变量添加给全局对象

  1. var age = 29; 
  2. var sayAge = () => alert(this.age); 
  4. alert(window.age); // 29 
  5. sayAge(); // 29 
  6. window.sayAge(); // 29
  8. ------------------------------- 分割线
  10. let age = 29; 
  11. const sayAge = () => alert(this.age); 
  13. alert(window.age); // undefined 
  14. sayAge(); // undefined 
  15. window.sayAge(); // TypeError: window.sayAge is not a function

12.1.2 窗口

top 对象始终指向最上层（最外层）窗口，即浏览器窗口本身。
parent 对象则始终指向当前窗口的父窗口。如果当前窗口是最上层窗口，则 parent 等于 top（都等于 window）。
最上层的 window如果不是通过 window.open()打开的，那么其 name 属性就不会包含值，本章后面会讨论。
self 对象是终极 window 属性，始终会指向 window。实际上，self 和 window 就是同一个对象。

现代浏览器提供了 screenLeft 和screenTop 属性，用于表示窗口相对于屏幕左侧和顶部的位置 ，返回值的单位是 CSS 像素。

可以使用 moveTo()和 moveBy()方法移动窗口。这两个方法都接收两个参数，其中 moveTo()接收要移动到的新位置的绝对坐标 x 和 y；而 moveBy()则接收相对当前位置在两个方向上移动的像素数。

  1. // 把窗口移动到左上角
  2. window.moveTo(0,0); 
  4. // 把窗口向下移动 100 像素
  5. window.moveBy(0, 100);
  7. // 把窗口移动到坐标位置(200, 300) 
  8. window.moveTo(200, 300); 
  10. // 把窗口向左移动 50 像素
  11. window.moveBy(-50, 0);

12.1.3 定时器

JavaScript 在浏览器中是单线程执行的，但允许使用定时器指定在某个时间之后或每隔一段时间就 执行相应的代码。
setTimeout()用于指定在一定时间后执行某些代码，而 setInterval()用于指定 每隔一段时间执行某些代码。

setTimeout()方法通常接收两个参数：要执行的代码和在执行回调函数前等待的时间。
第 一个参数可以是包含 JavaScript 代码的字符串或者一个函数，第二个参数是要等待的毫秒数，而不是要执行代码的确切时间。

调用 setTimeout()时，会返回一个表示该超时排期的数值 ID。
这个超时 ID 是被排期执行代码的 唯一标识符，可用于取消该任务。要取消等待中的排期任务，可以调用 clearTimeout()方法并传入超
时 ID

  1. // 设置超时任务
  2. let timeoutId = setTimeout(() => alert("Hello world!"), 1000); 
  4. // 取消超时任务
  5. clearTimeout(timeoutId);

12.1.4 系统对话框

使用 alert()、confirm()和 prompt()方法，可以让浏览器调用系统对话框向用户显示消息。
这些对话框都是同步的模态对话框，即在它们显示的时候，代码会停止执行， 在它们消失以后，代码才会恢复执行。

12.2 location对象

location 是最有用的 BOM 对象之一，提供了当前窗口中加载文档的信息，以及通常的导航功能。
它既是 window 的属性，也是 document 的属性， window.location 和 document.location 指向同一个对象。

image.png

  1. // 假设当前 URL 为 http://www.wrox.com/WileyCDA/ 
  3. // 把 URL 修改为 http://www.wrox.com/WileyCDA/#section1 
  4. location.hash = "#section1"; 
  6. // 把 URL 修改为 http://www.wrox.com/WileyCDA/?q=javascript 
  7. location.search = "?q=javascript"; 
  9. // 把 URL 修改为 http://www.somewhere.com/WileyCDA/ 
  10. location.hostname = "www.somewhere.com"; 
  12. // 把 URL 修改为 http://www.somewhere.com/mydir/ 
  13. location.pathname = "mydir"; 
  15. // 把 URL 修改为 http://www.somewhere.com:8080/WileyCDA/ 
  16. location.port = 8080;

除了 hash 之外，只要修改 location 的一个属性，就会导致页面重新加载新 URL。

在以前面提到的方式修改 URL 之后，浏览器历史记录中就会增加相应的记录。当用户单击“后退” 按钮时，就会导航到前一个页面。

使用 replace()方法接 收一个 URL 参数，重新加载后不会增加历史记录。

最后一个修改地址的方法是 reload()，它能重新加载当前显示的页面。调用 reload()而不传参 数，页面会以最有效的方式重新加载。

12.3 navigator对象

12.4 screen对象

12.5 history对象

history 对象表示当前窗口首次使用以来用户的导航历史记录。
因为 history 是 window 的属性， 所以每个 window 都有自己的 history 对象。

go()方法可以在用户历史记录中沿任何方向导航，可以前进也可以后退。这个方法只接收一个参数，
这个参数可以是一个整数，表示前进或后退多少步。负值表示在历史记录中后退，而正值表示在历史记录中前进。

  1. // 后退一页
  2. history.go(-1);
  4. // 前进一页
  5. history.go(1); 
  7. // 前进两页
  8. history.go(2);

go()有两个简写方法：back()和 forward()。这两个方法模拟了浏览器的后退按钮和 前进按钮

  1. // 后退一页
  2. history.back(); 
  4. // 前进一页
  5. history.forward();