快速了解JavaScript的BOM模型

ECMAScript是JavaScript的核心，而BOM（浏览器对象模型，Browser Object Model）是在Web中使用JavaScript的核心。

在BOM对象中，window对象是最顶层对象，在浏览器环境中它是一个Global全局对象，其它对象是window对象的子对象（属性）。BOM主要用于管理浏览器窗口及窗口之间的通讯。下面是BOM对象的组成结构。

window对象

window是BOM的核心对象，表示浏览器的一个实例。有双重角色，即是通过JavaScript访问浏览器窗口的一个接口，又是ES规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象。

var age = 29;
function sayAge() {
   
    console.log(this.age);
}
console.log(window.age);	// 29
sayAge();					// 29
window.sayAge();			// 29

如上所示，在全局作用域中定义的变量和函数都被自动归在了window对象名下。而sayAge()存在于全局作用域中，方法中的this.age被映射到window.age，因此显示的仍然是正确的结果。

然而，定义的全局变量不能通过delete操作符删除，定义在window对象上的属性却可以。

window除了location、navigator、screen、history和document外，还有一些属性。

• window.console：返回Console对象的引用，可以向浏览器控制台输出日志信息。仅用于调试，不应该给用户呈现。（只读）
• window.frames：数组对象，列出当前窗口的所有直接子窗口。（只读）
• window.frameElement：当前窗口嵌入另一个窗口（嵌入<object>、<iframe>），如果当前窗口是顶层，返回null。（只读）
• window.innerHeight：窗口的视图可见高度（单位：像素），也包括滚动条高度。（只读）
• window.innerWidth：窗口的视图可见宽度（单位：像素），也包括滚动条的宽度。（只读）
• window.length：当前窗口中包含框架数量。框架为<frame>与<iframe>。（只读）
• window.locationbar：检查visibility属性的地址栏对象，用来表示是否可见。（只读）
• window.localStorage：访问Document源的对象Storage；将数据存储在浏览器会话中。类似sessionStorage，但数据可长期保留；而页面会话结束时，sessionStorage数据会清除。（只读）
• window.menubar：检查visibility属性的菜单栏对象，用来表示是否可见。（只读）
• window.outerHeight：整个浏览器窗口的高度（单位：像素）。（只读）
• window.outerWidth：整个浏览器窗口的宽度（单位：像素）。（只读）
• window.parent：当前窗口或子窗口的父窗口的引用。（只读）
• window.personalbar：检查visibility属性的个人工具栏对象，用来表示是否可见。（只读）
• window.scrollX：页面水平方向滚动距离（单位：像素），window.pageXOffset是别名。（只读）
• window.scrollY：页面垂直方向已滚动距离（单位：像素），window.pageYOffset是别名。（只读）
• window.scrollbars：检查visibility属性的滚动条对象，用来表示是否可见。（只读）
• window.self：指向当前window对象的引用。
• window.sessionStorage：允许访问当前源的sessionStorage对象。与localStorage相似，不同在于sessionStorage在页面会话结束时清除，而localStorage没有过期时间。
• window.top：窗口层级最顶层窗口的引用。
• window.window：window对象本身。

介绍了一些window的属性，下面我们看一下关于window的方法。

消息框

window有三种消息框：警告框 alert、确认框confirm和提示框prompt。

window.alert(message)会显示一个警告对话框，上面显示有指定的文本内容以及一个确定按钮。例如window.alert("警告框来袭");的显示如下：

window.confirm(message)是一个具有可选消息的模态框。用于验证是否接受用户操作的确认框。

var result = window.confirm("你要离开吗？");
if (result) {
   
	// 按下确定后执行的操作
	console.log("确定");
} else {
   
	// 按下取消后执行的操作
	console.log("取消");
}

运行结果：

window.prompt(text, value) 是用于显示文字信息提示用户输入文字的提示框。

• text参数为提示用户输入信息的提示内容，可省略。
• value参数为文本输入框中的默认值，可省略。

var result = window.prompt("你的生日是什么时候的？", "1997-01-01");
if (result == "2011-10-23") {
   
	alert("你和我生日一样耶！");
}

效果如下：

点击确定后，文本输入框中文字被返回。如果为空，则返回一个空字符串。点击取消后，返回null。

三个方法都具有堵塞效应，一旦弹出对话框，整个页面就暂停执行，等待用户做出反应。

windo