一、什么是BOM
BOM ，Browser Object Moudle 是浏览器对象模型，将使用的浏览器抽象为对象进行处理，其核心对象是window，BOM为其中的每个对象都提供了很多方法和属性。与DOM不同，BOM缺乏标准，现在都是浏览器厂商各自在浏览器上定义，兼容器较差
二、BOM对象
1.window对象
window 对象在浏览器中有两重身份，一个是ECMAScript中的 Global 对象，另一个就是浏览器窗口的JS接口。网页中定义的所有对象、变量和函数都以 window 作为其 Global 对象
通过 var 声明的所有全局变量和函数都会变成 window 对象的属性和方法
var：声明全局变量
let：声明局部变量
const：声明只读常量
属性
-
top
top 属性始终指向最上层（最外层）窗口，即浏览器窗口本身 -
parent
parent 属性则始终指向当前窗口的父窗口 -
self
self 是终极 window 属性，始终指向 window，实际上self和window就是同一个对象 -
screenLeft，screenTop
用于表示窗口相对于屏幕左侧和顶部的位置，IE、Safari 和 Opera 支持使用 -
screenX，screenY
同上，Firefox 和 Safari 支持使用 -
outerWidth，outerHeight
返回浏览器自身窗口大小 -
innerWidth，innerHeight
返回页面视口大小，不包括浏览器的边框和工具栏
方法
-
setTimeout()
用于在一定时间后执行某些代码 -
clearTimeout()
只要是在指定时间到达之前调用 clearTimeout()，就可以取消由 setTimeoutl() 设置的 定时器，在任务执行后再调用clearTimeout()没有效果 -
setInterval()
用于指定每隔一段时间执行某些代码 -
clearInterval()
取消setInterval() 设置的定时器。 -
open()
open()接收 4个参数：URL、目标窗口（name）、特性字符串（specs）和表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔值（replace）
URL：
打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口
目标窗口：
指定target属性或窗口的名称，取值包括：
_blank 加载到一个新的窗口（默认）
_self 替换当前页面
_parent 加载到父框架
_top 替换任何可加载的框架集
name 窗口名称
-
scroll()/scrollTo()，scrollBy()
scroll()和scrollTo()中两个参数表示要滚动到的坐标，scrollBy()中表示滚动的距离 -
alert()
警告框 -
prompt()
对话提示框 -
confirm()
确认框
*注意：系统对话框样式单一，且适用场景有限，不建议使用，可自定义弹窗
事件
- window.onload()
窗口加载事件，当文档内容完全加载完成后会触发该事件
文档加载的顺序：域名解析–>加载HTML–>加载JavaScript和CSS–>加载图片等非文字媒体文件
解决的问题：
JS函数方法需要在 HTML 文档渲染完成后才可以使用，如果没有渲染完成，此时的 DOM 树是不完整的，这样在调用一些 JS模块时就可能报错。页面的代码顺序是从上往下进行加载，有时将js代码放在相应对象前面，那么会出现JS代码中操作的对象未被加载的情况，这时候window.onload就被有了存在的意义
window.onload = function(){ }; // window.addEventListener('load',function(){})
//window.onload 只会执行一次，同一页面中定义，页面加载完成后，只会执行funcB
window.οnlοad=funcA;
window.οnlοad=funcB;
- window.onresize()
在窗口或框架被调整大小时触发事件
window.onresize = function(){ }; // window.addEventListener('resize',function(){})
2.location对象
location对象包含了当前URL的信息，location也是window对象的属性
- location.href 获取或设置整个URL
- location.assign（url） 可以跳转页面，可以后退页面
- location.replace（url） 替换当前页面，不能后退页面
- location.reload（） 重新加载页面，相当于刷新
- location.host 返回主机/域名
- location.port 返回端口号，如果没有返回空字符串
- location.pathname 返回路径
- location.search 返回参数
- location.hash 返回片段，#后面内容常见于锚点，链接
3.history对象
history 对象表示当前窗口首次使用以来用户的导航历史记录
- go()
接收一个整数参数，表示前进或后退多少步 - back()
表示页面后退一页 - foward()
表示页面前进一页 - history.length
表示历史记录中有多个条目，包括可以前进和后退的页面
4.screen对象
screen对象包含有关用户屏幕的信息
5.navigator对象
navigator对象包含有关浏览器的信息，拥有很多属性，通过navigator可以使pc端和移动端同一个网站呈现不同的界面。
this指向问题
this在函数定义的时候是没办法确定指向的，只有函数执行的时候，谁调用了它才能确定this指向谁。
- 全局作用域或者普通函数中this指向全局对象window
- 方法调用中谁调用this指向谁
- 构造函数中this指向构造函数的实例
JS执行机制
- JS是一个单线程语言，不能同时进行多个任务和流程，这样会出现一个问题：如果JS执行的时间过长，会造成页面的渲染不连贯，页面渲染加载阻塞，所以后来允许JS脚本创建多个进程，在JS中出现了同步任务和异步任务
同步任务是指在主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务。（按顺序执行）
例如打开网站时，网站的渲染过程
异步任务是指不进入主线程，而进入任务队列的任务，只有某个异步任务可以执行了，该任务才会进入主线程。（先执行一部分，等拿到结果之后再执行另一部分）
例如图片的加载，音乐的加载
-
JS常见异步操作：定时器，ajax，事件绑定，promise…
-
JS异步转同步方式：回调函数，promise化，async-await…
-
JS执行机制-事件循环
1.所有同步任务都在主线程上执行，形成一个执行栈
2.主线程之外，还存在一个任务队列，只要异步任务有了结果，就会在任务队列中放置一个事件
3.一旦执行栈中的所有同步任务执行完毕（此时JS引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，先执行微任务队列再执行宏任务队列
循环执行上述步骤
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
