标签：function console 对象 简介 window BOM setTimeout location
文章目录
前言
提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。
一、什么是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>
示意图：
标签：function,console,对象,简介,window,BOM,setTimeout,location 来源： https://blog.csdn.net/weixin_51155543/article/details/117375429
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。