js作用域概念和js预解析规则/变量提升

什么是作用域？

• 作用域可以理解为：变量的作用域（变量作用的范围）
• 在js中，对象和函数同样也是变量。

什么是变量提升？

• 变量提升/hoisting：不管 var function 声明写在作用域的哪一行，它们的创建和初始化都会被提升到作用域的顶端。
• var 声明有三步：创建/注册，初始化，赋值
• function 声明只有两步：创建/注册，初始化

作用域类型

1. 局部作用域：可以理解为函数作用域，每个函数创建一个新的作用域。
2. 全局作用域：script标签、js文件可以理解为全局作用域

预解析规则

• 浏览器/js解析器（它的运行简单的分为两步）
• 第一步：预解析/变量提升，js解析器先找 var、function、参数 等声明
• 第二步：逐行解读代码（var遇到表达式赋值）

1.预解析/变量提升，js解析器先找 var、function、参数 等声明

1. 找到 var 的时候，并不会去读 = 后面的值，而是先创建并初始化为 undefined 放到仓库里，所以所有的 var变量 在代码正式运行之前，都提前初始化了一个值：undefined。
2. 找到 function 的时候，它跟 var 的区别是：var 创建并初始化变量为 undefined 还没有给变量赋值，而 function 创建并直接初始化为了一个 function，所以 function 在代码正式运行之前已经是一个 function 了而不是一个 undefined，function 创建的时候遇到重名的只留下一个，var变量 和 function 重名只留下 function。

console.log(a);  // undefined
console.log(fn); // function fn(params) { }
var a = 'Rica';
function fn(params) { };
// 不会先执行 console.log() 而是先找到 var a，function fn， 
// 创建 a 并初始化为 undefined，创建 fn 并初始化为 function fn(params) { }，然后放到仓库里。

2.逐行解读代码

1. 第一步把信息预解析到一个仓库里，逐行执行代码时会先在这个仓库中找信息。

console.log(b); // 打印的是 undefined 而不是"1"，因为执行的代码的时候先从仓库中读到 b = undefined
var b = 1;
console.log(b); // 1

2. 遇到 = 就会给仓库里面的var变量赋值，如：a = 1。

console.log(test);		// function test (){ console.log(4); }
var test = 1;
console.log(test);		// 1
function test() { console.log(2); }
console.log(test);		// 1
var test = 3;
console.log(test);		// 3
function test() { console.log(4); }
console.log(test);		// 3

console.log(typeof test);       // number

test();                         // Uncaught TypeError: test is not a function

相关

• js作用域二：作用域链的简单理解
• js作用域三：let const 有变量提升吗？