window 对象

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

Global 作用域

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

var age = 29;
var sayAge = () => console.log(this.age);
console.log(window.age); // 29
sayAge(); // 29
window.sayAge(); // 29

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

let age = 29;
const sayAge = () => alert(this.age);
alert(window.age); // undefined
sayAge(); // undefined
window.sayAge(); // TypeError: window.sayAge is not a function

访问未声明的变量会抛出错误，但是可以在 window 对象上查询是否存在可能未声明的变量

// 这会导致抛出错误，因为 oldValue 没有声明
var newValue = oldValue;
// 这不会抛出错误，因为这里是属性查询
// newValue 会被设置为 undefined
var newValue = window.oldValue;

JavaScript 中有很多对象都暴露在全局作用域中，比如 location 和 navigator，因而它们也是 window 对象的属性。

窗口大小

window.innerWidth

返回浏览器窗口中页面视口的宽度（不包含浏览器边框和工具栏）

window.innerHeight

返回浏览器窗口中页面视口的高度（不包含浏览器边框和工具栏）

window.outerWidth

返回浏览器窗口自身的宽

window.outerHeight

返回浏览器窗口自身的高

获取视口大小

let pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != "number") {
  if (document.compatMode == "CSS1Compat"){
    pageWidth = document.documentElement.clientWidth;
    pageHeight = document.documentElement.clientHeight;
  } else {
    pageWidth = document.body.clientWidth;
    pageHeight = document.body.clientHeight;
  }
}

视口位置

window.pageXoffset

设置或返回当前页面相对于窗口显示区左上角的 X 位置

window.pageYoffset

设置或返回当前页面相对于窗口显示区左上角的 Y 位置

window.scrollX

返回文档/页面水平方向滚动的像素值

window.scrollY

返回文档在垂直方向已滚动的像素值。

window.scroll(x,y)

滚动窗口至文档中的特定位置

window.scrollTo(x,y)

把内容滚动到指定的坐标

window.scrollBy(x,y)

按照指定的像素值来滚动内容

导航与打开新窗口

window.open(strUrl, strWindowName)

打开一个新的浏览器窗口或查找一个已命名的窗口

定时器

JavaScript 维护了一个任务队列。其中的任务会按照添加到队列的先后顺序执行。setTimeout() 的第二个参数只是告诉 JavaScript 引擎在指定的毫秒数过后把任务添加到这个队列。如果队列是空的，则会立即执行该代码。如果队列不是空的，则代码必须等待前面的任务执行完才能执行

setTimeout()

指定在一定时间后执行某些代码

setInterval()

指定每隔一段时间执行某些代码

clearInterval()

取消循环定时

window对象