浏览器对象的层级结构如下图所示。
最上层的是Window对象。在客户端JavaScript启动时自动生成,用来提供访问全局变量和全局函数的方法。也可以说是「客户端JavaScript中的全局对象」。
全局对象(Window对象)
parent、self、top、window 任意的窗口名(Window对象)
document(Document对象)
location(Location对象)
navigator(Navigator对象)
console(Console对象)
localStorage/sessionStorage(Storage对象)
history(History对象)
XMLHttpRequest/FileReader/Worker对象
forms(表单的集合=Form对象数组)
anchors(锚的集合=Anchor对象的数组)
images(图片的集合=Image对象数组)
●主要的浏览器对象
所有的浏览器对象,都可以通过最上层的Window对象来访问。请注意上图中的Window对象下方有document、history、location和navigator这样的属性。通过这些属性,我们可以获取表示窗口中的文档的Document对象、表示历史记录的History对象、表示URL信息的Location对象。
■访问浏览器对象
正如3.7节中所说的,全局对象是基本上不需要应用开发者留意的(或者,是不能直接访问的)对象。也就是说,在客户端JavaScript中,基本上不需要留意Window对象。例如,如果想要访问location对象的reload方法,像下面这样直接调用location属性就可以了。
location.reload();
请注意,下面这种写法是不正确的。
Window.location.reload();
但是,查看上一页的图我们可以发现Window有引用自身本身的window属性。虽然通过window属性可以像下面这样书写,但这样会使代码更加冗长,没有太多意义。
window.location.reload(); 开头是小写字母
顺便说一下,这样书写时的location表示的不是对象名而是属性名。因为location只是「引用Location对象的属性」。
但是,location属性是作为实体来表示对象的,所以为了方便也经常写为location对象(history和document也是同样的)。不用考虑地太复杂,虽然记作是document、history、location对象也没有关系,但混淆时请稍微回想下本文的内容并在头脑中整理清楚。