JS的作用域与执行过程

一、作用域

作用域类型：全局作用域、函数作用域、块级作用域（ES6）

1.全局作用域
(1) 全局作用域在页面打开时被创建,页面关闭时被销毁
(2) 编写在script标签中的变量和函数,作用域为全局，在页面的任意位置都可以访问到
(3) 在全局作用域中有全局对象window,代表一个浏览器窗口,由浏览器创建,可以直接调用
(4) 全局作用域中声明的变量和函数会作为window对象的属性和方法保存
(5) window对象的属性和方法可以直接调用,如window.an() 可以写为 an()

2.函数作用域
(1) 调用函数时,函数作用域被创建,函数执行完毕,函数作用域被销毁
(2) 每调用一次函数就会创建一个新的函数作用域,他们之间是相互独立的
(3) 在函数作用域中可以访问到全局作用域的变量,在函数外无法访问到函数作用域内的变量
(4) 在函数作用域中访问变量、函数时,会先在自身作用域中寻找,若没有找到,则会到函数的上一级作用域中寻找,一直到全局作用域
(5) 在函数作用域中也有声明提前的特性,对于变量和函数都起作用,此时函数作用域相当于一个小的全局作用域,详细声明提前请看声明提前部分
(6) 在函数作用域中,不使用变量关键字声明的变量,在赋值时会往上一级作用域寻找已经声明的同名变量,直到全局作用域时还没找到,则会成为window的属性
(7) 在函数中定义形参,等同于声明变量，如

function an(name){
    console.log(name); // 输出 undefined
}
an();

等于

function an(){
    var name
    console.log(name); // 输出 undefined
}
an();

3.块级作用域
块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。
（1）允许块级作用域任意嵌套
（2）外层作用域无法读取内层作用域的变量
（3）内层作用域可以定义外层作用域的同名变量
（4）函数本身的作用域在其所在的块级作用域之内

4.var、let、const的区别
（1）var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问，有变量提升
（2）let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问，无变量提升，不可以重复声明。
（3）const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改，无变量提升，不可以重复声明。

二、执行过程

如上图我们可知: javascript解析分为：语法解析阶段 和 运行阶段，其中语法解析阶段又分为2种，分别为: 词法分析和语法分析。
运行阶段分为：预解析 和 运行阶段。
1.语法解析
1.1词法分析
词法分析会将js代码中的字符串分割为有意义的代码块，这些代码块我们可以称之为 “词法单元”。比如简单的如下代码:
var a = 1; 那么这行代码会被分为以下词法单元：var、a、=、1 那么这些零散的词法单元会组成一个词法单元流进行解析。
1.2语法分析
语法分析在这个过程中会将词法单元流转换成一颗 抽象语法树(AST)。比如 var a = 1;解析成AST函数代码如下：

流程是：解析-转换-代码生成

2.运行阶段
2.1预解析
预解析指的是：在js文件或script里面的代码在正式开始执行之前，会进行一些解析工作。
比如上在全局中寻找var关键字声明的变量和通过function关键字声明的函数。
找到全局变量或函数后，我们会对该进行作用域提升，但是在变量提升声明的情况下不会赋值操作，因此它的默认值是undefined。
通过声明提升，对于函数来讲，函数可以在声明函数体之上进行调用。变量也可以在赋值之前进行输出，只是变量输出的值为undefined而已。

预编译需要注意如下几个问题：

1. 预编译首先是全局预编译，函数体未调用时是不进行预编译的。
2. 只有var 和 function 声明会被提升。
3. 在所在的作用域会被提升，不会扩展到其他的作用域。
4. 预编译后会顺序执行代码。
   2.2运行阶段
   在浏览器环境中，javascript引擎会按照 <script /标签代码块从上到下的顺序加载并立即解释执行