BOM
BOM(Browser Object Model)是浏览器对象模型
- window 对象是一个全局对象,也可以说是 JavaScript 中的顶级对象
- 像
document、alert()、console.log()
这些都是 window 的属性,基本 BOM 的属性和方法都是 window 的 - 所有通过 var 定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法
- window 对象下的属性和方法调用的时候可以省略 window
定时器 - 延时函数
-
JavaScript 内置的一个用来让代码延迟执行的函数,叫 setTimeout
-
语法:
setTimeout(回调函数, 等待的毫秒数)
-
setTimeout 仅仅只执行一次,所以可以理解为就是把一段代码延迟执行,可以省略window
-
清除延时函数:
let timeout = setTimeout(回调函数, 等待的毫秒数) clearTimeout(timeout)
-
延时器需要等待,所以后面的代码先执行
-
每一次调用延时器都会产生一个新的延时器
和定时器 setInterval()
的区别:执行的次数不同
- 延时函数:执行一次
- 间歇函数:每隔一段时间就执行一次,除非手动清除
js 执行机制
同步任务
所有任务都到主线程上,形成一个执行栈
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/fd2d0dbc8ae18e834cef71a48e8a9c22.png)
异步任务
JS 的异步是通过回调函数实现的,一般而言,异步任务有以下三种类型:
- 普通事件,如 click、resize 等
- 资源加载,如 load、error 等
- 定时器,包括 setInterval、setTimeout 等
异步任务相关添加到任务队列中(任务队列也称为消息队列)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/83fcc5053c688f0b778f1982aa04d792.png)
事件循环
js 执行机制如下:
- 先执行执行栈中的同步任务
- 异步任务放入任务队列中
- 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a91ad2a14fc26808e113e14968ce0756.png)
具体的执行流程如下:
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环(event loop)
location 对象
location 对象拆分并保存了 URL 地址的各个组成部分
常用属性和方法:
href
属性获取完整的 URL 地址,对其赋值时用于地址的跳转search
属性获取地址中携带的参数,符号 ?后面部分hash
属性获取地址中的啥希值,符号 # 后面部分reload
方法用来刷新当前页面,传入参数 true 时表示强制刷新
navigator 对象
navigator 对象下记录了浏览器自身的相关信息
常用属性和方法:属性 userAgent
检测浏览器的版本及平台
history 对象
history 对象主要管理历史记录, 该对象与浏览器地址栏的操作相对应,如前进、后退、历史记录等
常用属性和方法:
back()
:导航到历史记录中的上一个页面,相当于点击浏览器的返回按钮forward()
:导航到历史记录中的下一个页面,相当于点击浏览器的前进按钮go(n)
:导航到相对于当前页面的指定位置,其中n
可以是正数(向前导航)或负数(向后导航)
本地存储
本地存储介绍:
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面刷新不丢失数据
- 容量较大,sessionStorage 和 localStorage 约 5M 左右
分类
localStorage
-
作用:可以将数据永久存储在本地(用户的电脑), 除非手动删除,否则关闭页面也会存在
-
特点:
- 可以多窗口(页面)共享(同一浏览器可以共享)
localStorage
是基于域名和协议的,子域名可以共享数据,但是不同的网址(域名和协议组合)会有不同的localStorage
存储空间,它们之间是相互隔离的,不能共享数据- 以键值对的形式存储使用
- 本地存储只能存储字符串数据类型
-
语法:
- 存储数据:
localStorage.setItem(key, value)
- 获取数据:
localStorage.getItem(key)
- 删除数据:
localStorage.removeItem(key)
- 存储数据:
浏览器查看本地数据:
sessionStorage
生命周期为关闭浏览器或标签页窗口,其他用法跟 localStorage
基本相同
存储复杂数据类型
- 问题:本地只能存储字符串,无法存储对象
- 解决:需要将对象转换成 JSON 字符串,再存储到本地
- 语法如下:
JSON.stringify(对象)
JSON.parse(JSON字符串)