JavaScript 预解析（简单易懂，包看包会）

预解析

• 先了解 js 代码的执行机制
• 预：预先，在所有代码执行之前
• 解析：解释，对代码进行通读和解释
• js 是先预解析，再执行代码

解析了什么？

1. var 关键字

• 预解析会把 var 关键字定义的变量在代码执行之前先声明，但此时不赋值

console.log(num);	// undefind
var num = 100;
console.log(num);	// 100

• 真实的执行过程

/*
预解析先声明var num，但此时并未赋值
*/
var num;
console.log(num);	// undefind
num = 100;
console.log(num);	// 100

2. 声明式函数

• 在内存中先声明有一个变量名是函数名，并且这个名字代表的内容是一个函数

fn();	// 第一句
/*
预解析在所有代码执行之前，告诉浏览器，fn 这个名字可以使用，并且 fn 代表的是一个函数
*/

function fn(){
    
    
	console.log("我是fn函数");
}

• 真实的执行过程

/*
	会把函数定义阶段提到调用阶段的上面
*/
function fn(){
    
    
	console.log("我是fn函数");
}
fn();	// 第一句

注意：

• 赋值式函数：var fn = function(){}
• 按照 var 的规则进行解析

fn();	// 报错
var fn = function fn(){
    
    
	console.log("我是fn函数");
}

• 真实的执行过程

/*
	在预解析，只是告诉浏览器，fn 这个名字可以使用，但是没有赋值
*/
var fn;
fn()	// 报错
fn = function fn(){
    
    
	console.log("我是fn函数");
}
fn();

预解析案例

• 当函数和变量重名的时候，在预解析阶段以函数为准
• 第一题：

fn();	// 能打印
var fn = 100;
fn();	// 报错：不是一个函数
function fn(){
    
    
	console.log("我是 fn 函数");
}
fn();

• 代码分析

预解析阶段
1. var fn
2. function fn(){
    
    ...}
3. 声明 fn 变量
4. 声明 fn 变量 并且赋值为一个函数
5. 预解析结束的时候，浏览器记录的 fn 变量是一个函数
代码开始执行
1. fn()			// 此时 fn 当做函数，并执行
2. fn = 100;	// 此时 fn 当做变量，值为100
3. fn()			// 相当于 100(), 直接报错,程序中断
4. fn()			// 第 3 步就中断了，这里不执行

• 第二题：

fn();	// 能打印
function fn(){
    
    
	console.log("我是 fn 函数");
}
fn();	// 能打印
var fn = 100;
fn();	// 报错

• 代码分析

预解析阶段
1. function fn(){
    
    ...}
2. var fn
代码开始执行
1. fn()			// 此时 fn 当做函数，并执行
2. fn()			// 此时 fn 当做函数，并执行
3. fn = 100;	// 此时 fn 当做变量，值为100
4. fn()			// 相当于 100(), 直接报错,程序中断

预解析隐患

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

• 这是你以为的：

console.log(num);	// undefined
if(false){
    
    
	var num = 100;
}
console.log(num);	// 100

• 实际上：

console.log(num);	// undefined
if(false){
    
    
	var num = 100;
}
console.log(num);	// undefined

• 相当于：

console.log(num);	// undefined
if(false){
    
    
	var num;
	num = 100;
}
console.log(num);	// undefined

2. return 后面的代码虽然不执行，但是也会进行预解析

function fn(){
    
    
	var num = 100;
	console.log(num);	// 100
	console.log(n);	// undefined
	return;
	var n = 200;
}
fn();

• 相当于：

function fn(){
    
    
	var num;
	var n;
	num = 100;
	console.log(num);	// 100
	console.log(n);	// undefined
	return;
	n = 200;
}
fn();

预解析建议

• 书写代码建议：

1. 函数名 不要与 变量同名
2. 变量名以名词为主，2个或3个单词组合使用
如：username，userInfoAge
3. 函数名以功能区分，尽量语义化
如：getColor()，setColor()
4. 尽量使用 赋值式函数 来定义

下一篇：函数作用域https://blog.csdn.net/qq_45677671/article/details/114988263