// 2问
      console.log(num); // undefined  坑 1
      var num = 10;
      // 相当于执行了以下代码
      // var num;
      // console.log(num);
      // num = 10;

      fn();
      // 3问
      function fn() {
        console.log(11);
      }

      // 4问
      fun(); // 报错  坑2
      var fun = function () {
        console.log(22);
      };
      // 函数表达式 调用必须写在函数表达式的下面
      // 相当于执行了以下代码
      // var fun;
      // fun();
      // fun = function() {
      //         console.log(22);

      //     }

DOM

文档对象模型（Document Object Model，简称 DOM ），通过这些 DOM 接口可以改变网页的内容、结构和样式，改变操作有 增删改查插。

DOM树

获取元素的方法

事件高级

注册和解绑事件

DOM事件流

事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。

比如我们给一个div 注册了点击事件：
DOM 事件流分为3个阶段：
1. 捕获阶段由外往内
2. 当前目标阶段
3. 冒泡阶段由内往外

事件捕获：网景最早提出，由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。

事件冒泡： IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程。

注意
1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
2. onclick 和 attachEvent 只能等到冒泡阶段。
3. addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕
获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
4. 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
5. 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave

BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

和DOM的区别

BOM 比 DOM 更大，它包含 DOM。

window 对象的常见事件

window.onload

JS执行机制

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

为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步。

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

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

具体的执行流程

1. 先执行执行栈中的同步任务。
2. 异步任务（回调函数）放入任务队列中。
3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（event loop）

彻底理解js是单线程的_前端精髓的博客-CSDN博客_js单线程

例子

console.log(1);
 setTimeout(function () {
 console.log(3);
 }, 0);
 console.log(2);

实际执行流程：

console.log(1);
console.log(2);
setTimeout(function () {
 console.log(3);
 }, 0);

资料来源：黑马

JS概览 (JS基础 DOM BOM)

JavaScript

JS基础

JS数据类型

函数

变量的作用域

作用域链

预解析

DOM