JavaScript预解析

---

预解析

一、什么是预解析

预：在所有js代码执行前

解析：对整篇js代码进行通读并解释（浏览器在解析）

二、解析了什么内容

var 声明的变量

var num

声明式函数（不是赋值式函数）

function fn( ) { }

三、怎么解析的

var 声明的变量

在所有 js 代码执行前，先把变量声明好再开始执行代码

案例1

/* var num = 100 这一行代码包含了两个操作 1. 声明变量 var num 2. 变量赋值 num = 100 在这两个操作里面 声明变量那一步是在预解析的时候就完成的，在所有js代码开始执行之前, 就已经做好了 变量赋值那一步是在真正执行代码的时候才开始做的 */ var num = 100

案例2

/* 拆解代码的执行过程 1、预解析的过程：在所有 js 代码执行前，先把变量声明好 var num 2、真正执行所有的js代码 console.log(num) // 其实就是有这个变量，但是还没有赋值，就是undefined num = 100 */ console.log(num) // undefined var num = 100

声明式函数

在所有 js 代码执行前，先把函数名声明好，并且给这个函数赋值为一个函数再开始执行代码

案例1

/* function fn() {} 解析一下这一行代码 1. 预解析的过程 告诉浏览器, fn 是一个可以使用的名字 并且 fn 这个名字是一个函数 2. 真正的代码开始执行 */ function fn() {}

案例2

/* 1. 预解析 告诉浏览器 fn 这个名字被声明过了，可以使用 并且 fn 还是一个函数 function fn() { console.log('我是 fn 函数') } 2. 真正的开始执行所有js代码 fn() */ fn() function fn() { console.log('我是 fn 函数') // 我是 fn 函数 }

---

赋值式函数的预解析

赋值式函数不会按照声明式函数的预解析规则进行

而是按照 var 的预解析规则进行

var fn = function ( ) { }

/* 分析代码执行过程 fn() var fn = function () {} 1. 进行预解析 var fn 就告诉浏览器这个 fn 被声名过了, 但是并没有给他赋值为一个函数 2. 代码开始执行 fn() // 这行代码执行的时候, fn 还是一个没被赋值的状态, 是个 undefined fn = function () {} 所以赋值式函数只能后调用 */ fn() // 控制台报错：fn is not a function var fn = function () { console.log('我是 fn 函数') }

---

预解析的无节操

不管 if 条件是不是成立，写在里面的代码都会进行预解析

只是条件不成立的时候，不会执行 { } 里面的赋值操作

console.log(age) // undefined if (2 > 1) { var age = 18 } console.log(age) // 18 /* 分析代码执行过程 1. 先进行预解析 var age 告诉浏览器, age 这个变量被声名过, 可以使用 2. 开始真正的代码执行 console.log(age) // age 还没有被进行赋值, 就是 undefined if (2 > 1) { age = 18 } console.log(age) // age 已经被赋值过了, 就是 18 */ console.log(age) // undefined if (2 < 1) { var age = 18 } console.log(age) // undefined /* 解析代码执行过程 1. 预解析 - 不管 if 是否成立 var age 2. 代码执行 console.log(age) // 没有进行赋值, 就是 undefined if (2 < 1) { age = 18 } console.log(age) // 因为 if 条件为 false, 所以 {} 里面的代码没有执行，就是 undefined */

当在函数内部的时候, return 后面的代码虽然不会执行

但是会进行预解析

function fn() { console.log(num) // undefined return var num = 100 } fn() 预解析小案列 var a = b a = 10 b = 20 console.log(a) console.log(b) /* 代码执行过程 1. 预解析 var a 告诉浏览器 a 是一个可以使用的变量 2. 代码执行 a = b // 使用 b 这个变量给 a 进行赋值, 但是 b 变量并没有被声名过, 报错:b is not defined a = 10 b = 20 console.log(a) console.log(b) */

---

预解析的优先级

当你定义一个变量和一个声明式函数的时候

如果变量名和函数名充满，在进行预解析的时候，以函数为准

console.log(num) // ƒ num() { console.log('我是一个函数') } var num = 100 console.log(num) // 100 function num() { console.log('我是一个函数') } console.log(num) // 100 /* 1. 预解析 告诉浏览器 num 这个变量可以使用 告诉浏览器 num 这个变量可以使用, 并且赋值为一个函数 当预解析结束的时候 num 就是一个函数 2. 真正的代码开始执行 console.log(num) // 此时因为刚刚预解析结束, 所以 num 就是一个函数 num = 100 // 给 num 重新赋值, 赋值为 100, 那么就不在是一个函数了 console.log(num) // 因为已经给 num 从新赋值完毕了, 打印出来 100 console.log(num) // 因为已经给 num 从新赋值完毕了, 打印出来 100 */ console.log(num) // 打印 num 这个变量的值，即：num 就是一个函数 num(100) // 调用 num 函数, 传递一个 100 作为实参 var num = 100 console.log(num) // 100 num(200) // 报错：num is not a function, 因为到这里 num 已经不是函数了, 是 100 这个数值 function num(a) { console.log(a) // 打印 a 形参, 接收的是 num() 的时候传递进来的实参100 console.log('我是一个函数') // console.log(a) } console.log(num)