JS的BOM对象与执行机制

一、何为BOM

BOM（browser object model）浏览器对象模型

1、关于BOM

1. 核心是window对象，所有的全局变量和全局函数都被归在了window上 2.BOM是
2. Browser Object Model的缩写，是浏览器对象模型

2、BOM的构成

2、window对象

1. window对象：BOM的核心对象是window，它表示浏览器的一个实例
2. 在浏览器中，window对象有双重角色，它既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。 因此，所有全局作用域中声明的变量、函数都会变成window对象的属性和方法。

3、window常见事件

页面（窗口）加载事件(2种)

第一种

window.onload = function(){}

或

window.addEventListener("load",function(){})

window.onload 是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文 件、CSS 文件等), 就调用的处理函数。

第二种

document.addEventListenter("DOMContentLoaded",function(){})

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片、flash等等

调整窗口大小事件

window.onresize = function(){}

或

window.addEventListener("resize",function(){})

4、定时器（两种）

• setTimeout（）
• setInterval（）

4.1、setTimeout()

window.setTimeout(function(){},[延迟毫秒数])

setTimeout就像是一个定时炸弹，当设置的时间到后才会执行相应的函数

也称回调函数 callback

注意:

1. window可以省略
2. 此方法可以直接写函数,或者写函数名或者采取字符串函数名()三种形式 .
3. 延迟的毫秒数省略默认是零,如果写,必须是毫秒
4. 通常要给计时器赋值一个标识符

回调,就是回头调用的意思.上一件事干完,再回头调用这个函数.

例如:定时器中的调用函数,事件处理函数

<script>
    // 回调是匿名函数
    setTimeout(function () {
        alert("要爆炸了")
    }, 2000)

    //回调是有名函数
    var time = setTimeout(callback, 6000)
    function callback() {
        alert('又炸了')
    }
</script>

4.2、停止计时器

window.clearTimeout(timeID)

注意:

1. window可以省略
2. 里面的参数就是定时器的标识符

4.3、setInterval()

window.setInterval(回调函数,[间隔时间])

setInterval就像是一个闹钟每当过了设置的时间后就会重复调用一次函数

注意:

1. window可以省略
2. 此调用函数可以直接写函数、或写函数名或采取字符串函数名()三种形式
3. 间隔的毫秒数可以省略默认是0,表示每隔多少毫秒就自动调用这个函数
4. 通常给一个标识符
5. 第一次执行也是间隔毫秒数后执行,之后每个毫秒数就执行一次.

4.4、停止计时器

window.cleaInverval(IntervalID)

此方法取消了先前通过setInerval（）建立的定时器

注意：

1. window可以省略
2. 里面的参数就是定时器的标识符

<script>
    var count = 0
    var time = setInterval(function () {
        if (count == 10) {
            alert("结束了")
            clearInterval(time)
        } else {
            count++
            console.log(count)
        }
    }, 1000)

</script>

5、this指向问题

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情 况下this的最终指向的是那个调用它的对象。

1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
2. 方法调用中谁调用this指向谁
3. 构造函数中this指向构造函数的实例

<script>
    //全局作用域或者普通函数中this指向全局对象window
    console.log(this)
    function fn() {
        console.log(this)
    }
    fn()
    setTimeout(function () {
        console.log(this)
    }, 1000)
//方法调用中谁调用this指向谁
    var a = {
        name: function () {
            console.log(this)
        }
    }
    a.name()
    var btn = document.querySelector('button')
    btn.addEventListener('click', function () {
        console.log(this)
    })
//构造函数中this指向构造函数的实例
   function fn() {
        console.log(this)
    }
    var fun = new fn()
</script>

6、location对象

6.1何为location对象

location 对象存储了当前文档位置（URL）相关的信息，简单地说就是网页地址字符串。使用 window 对象的 location 属性可以访问。

6.2location对象属性

location 对象定义了 8 个属性，其中 7 个属性可以获取当前 URL 的各部分信息，另一个属性（href）包含了完整的 URL 信息，详细说明如下表所示。

属性	说明
href	声明了当前显示文档的完整 URL，与其他 location 属性只声明部分 URL 不同，把该属性设置为新的 URL 会使浏览器读取并显示新 URL 的内容
protocol	声明了 URL 的协议部分，包括后缀的冒号。例如：“http:”
host	声明了当前 URL 中的主机名和端口部分。例如：“www.123.cn:80”
hostname	声明了当前 URL 中的主机名。例如：“www.123.cn”
port	声明了当前 URL 的端口部分。例如：“80”
pathname	声明了当前 URL的路径部分。例如：“news/index.asp”
search	声明了当前 URL 的查询部分，包括前导问号。例如：“?id=123&name=location”
hash	声明了当前 URL 中锚部分，包括前导符（#）。例如：“#top”,指定在文档中锚记的名称

6.1location对象方法

方法	描述
assign()	加载新的文档（重定向）
reload()	重新加载页面,如果参数为true表示强制刷新
replace()	替换当前页面

<button>点击</button>
<script>
    document.querySelector('button').addEventListener('click', function () {
        //刷新页面
        location.reload()
        //替换页面
        location.replace('https://www.baidu.com/')
        //重定向页面
        location.assign('https://www.baidu.com/')
    })
</script>

7、 navigator对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返

回由客户机发送服务器的 user-agent 头部的值。

下面前端代码可以判断用户那个终端打开页面，实现跳转

 if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobil e|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|W indows Phone)/i)
        )) {
            window.location.href = "https://www.bilibili.com/";//手机 
        } else {
            window.location.href = "https://www.bilibili.com/";//电脑 
        }

8、js执行机制

8.1、JS 是单线程

• js的一大特点就是单线程，也就是说，同一个时间只能做一件事。
• 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。

8.2、同步任务和异步任务

关于javascriptjavascript是一门单线程语言，在最新的HTML5中提出了Web-Worker，但javascript是单线程这一核心仍未改变。所以一切javascript版的"多线程"都是用单线程模拟出来的，一切javascript多线程都是纸老虎！

2.javascript事件循环既然js是单线程，那就像只有一个窗口的银行，客户需要排队一个一个办理业务，同理js任务也要一个一个顺序执行。如果一个任务耗时过长，那么后一个任务也必须等着。那么问题来了，假如我们想浏览新闻，但是新闻包含的超清图片加载很慢，难道我们的网页要一直卡着直到图片完全显示出来？因此聪明的程序员将任务分为两类：

• 同步任务

  • 在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
  • 同步任务都在主线程上执行，形成一个执行栈

• 异步任务

  • 不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取出

    异步任务放入主线程执行。

  • js的异步是通过回调函数实现的，一般而言异步任务有以下三种类型

    • 普通事件：如click、resize等
    • 资源加载事件：如load、error等
    • 定时器：setInverval、settimeout等

  • 异步任务相关的回调函数添加到任务队列中

• 

**本质区别：**这条流水线上的各个流程执行循序不同

8.3、js执行机制中的事件循环

1. 先执行执行栈中的任务
2. 异步任务放入任务队列
3. 同步任务执行完毕后读取任务队列中的异步任务，于是被读取的异步任务结束等待状态进入执行栈并执行

由于主线不断的重复获取任务、执行任务，所以这种机制叫事件循环

件：如load、error等
- 定时器：setInverval、settimeout等

• 异步任务相关的回调函数添加到任务队列中

• [外链图片转存中…(img-w0zaAqjL-1607527843586)]

**本质区别：**这条流水线上的各个流程执行循序不同

8.3、js执行机制中的事件循环

1. 先执行执行栈中的任务
2. 异步任务放入任务队列
3. 同步任务执行完毕后读取任务队列中的异步任务，于是被读取的异步任务结束等待状态进入执行栈并执行

由于主线不断的重复获取任务、执行任务，所以这种机制叫事件循环