Browser Window 扫盲

前言

作为一个 Node 开发工程师，似乎对于 Window 并不需要关心，但作为一个前端工程师，Window 是个啥子东东，还是需要花时间理一理的。本期看点，深入了解 Window 的 API ～

Window

所有的浏览器都有 Window 对象，每个窗口都会具有一个 Window，通常在浏览器开发者模式中，可以使用 window 拿到这个对象。

window

window 具有很多属性和方法，常见的有

• navigator 导航器

• screen 显示器

• history 历史对象

• location 位置对象

• document 文档对象

• 方法

  • open

  • close

  • setTimeout

  • setInterval

    …

在浏览器中，我们使用这些对象和方法，完整的用法是 window.xx，但我们可以省略 window，直接使用 xx 即可，对于新手来说可能觉得很奇怪。

复习一下方法调用， Javascript 的方法执行最终都会是以 xx.call(this, args…) 的形式，这里的 this 就是方法的上下文，通常是调用的对象

在浏览器里，如果我们直接使用一个属性或者方法，那么执行这个方法的上下文通常都是 window 对象，所以我们可以直接使用这些对象和方法，因为上下文环境就是 window，最后取的都是 window 的属性和方法。

放一张比较完整的图～

document

document 是我们的文档对象，我们可以使用开发者模式直接打印 document，document 打印出来（toString）就是我们的 html，实际上 document 对象也具有很多方法和属性。

createElement

创建元素

const div = document.createElement('div')
div.appendChild()

getElementById

获取元素

const div = document.getElementById('id')
div.appendChild()

利用这些方法创建元素，然后将元素挂载到已有的 dom (app)上，React，Vue 框架最核心的原理不过如此

cookie

cookie 对象是 document 的属性，当访问同源的网站是，浏览器会自动帮我们吧 cookie 对象传过去，cookie 对象通常包含了用户信息，服务端可以通过 cookie 判断用户的状态，cookie 默认是持久化保存的

location

location 对象即 window 的 location 对象

document.location == window.location
// true

URL

返回当前的 url

open

与 window 的 open 不同， document 的 open 是操作 document 对象，打开一个 document 的输入流，open 将会清空当前的文档

close

关闭文档流

document.open(); 
document.write("<p>Hello world!</p>");
document.write("<p>I am a fish</p>");
document.write("<p>The number is 42</p>"); 
document.close();

总结

window 对象博大精深～