预解析
- 先了解 js 代码的执行机制
- 预:预先,在所有代码执行之前
- 解析:解释,对代码进行通读和解释
- js 是先预解析,再执行代码
解析了什么?
1. var 关键字
- 预解析会把 var 关键字定义的变量在代码执行之前先声明,但此时不赋值
console.log(num);
var num = 100;
console.log(num);
var num;
console.log(num);
num = 100;
console.log(num);
2. 声明式函数
- 在内存中先声明有一个变量名是函数名,并且这个名字代表的内容是一个函数
fn();
function fn(){
console.log("我是fn函数");
}
function fn(){
console.log("我是fn函数");
}
fn();
注意:
- 赋值式函数:
var fn = function(){}
- 按照 var 的规则进行解析
fn();
var fn = function fn(){
console.log("我是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()
2. fn = 100;
3. fn()
4. fn()
fn();
function fn(){
console.log("我是 fn 函数");
}
fn();
var fn = 100;
fn();
预解析阶段
1. function fn(){
...}
2. var fn
代码开始执行
1. fn()
2. fn()
3. fn = 100;
4. fn()
预解析隐患
- if 条件不管成不成立,里面的代码都会进行预解析
console.log(num);
if(false){
var num = 100;
}
console.log(num);
console.log(num);
if(false){
var num = 100;
}
console.log(num);
console.log(num);
if(false){
var num;
num = 100;
}
console.log(num);
- return 后面的代码虽然不执行,但是也会进行预解析
function fn(){
var num = 100;
console.log(num);
console.log(n);
return;
var n = 200;
}
fn();
function fn(){
var num;
var n;
num = 100;
console.log(num);
console.log(n);
return;
n = 200;
}
fn();
预解析建议
1. 函数名 不要与 变量同名
2. 变量名以名词为主,2个或3个单词组合使用
如:username,userInfoAge
3. 函数名以功能区分,尽量语义化
如:getColor(),setColor()
4. 尽量使用 赋值式函数 来定义