JavascriptBOM的核心对象window

Window对象

参考 MDN https://developer.mozilla.org/zh-CN/docs/Web/API/Window

window 对象表示一个包含DOM文档的窗口，其 document 属性指向窗口中载入的 DOM文档 。
使用 document.defaultView 属性可以获取指定文档所在窗口。

window作为全局变量，代表了脚本正在运行的窗口，暴露给 Javascript 代码。

在有标签页功能的浏览器中，每个标签都拥有自己的 window 对象；也就是说，同一个窗口的标签页之间不会共享一个 window 对象。

参考 JavaScript高级程序设计总结

• BOM的核心对象是window，它表示浏览器的一个实例。

  • 它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。

• 获取浏览器窗口的(信息)位置: Window的专有属性 DOM没有的

  • screenLeft 和 screenTop 属性，分别用于表示浏览器窗口相对于屏幕左侧和上侧的距离。
  • Firefox 则在 screenX 和 screenY 属性中提供相同的窗口位置信息。
    
    
    IE8以后提供的方法有以下
  • outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸
  • innerWidth、innerHeight 返回视口（viewport）大小而非浏览器窗口大小。
  • 这里的视口是可见视口的大小，就是眼睛在浏览器窗口实实在在能看到的内容的大小。 ( 同移动端)
    
    

• 获取DOM专有属性

  • IE8以前没有提供取得当前浏览器窗口尺寸的属性，但是通过DOM提供页面可视区域的相关信息和上面的可见视口获取的值一样 ( 同移动端 )
  • document.documentElement.clientWidth
  • document.documentElement.clientHeight
    

window.setTimeout() window.setInterval()

基本概念: 这些方法都是改挂载到在window对象(全局上下文)的方法。这些方法不是Javascript本身定义的，而是有宿主环境提供的(如浏览器或者是nodejs)
还有一个要注意的点: 在浏览器或者nodejs环境中，运行时对js脚本的调度方式就叫做事件循环。
浏览器在这个过程中机制: 其放置的事件队列是在页面构建阶段和事件处理阶段以外。

• 定时器触发线程
  负责执行异步定时器一类的函数的线程，如： setTimeout，setInterval。
  主线程依次执行代码时，遇到定时器，会将定时器交给该线程处理，当计数完毕后，事件触发线程会将计数完毕后的事件加入到任务队列的尾部，事件循环检查任务队列, 在队列中发现了该事件，则事件循环会从任务队列中取出事件， 放入执行栈，相关联的事件处理器(也就是处理函数被执行)。

• 定时器的返回值 – 唯一标识 定时器的ID
  调用setTimeout方法后，立即返回id，且这个id是唯一的，这个id就是清除定时器的唯一令牌。

• 设置超时调用 及取消定时器

var timeoutId = setTimeout(function() {
 alert("Hello world!");
}, 1000);
clearTimeout(timeoutId);  // 注意：把它取消
timeoutId = null // 并且把timerId重置为null

只要在指定的时间尚未过去之前调用 clearTimeout()，就可以完全取消超时调用。
这句代码什么也不会执行，因为事件触发线程还未把计数完毕的事件加入到任务队列，就已经把定时器给取消了。

玩转计时器: 间隔执行(setInterval)
发挥脑洞想象一个场景, 一个setInterval的定时器, 每10ms放入队列一次, 如果主线程上的代码会执行30ms，
那这么看来间隔执行的回调要放入事件队列中为 3次，其实不是的。
在20ms和30ms的时候时间间隔计时器再次触发，此时间隔计时器的实例已经在队列中等待执行，所以该触发被终止。记住: 浏览器不会同时创建两个相同的间隔计时器。

关于浏览器事件循环,详解解释请参考《Javascript忍者秘籍二》洞悉浏览器章节，或者我的博文浏览器事件循环原理。
浏览器事件循环原理 https://blog.csdn.net/weixin_44811301/article/details/104046710