JavaScript预解析

预解析

（1）JavaScript 代码的执行是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器执行 JavaScript 代码的时候，分为两个过程：预解析过程和代码执行过程。

（2）预解析过程：

• 把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。
• 把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。
• 先提升 var，再提升 function。

（3）JavaScript 的执行过程：在预解析之后，根据新的代码顺序，从上往下按照既定规律执行 js 代码。

变量提升声明

（1）在预解析过程中，所有定义的变量，都会将声明的过程提升到所在的作用域最上面，在将来的代码执行过程中，按照先后顺序会先执行被提升的声明变量过程。

（2）提升过程中，只提升声明过程，不提升变量赋值，相当于变量定义未赋值，变量内存储 undefined 值。

（3）因此，在 js 中会出现一种现象，在前面调用后定义的变量，不会报错，只会使用 undefined 值。

console.log(num); // 输出 undefined
var num = 10;

// 相当于执行以下代码
var num;  // 不提升赋值操作
console.log(num);  // 所以输出undefined
num = 10;

函数声明提升

（1）在预解析过程中，所有定义的函数，都会将声明的过程提升到所在的作用域最上面，在将来的代码执行过程中，按照先后顺序会先执行被提升的函数声明过程。

（2）在预解析之后的代码执行过程中，函数定义过程已经在最开始就会执行，一旦函数定义成功，后续就可以直接调用函数。

（3）因此，在 js 中会出现一种现象，在前面调用后定义的函数，不会报错，而且能正常执行函数内部的代码。

（4）应用：函数声明提升可以用于调整代码的顺序，将大段的定义过程放到代码最后，但是不影响代码执行效果。

var num = 10;
fun();
function fun() {
  console.log(num); // 输出undefined
  var num = 20;

// 相当于执行以下代码
var num;
function fun() {
  var num; // 提升到当前作用域
  console.log(num); // 根据作用域链就近原则 找var num; num未定义，所以输出undefined
  num = 20;
}
num = 10;
fun();

提升顺序

（1）预解析过程中，先提升 var 变量声明，再提升 function 函数声明。

（2）假设出现变量名和函数名相同，那么后提升的函数名标识符会覆盖先提升的变量名，那么在后续代码中出现调用标识符时，内部是函数的定义过程，而不是 undefined。

（3）如果调用标识符的过程在源代码函数和变量定义后面，相当于函数名覆盖了一次变量名，结果在执行到变量赋值时，又被新值覆盖了函数的值，那么在后面再次调用标识符，用的就是变量存的新值。

（4）建议：不要书写相同的标识符给变量名或函数名，避免出现覆盖。

函数表达式的提升

（1）在预解析过程中，函数表达式进行的是变量声明提升，而不是函数声明提升。提升后变量内部存的是一个 undefined。在前面进行函数方法调用，数据类型会提示错误。

（2）建议：定义函数时，最好使用 function 关键字定义方式，这样函数声明提升可以永远生效。

// 函数表达式采取表达式赋值的方式，没法提升函数
// 函数表达式调用必须写在函数表达式的下面
fun(); // 报错
var fun = function () {
  console.log(22);
};

// 相当于执行以下代码
var fun;
fun(); // 从上往下执行 ，fun() 函数调用看之前，之前没有声明fun函数，所以报错
fun = function () {
  console.log(22);
};

IIFE自调用函数

（1）IIFE：immediately-invoked function expression，叫做即时调用的函数表达式，也叫做自调用函数，表示函数在定义时就立即调用。

（2）函数调用方式：函数名或函数表达式的变量名后面加 () 运算符。

（3）函数使用函数表达式形式可以实现立即执行，原因是因为函数表达式定义过程中，将一个函数矮化成了一个表达式，后面加()运算符就可以立即执行。

// 函数表达式方式，可以在定义时被立即执行
var foo = function () {
	console.log(2);
}();

（4）将函数矮化成表达式就可以实现IIFE。

函数矮化成表达式方法：

（1）可以让函数参与一些运算，也就是说给函数前面加一些运算符。

• 数学运算符：+ - ()

• 逻辑运算符：！非运算

（2）IIFE 结构可以关住函数的作用域，在结构外面是不能调用函数的。

（3）IIFE 最常用的是 () 运算符，而且函数可以不写函数名，使用匿名函数。

// 因为IIFE 结构可以关住函数的作用域，在结构外面是不能调用函数的，所以没必要写函数名
+ function (a) {
	console.log(a);
}(1);
- function (a) {
	console.log(a);
}(1);
! function (a) {
	console.log(a);
}(1);
// 最常用的 IIFE 结构
(function (a) {
	console.log(a);
})(1);

f1();
console.log(c); // 输出 9
console.log(b); // 输出 9
console.log(a); // 报错
function f1() {
  var a = (b = c = 9);
  console.log(a); // 输出 9
  console.log(b); // 输出 9
  console.log(c); // 输出 9

/* 分析：
var a = b = c = 9; 相当于 var a=9; b=9; c=9; 其中b和c当全局变量看；
若想要集体声明 应该写成 var a = 9,b = 9,c = 9; 相当于 var a = 9;var b = 9;var c = 9;*/
    
// 分析此案例相当于执行以下代码
function f1() {
  var a;
  a = b = c = 9;
  console.log(a); // 输出 9
  console.log(b); // 输出 9
  console.log(c); // 输出 9
}
f1();
console.log(c); // 输出 9 b和c是全局变量，全局变量任何地方都可以使用，即使是在函数里面写的
console.log(b); // 输出 9
console.log(a); // 报错  a属于局部变量，外面不可以调用