标签：function 异步 定时器 对象 介绍 window BOM 详细
BOM
1.BOM概述
1.1-什么是BOM
BOM（Browser Object Model）即浏览器对象模型，它提供独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM缺乏标准，javascript语法的标准化组织是ECMA,BOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。
| BOM | DOM |
|---|---|
| 浏览器对象模型 | 文档对象模型 |
| 把浏览器当做一个对象看待 | 把文档当做一个对象看待 |
| BOM的顶级对象是window | DOM的顶级对象是document |
| 浏览器窗口交互的一些对象 | 操作页面的元素 |
| 浏览器厂商各自浏览器定义的，兼容性较差 | W3C标准 |
1.2-BOM的构成
BOM比DOM大，它包含DOM
window对象是浏览器的顶级对象,它具有双重角色。
1.它是js访问浏览器的一个窗口。
2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。在调用的时候可以省略window,alert()、prompt()都属于window的对象方法。
注意：window下的一个特殊属性window.name
不建议在全局下var name
2.window对象常见的事件
2.1-窗口加载事件
window.onload = function(){}
//或者
window.addEventListener("load",function(){});
window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图象、脚本文件、css文件等），就调用处理函数。
注意：window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。而window.addEventListener不存在冲突问题。
document.addEventListener('DOMcontentLoaded',function(){})
DOMcontentLoaded事件触发时，仅当DOM加载完成，不包括样式表、图片、flash等。(IE9以上才支持)
如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适。
2.2-调整窗口大小事件
window.onresize = function (){}
//或者
window.addEventListener("resize",function(){});
1.只要窗口大小发生像素变化，就会触发这个事件。
2.我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度。
3.定时器
3.1-两种定时器
setTimeout(function(){}，ms);
//和【ms为毫秒，毫秒数到了才调用函数，ms可以省略默认为0】
setInterval(function(){}，ms)
| setTimeout | setInterval |
|---|---|
| 调用一次 | 一直调用 |
3.2-回调函数
setTimeout()我们也称为回调函数callback
普通函数都是按代码顺序直接调用的。
3.3-清除定时器clearTimeout()
clearTimout(定时器名称)
3.4-清除定时器clearInterval()
<button class="begin">开启定时器</button>
<button class="stop">停止定时器</button>
<script>
var begin = document.querySelelctor(".begin");
var stop = document.querySelector(".stop");
var timer =null;
begin.addEvevtListener("click",function(){
timer = setInterval(function(){
consloe.log("你好吗");
},1000);
stop.addEventListener("click",function(){
clearInterval(timer);
})
});
</script>
案例：发送验证短信，60s后才可再次点击
手机号码<input type="number"><button>发送</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener("click",function(){
btn.disabled = ture;
var timer = setInterval(function(){
if(time == 0){//清除定时器
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
time =60;
}else{
btn.innerHTML = '还剩下' + time + '秒';
time--;
}
},1000);
})
</script>
3.5-this指向
一般情况下this的最终指向是调用它的对象
1.全局作用域或者普通函数中this指向全局对象window（注意定时器的this指向window）
console.log(this);
function fn(){ console.log(this); }
2.方法调用中，谁调用this指向谁
var o = {
sayHi:function(){
console.log(this);//指向o
}
}
o.sayHi();//o调用
3.构造函数中this指向构造函数的实例
function fun(){
console.log(this);//指向实例fun
}
var fun = new Fun();
4.JS执行机制
4.1-JS是单线程
js语言一大特点就是单线程 。就是说，同一个时间只能做一件事。如对某个DOM进行添加删除菜操作，不能同时进行，应该先添加后删除。
单线程就意味着，所有任务需要排队，前一个任务结束才会执行后一个任务。这样所导致的问题是:如果JS执行时间过长，会造成页面渲染不连贯，导致页面渲染加载堵塞的感觉。
4.2-同步和异步
为了解决这个问题，利用多核CPU的计算能力，HTML5提出web worker标准，允许javasript脚本创建多个线程。于是js出现了同步和异步。
同步
前一个任务结束后再执行后一个任务，程序的执行顺序与任务顺序是一致的、同步的。
比如做饭的同步做法：先烧水煮饭，等水开了，再去切菜，炒菜。
异步
在做一件事的同时还可以处理其他事情。
如在烧水的同时，切菜，炒菜。
console.log(1);
setTimeout(function(){
console.log(3);
},0);
console.log(2);
//代码执行结果是123
同步任务
同步任务都在主线程上执行，形成一个执行栈。
如上述代码console.log()、setTimeout()在执行栈上，而setTimeout内的function属于异步任务。
异步任务
js的异步是通过回调函数实现的
一般而言，异步任务有以下三种类型：
1.普通事件，如click、resize
2.资源加载，如load、error等
3.定时器，包括setInterval、setTimeout等
异步任务相关回调函数添加到任务队列中(任务队列也称消息队列）
js执行机制
1.先执行执行栈中的同步任务。
2.异步任务(回调函数）放入任务队列中
3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
5.location对象
| Location对象方法 | 返回值 |
|---|---|
| Location.assign() | 跟href一样，可以跳转页面（重定向），记录历史可以后退 |
| Location.replace() | 替换当前页面，因为不记录历史，所以不能后退页面 |
| location.raload | 刷新，重新加载页面 |
6.navigator对象
navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值。
下面前端代码可以判断用户哪个终端打开页面
if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))){
window.location.href="";//手机
}else{
window.location.href="";//电脑
}
一般情况下，该功能是服务端做的
7.history对象
window对象给我们提供了一个history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL
| history对象方法 | 作用 |
|---|---|
| back() | 可以后退功能 |
| forward() | 前进功能 |
| go(参数) | 1:前进，-1:后退 |
var btn = ducument.querySelector('button');
btn.addEventListener(click'',function(){
//history.forward();
history.go(1);
})
标签：function,异步,定时器,对象,介绍,window,BOM,详细 来源： https://blog.csdn.net/qq_44449938/article/details/120835048
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。