文章目录
一、什么时BOM
1.BOM概念
BOM(Browser Object Model) 即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
2.BOM的构成
window对象是浏览器的顶级对象，具有双重角色
- 他是JS访问浏览器窗口的一个接口。
- 他是一个全局对象，定义再全局作用域中的变量，函数都会变成window对象的属性和方法。
window的下一个特殊属性window.name
<script>
var num = 10
console.log(window.num)//10
</script>
二、window对象的常见事件
1.窗口加载事件
window.onload当文档内容完成加载后会触发该事件，就调用的处理函数
三、定时器
1.案例_倒计时
<div>
<span class="hour">1</span><span class="minute">2</span><span class="second">3</span>
</div>
</body>
<script>
var hour = document.querySelector('.hour')
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
let inputTime = +new Date('2022-3-2 19:00:00')
countDown()
setInterval(countDown,100)
function countDown() {
let nowTime = +new Date()
let times = (inputTime - nowTime) / 1000
let d = parseInt(times / 60 / 60 / 24)//天
d = d < 10 ? '0' + d : d
var h = parseInt(times / 60 / 60 % 24)//小时
h = h < 10 ? '0' + h : h
hour.innerHTML = h
var m = parseInt(times / 60 % 60)//分
m = m < 10 ? '0' + m : m
minute.innerHTML = m
var s = parseInt(times % 60)
s = s < 10 ? '0' + s : s
second.innerHTML = s
return d + '天' + h + '时' + m + '分' + s + '秒'
}
</script>
2.this指向问题
<body>
<button>
点我
</button>
</body>
<script>
// this指向问题 一般情况下this的最终指向的是那个调用它的对象
// 1.全局作用域或者普通函数中this指向全局对象window（定时器里的this指向window）
console.log(this)//打印window
function fn(){
console.log(this)
}
window.fn()//打印window
setInterval(function(){
console.log(window)
},1000)//每隔一秒打印一个window
// 2.方法调用中谁调用this就指向谁
let any ={
Hello: function(){
console.log(this)//this指向any这个对象
}
}
any.Hello()//打印Hello:f()
let btn = document.querySelector('button')
btn.onclick = function(){
console.log(this)//this指向的是button
alert(this)
}
// 3.构造函数中this指向构造函数实例
function Fun(){
console.log(this)//this指向的是fun实例对象
}
let fun = new Fun()
</script>
四、JS执行队列
1.JS是单线程
JavaScript的一大特点就是单线程，代表着：同一时间只能做一件事。（前一个任务结束才能进行下一个任务）
2. 同步和异步
为了防止线程堵塞，合理利用多核cpu的计算能力。HTML5提出了Web Worker标准，允许JavaScript脚本创建多个线程，于是，JS中出现了同步和异步
2.1 同步
前一个任务执行后再执行下一个任务，执行顺序和任务的排列顺序是一致的，同步的。
2.2 异步
同时做多个事情，如：在做某件事情时，这件事情会花费很长事件，再此同时，还可以去做别的事情
本质区别：在流水线上各个流程的执行顺序不同
案例
console.log(1)
setInterval(function(){
console.log(3)
},1000)
console.log(2)
2.3同步任务
同步任务都在主线程上执行，形成一个执行线
2.4异步任务
JS的异步任务是通过回调函数实现
2.5JS执行机制
1.先执行执行栈中的同步任务
2.异步任务放到任务队列中（暂不执行）
3.执行剩余同步任务，当所有同步任务执行完毕，再按读取顺序执行异步任务
五、location对象
window对象提供了的一个location属性用来获取或设置窗体的URL，并且可以用于解析URL，这个属性返回的是一个对象
1.location对象的属性
2.location对象的方法
