1、BOM
（1）BOM概念
BOM（Browser Object Model）浏览器对象模型，他提供了独立于内容与浏览器窗口进行交互的对象，核心是window
有一系列相关的对象域组成，每一个对象都有很多的属性和方法
是浏览器厂商在各自的浏览器上定义的，兼容性较差
把浏览器当做一个对象
顶级对象是window
学习的是浏览器窗口交互的一些对象
BOM包含DOM
（2）DOM（文档对象模型）
文档对象模型，把文档当做一个对象
顶级对象是document
主要是操作页面的元素
是W3C的标准规范
（3）window对象
<body>
<script>
var num=90;
document.onkeyup=function(){
window.alert(window.num);
}
</script>
</body>
- 是js访问浏览器的一个接口
- 是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用的时候可以省略window
2、window对象的常见事件
（1）窗口加载事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function() {
var b = document.getElementById("b");
b.onclick = function() {
alert("hello");
}
}
</script>
</head>
<body>
<button id="b">按钮</button>
</body>
</html>
- 有了window的onload事件以后可以把js代码放到页面元素的前面，不用考虑加载顺序的问题，因为onload是在页面的全部内容加载完毕再去执行处理函数
- 使用传统的事件注册方式，onload事件只能使用一个，如果注册多个的话会以最后一个为准。使用addEventListener没有限制
- 存在的缺点是如果页面的图片较多，从用户访问到onload事件触发需要经历较长的时间，影响用户的体验
DOMContentLoaded事件：
<script> document.addEventListener("DOMContentLoaded",function(){ alert("123"); }) </script>
- DOMContentLoaded事件触发时，仅当DOM加载完成，不包括css、图片等，可以避免onload的缺点
（2）resize事件：浏览器的窗口大小变化的时候触发
<script> window.addEventListener("resize",function(){ console.log("窗口变化了") }) </script>
3、windows对象的定时器
（1）setTimeout函数：用于设置一个定时器，该定时器到期后执行函数，只调用一次函数
<head>
<meta charset="UTF-8">
<title></title>
<script>
var myfunction=function(){
console.log("窗口变化了")
}
window.setTimeout(myfunction,3000);
</script>
</head>
停止setTimeout定时器：
<script>
var myfunction=function(){
console.log("窗口变化了")
}
window.setTimeout(myfunction,2000);
clearTimeout(myfunction);
</script>
（2）setInterval定时器
<head>
<meta charset="UTF-8">
<title></title>
<script>
var myfunction=function(){
console.log("窗口变化了")
}
window.setInterval(myfunction,2000);
</script>
</head>
重复调用一个函数，每隔一段时间调用一次
关闭setInterval定时器：
window.clearInterval(myfunction);
4、this指向问题
（1）全局作用域或者普通函数中this指向全局对象window
<head>
<meta charset="UTF-8">
<title></title>
<script>
console.log(this);
function f(){
console.log(this);
}
f();
</script>
</head>
定时器里面的this指向window：
<script> setTimeout(function(){ console.log(this); },1000) </script>
（2）方法中谁调用谁this就指向谁
<script type="text/javascript"> var person = { num:12, sayHi:function(){ console.log(this); } } person.sayHi(); </script>
（3）构造函数中，this指向构造函数的实例
<script type="text/javascript"> function fun(){ console.log(this) } var fun=new fun(); </script>
5、js的执行机制
（1）js的执行机制
- JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致，JavaScript 是为处理页面中用户的交互,以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。
- 单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是:如果JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
- 为了解决这个问题,利用多核CPU的计算能力, HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程。于是, JS中出现了同步和异步。
<script> console.log(3); setTimeout(function(){ console.log(2); },1000); console.log(1); </script>
（2）同步任务与异步任务
<script> console.log(3); setTimeout(function(){ console.log(2); },0); console.log(1); </script>
同步任务：
同步任务都在主线程上执行,形成一个执行栈。
异步任务：
JS的异步是通过回调函数实现的，异步任务在任务队列里面
一般而言， 异步任务有以下三种类型
- 普通事件,如click. resize等
- 资源加载,如load. error 等
- 定时器,包括setInterval. setTimeout 等
执行机制：
- 先执行执行栈中的同步任务
- 异步任务放在任务队列里面
- 执行栈中的所有同步任务执行完毕，系统会按照次序读取任务队列中的异步任务