BOM知识点

什么是BOM

• BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。
• BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
• BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

window对象是浏览器的顶级对象，它具有双重角色。

1. 它是JS访问浏览器窗口的一个接口。
2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
3. 在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert)、prompt()等。
   注意: window下的一个特殊属性window.name

页面加载事件

第一种: load

window . onload = function() { }    //传统方法
//或者
window.addEventListener ("load" , function () {});   

window.load 是窗口(页面)加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。
注意:
1.有了window.load就可以把JS代码写到页面元素的上方，因为load是等页面内容全部加载完毕，再去执行处理函数。
2. window.load传统注册事件方式只能写一次，如果有多个，会以最后一个window.load为准。
3.如果使用addEventListener则没有限制

第二种：`DOMContentLoaded`

document.addEventListener ('DOMContentLoaded', function(){})

• DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
• IE9以上才支持!!!
• 如果页面的图片很多的话，从用户访问到onloac触发可能需要较长的时间,交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适。

调整窗口大小事件

window.onresize = function() {}
window.addEventListener ("resize", function () {});

window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数。
注意:

• 只要窗口大小发生像素变化，就会触发这个事件。
• 我们经常利用这个事件完成响应式布局。比如：window.innerWidth当前屏幕的宽度（当前页面宽度）

定时器（两种）
window对象给我们提供了2个非常好用的方法-定时器。
第一个：setTimeout()
第二个：setlnterval()

setTimeout()用法

setTimeout(调用函数，延迟的毫秒数);

setTimeout(这个调用函数我们也称为回调函数callback
注意:

• window可以省略。
• 这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐
• 延迟的毫秒数省略默认是0，如果写，必须是毫秒。
• 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

停止setTimeout()定时器

clearTimeout (timeoutID)

clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器。
注意:
timeout就是需要停止的定时器的名字

setlnterval()的用法

setlnterval(回调函数，间隔的毫秒数) ;

注意:
setlnterval() 是第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行—次。

停止setlnterval()定时器

clearInterval (intervalID) ;

注意:
intervalID就是需要停止的定时器的名字
循环定时器的名字应该在函数外面声明一个空值变量，然后在再函数里面赋值

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

现阶段，我们先了解一下几个this指向

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

JS 是单线程
JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。
这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

同步任务和异步任务
同步任务
前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。


异步任务
你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

JS中所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

同步任务指的是：
在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

异步任务指的是：
不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取出异步任务放入主线程执行。



同步任务
同步任务都在主线程上执行，形成一个执行栈。

异步任务

• JS的异步是通过回调函数实现的。
• —般而言，异步任务有以下三种类型:
• 1、普通事件，如click、resize等
• 2、资源加载，如load、error等
• 3、定时器，包括setlnterval、setTimeout等
• 异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列)。

location对象

什么是location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。

URL

统一资源定位符(Uniform ResourceLocator, URL)是互联网上标准资源的地址。互联网上的每个文件都有—个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL的一般语法格式为：

protocol : // host [ :port]/path/ [?query]#fragment
https://www.so.com/s?ie=utf-8&src=360chrome_drag&q=%E5%9C%A8%E8%BF%99%E9%87%8C%E6%8F%92%E5

location 对象的属性