一、前言
预编译是JS语言的难点重点之一,难点在于不便理解,重点在于必须掌握。
预编译实际上就是JS引擎的两次扫描,第一次扫描是检测声明,第二次扫描是执行代码。
预编译分为脚本的预编译和函数调用的预编译,先来说说脚本的预编译。
二、脚本预编译
1. 过程
1.创建全局对象GO(GlobalObject)
2.加载脚本文件
3.预编译:
- 找出所有的变量声明,按照变量名加入全局对象,如果已经存在,忽略。
- 找出所有的函数声明,按照函数名加入全局对象,如果已经存在同名变量或者函数,替换之。
- 非声明不考虑。
4.解析执行代码
2. 解析
1.没有var的变量,都不是变量声明,全部认为是window的全局变量,不参与预编译。
// console.log(aa); // Uncaught ReferenceError: aa is not defined aa = 5; console.log(aa); // 5
2.即使在函数中,aa也是全局变量。(运行时)
test(); function test() { aa = 5; } console.log(aa); // 5
3.脚本中的所有声明变量,在脚本预编译阶段完成,所有变量的声明与实际书写位置无关。
console.log(aa); // undefined var aa = 5; console.log(aa); // 5
4.脚本中的所有函数声明,在脚本预编译阶段完成,所有函数声明与实际书写位置无关。
console.log(hh); // f hh(){...} function hh() { console.log('hh'); }
5.脚本中,如果变量与函数同名,那么将覆盖变量。
console.log(haha); // f haha(){...} var haha = 123; function haha() { console.log(2333); }
6.脚本中,只有函数能够覆盖变量,但是变量无法覆盖函数。(注意: 函数优先级大于变量!)
console.log(haha); // f haha(){...} function haha() { console.log(2333); } var haha = 123;
7.脚本中,后面的函数声明会覆盖前面的函数声明,并且忽略参数。
haha(1); // 'haha2' function haha(a) { console.log('haha1'); } function haha(b,c) { console.log('haha2'); }
三、本节思维导图