在前端中,JS预解析是一个重要知识点,JS解析器在运行JS代码分为两个步骤,分别是预解析和代码执行。
预解析
JS代码执行之前,浏览器第一步就是把当前作用域中所有使用
var和function声明的变量提前进行声明或者定义。只发生在当前作用域下,如果是函数内部变量或函数则在函数执行时才对函数内的变量及函数预解析。JS预解析又分为变量预解析与函数预解析
- 变量预解析:把所有的变量声明(
var)提升到当前作用域的最前面,注意是只提升变量声明但是不对变量进行赋值。- 函数预解析:把所有的函数声明(
function)提升到当前作用域的最前面,注意在声明时会同时对函数进行定义,但不会调用该函数。
示例:
- 变量预解析
// JS代码
console.log(num) // undefined
var num = 3
console.log(num) // 3
// 预解析执行顺序
var num
console.log(num) // undefind
num = 3
console.log(num) // 3
- 函数预解析
// JS代码
console.log(getNum(3)) // 3
function getNum(num) {
return 3
}
// 预解析执行顺序
function getNum(num) {
return 3
}
console.log(getNum(3)) // 3
- 结合
// JS代码
console.log(num) // undefined
var num = 3
console.log(num) // 3
console.log(getNum(3)) // 3
function getNum(num) {
return 3
}
// 预解析执行顺序
var num
function getNum(num) {
return 3
}
console.log(num) // undefined
num = 3
console.log(num) // 3
console.log(getNum(3)) // 3
从上述代码可以了解到在预解析中,通过var声明的变量和function声明的函数主要区别就在于声明时是否对其进行定义。