（记录自己学习JS的相关学习资料和知识，如侵权可删！）
BOM概念
BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，DOM最初是Netscape浏览器标准的一部分。
DOM和BOM对比：
DOM：
● 文档对象模型
● DOM把文档当做一个对象来看待
● DOM的顶级对象是document
● DOM主要学习的是操作页面元素
● DOM是W3C标准规范
BOM：
● 浏览器对象模型
● BOM把浏览器当做一个对象来看待
● BOM的顶级对象是window
● BOM学习的是浏览器窗口交互的一些对象
● BOM是浏览器厂商在各自浏览器上定义的，兼容性较差
BOM比DOM更大，它包含DOM。
window由以下组成：
① document
② location
③ navigation
④ screen
⑤ history
window对象是浏览器的顶级对象，它具有双重角色。
- 它是JS访问浏览器窗口的一个接口。
- 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
在调用的时候可以省略window，很多对话框都属于window对象方法，如 alert( ) 、prompt( )等。
注意：window下的一个特殊属性 window.name
定时器setTimeout（调用一次）
语法规范： window.setTimeout(调用函数，延时时间毫秒)
- 这个window在调用的时候可以省略。
- 这个延时时间单位是毫秒 可以省略，若省略则默认为0 立即执行。
- 这个调用函数可以 ① 直接写函数 ② 函数名 ③ ‘函数名（）。
- 页面中可能有很多的定时器，经常给定时器加标识符（名字）。
清除定时器clearTimeout
window.clearTimeout(timeout ID)
clearTimeout()方法取消先前通过调用setTimeout()建立的定时器。
注意：
- window 可以省略。
- 里面的参数就是定时器的标识符（名字）。
定时器setInterval（重复调用）
语法规范： window.setInterval(调用函数，延时时间毫秒)
- 这个window在调用的时候可以省略。
- 这个延时时间单位是毫秒 可以省略，若省略则默认为0 立即执行，不省略则表示每隔多少毫秒就自动调用这个函数（重复调用）。
- 这个调用函数可以 ① 直接写函数 ② 函数名 ③ ‘函数名（）。
- 页面中可能有很多的定时器，经常给定时器加标识符（名字）。
清除定时器clearInterval
window.clearInterval(interval ID)
clearInterval()方法取消先前通过调用setInterval()建立的定时器。
注意：
- window 可以省略。
- 里面的参数就是定时器的标识符（名字）。
回调函数
需要等待时间/等待事件发生后，时间到了/事件发生了才去调用的函数，称为回调函数。
eg（等待时间）: setTimeout()
eg(等待时间发生后)： element.onclick = function(){} 或者 element.addEventListener('click',fn)；里面的函数是回调函数。
this的指向问题
this指向问题 一般情况下this最终指向的是哪个调用它的对象。
- 全局作用域或者普通函数中this指向全局对象window( 注意定时器里面的this指向window)。
- 方法调用中谁调用this就指向谁。
- 构造函数中this指向构造函数的实例。
4 JS执行机制
JS是单线程：JavaScipt语言的一大特点是单线程，就是同一时间只能做一件事。
同步和异步
为了解决如果JS执行时间过长，造成页面渲染不连贯，导致页面渲染加载阻塞的问题，利用多核CPU的计算能力，HTML5提出Web Woker标准，允许JavaScript脚本创建多个线程。于是，JS中出现了同步和异步。
同步：必须按顺序执行，同一时间只能做一件事情。（个人理解）
异步：可以不按顺序执行，同一时间可以执行多个事情。（个人理解）
同步任务
同步任务都在主线程上执行，形成一个执行栈。
异步任务
JS的异步是通过回调函数实现的。
一般而言，异步任务有以下三种类型：
1、 普通事件，如 click 、 resize 等。
2、 资源加载，如 load 、 error 等。
3、 定时器，包括 setInterval 、 setTimeout等。
异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）。
JS执行机制步骤：
- 先执行执行栈中的同步任务。
- 异步任务（回调函数）放入任务队列中。
- 一旦执行栈中的所有同步任务执行完毕，系统会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
由于主线程不断的重复获得任务、执行任务、再获得任务、再执行，所以这种机制被称为事件循环（event loop）。
offset 与 style 区别
offset
● offset 可以得到任意样式表中的样式值
● offset 系列获得的数值是没有单位的
● offsetWidth 包含 padding + border + width
● offsetWidth 等属性是只读属性，只能获取不能赋值
● 想要获取元素大小位置，用offset更合适
style
● style 只能得到行内样式表中的样式值
● style.width 获得的是带有单位的字符串
● style.width 获得不包含padding 和 border 的值
● style.width 是可读写属性，可以获取也可以赋值
● 想要给元素更改值，用style更合适
立即执行函数
立即执行函数： 不需要调用，立马能够自己执行的函数。
写法：（可以传参进去）（第二个小括号可看作是调用函数）
① (function( ) { } )（）
② (function( ) { } ( ) )
作用： 创作一个独立的作用域， 避免了命名的冲突问题。
offset client scroll三大系列对比
element.offsetWidth 返回自身包括padding、边框、内容区的宽度，返回数值不带单位。
element.clientWidth 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位。
element.scrollWidth 返回自身实际的宽度，不含边框，返回数值不带单位。
- offset 系列经常用于获得元素位置 offsetLeft offsetTop
- client 经常用于获取元素大小 clientWidth clientHeight
- scroll 经常用于获取滚动距离 scrollTop scrollLeft
- 注意页面滚动的距离通过 window.pageXoffset 获得
mouseenter 和 mouseover 的区别（面试常考）
● mouseover 鼠标经过自身盒子和子盒子都会触发。
● mouseenter 只会在鼠标经过自身盒子时触发。
● 因为 mouseenter 不会冒泡。
● 跟 mouseenter 搭配鼠标离开 mouseleave 同样不会冒泡。
动画实现原理
核心原理： 通过定时器 setInterval( ) 不断移动盒子位置。
实现步骤：
- 获得盒子当前位置
- 让盒子在当前位置加上1个移动距离
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
- 注意此元素需要添加定位，才能使用 element.style.left
