文章目录
前言
提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。
一、什么是BOM
BOM ，Browser Object Moudle 是浏览器对象模型，将使用的浏览器抽象为对象进行处理，其核心对象是window，并且BOM为其中的每个对象都提供了很多方法和属性。
与DOM不同，BOM缺乏标准，其最初是Netscape浏览器标准的一部分，现都是浏览器厂商各自在浏览器上定义，兼容器较差。
下图为BOM结构：
二、BOM常见对象
1.window对象
window对象是浏览器的*对象，它不仅是访问浏览器窗口的一个接口，也是一个全局对象，定义在全局作用域中的变量，函数等都会变成window对象的属性和方法。
代码如下（示例）：
<script>
console.log(window);
</script>
<script>
var num = 10;
console.log(window.num);
function fun(){
console.log(13);
}
window.fun();
</script>
通常情况下，window都被省略
常见事件
1. 窗口加载事件
window.onload = function（）{ } 或者 window.addEventListener（“load,funtion（）{ });
window.onload为窗口加载事件，当文档内容完全加载完成就会触发该事件，进行调用。
使用window.onload可以将JS代码写在页面上方，但是window.onload一般只能用一次，如果有多个，则会以最后一个window.onload为准。但是使用addEventListener则没有限制
代码如下（示例）：
<script>
// window.onload = function(){
// var btn = document.querySelector('button');
// btn.onclick = function(){
// alert('点击我干什么！')
// }
// }
window.addEventListener('load',function(){
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
alert('点击我干什么！')
})
})
</script>
<button>click</button>
document.addEventListener（‘DOMContentLoaded’，function（）{ }）
仅当DOM加载完成，就可以触发该事件发生，适用于用户访问到onload事件较长的情况
2.调整窗口事件大小
window.onresize = function（） { }
或者
window.addEventListener（”resize",function（） { })
window.onresize可以调整窗口大小加载事件，只要窗口像素发生变化，就会触发这个事件，常和window.innerWidth用于完成响应式布局。
代码如下（示例）：
<div>
@@@
</div>
<script>
window.addEventListener('resize',function(){
if(window.innerWidth <= 800){
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
})
})
</script>
2.location对象
location属性可以用于获取或设置窗体的URL，并且可以解析URL。
location对象属性：
| location 对象属性 | 返回值 |
|---|---|
| location.href | 获取或设置整个URL |
| location.host | 返回主机/域名 |
| location.port | 返回端口号，如果没有返回空字符串 |
| location.pathname | 返回路径 |
| location.search | 返回参数 |
| location.hash | 返回片段，#后面内容常见于锚点，链接 |
以location.href为例：
<button>dididi</button>
<script>
var button = document.querySelector('button');
button.addEventListener('click',function(){
location.href = 'http://www.baidu.com';
})
</script>
location对象方法：
| location对象方法 | 返回值 |
|---|---|
| location.assign（） | 可以跳转页面，可以后退页面 |
| location.replace（） | 替换当前页面，不能后退页面 |
| location.reload（） | 重新加载页面，相当于刷新 |
强制刷新： ctrl+f5 ；刷新：f5
3.navigator对象
navigator对象包含有关浏览器的信息，拥有很多属性，通过navigator可以使pc端和移动端同一个网站呈现不同的界面。
4.history对象
history对象和浏览器历史记录进行交互，该对象包含用户访问过的URL
| history对象方法 | 作用 |
|---|---|
| back（） | 可以使页面后退 |
| forward（） | 可以使页面前进 |
| go（） | 既可以前进，也可以后退，括号内为前进后退的页面数 |
三、定时器
1.setTimeout()
setTimeout（）方法可在指定秒数后调用相应的函数，且只调用一次
setTimeout（要执行的代码，等待的毫秒数）
setTimeout（函数，等待的毫秒数）
代码如下（示例）：
function set(){
console.log('开始计时');
}
setTimeout(set,3000);
setTimeout("alert('计时开始')",3000);
setTimeout（）可以直接写函数，也可以写函数名或者采取字符串 '函数名（）'三种形式
停止setTimeout()定时器
window.clearTimeout（timeout ID）
clearTimeout（）可以取消setTimeout（）方法，其中window可以省略
2.setInterval()
setInterval（）方法可以每隔相同的时间，重复调用一个函数
window.setInterval（回调函数，等待毫秒数）
代码如下（示例）：
setInterval(function(){
console.log('123')
},2000);
清除setInterval()定时器
window.clearInterval（）
clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作
3.this指向
一般this的指向在函数执行时才能确定，指向调用函数的对象
全局作用域或普通函数中，this则指向全局对象window
代码如下（示例）：
console.log(this);
function fn(){
console.log(this);
}
var Fun = fn();
四、同步和异步
JS执行机制
JS语言的一大特点就是单线程，即同时只能做一件事情。这就意味着所有任务都需要排队，使得JS执行时间过长，会使页面加载不连贯。
为了解决这个问题，就有了同步和异步的概念
同步
前一个任务结束后，再执行下一个任务。
JS中，同步任务都在主线程上进行，形成一个执行栈
异步
在做一件事的同时，还可以处理其他事情。
JS中异步通过回调函数来实现，一般异步任务有三种类型：
1.普通事件，click，resize
2.资源加载，load，error
3.定时器，setInterval，setTimeout
JS中，先执行栈中的同步任务，最后再执行任务队列中的异步任务
代码如下（示例）：
<script>
console.log(1);
setTimeout(function(){
console.log(2);
},1000)
console.log(3);
</script>
示意图：