- 写在前面:参考哔哩哔哩黑马程序员pink老师教程
- 地址:https://www.bilibili.com/video/BV1Sy4y1C7ha?t=41&p=4
目录
预解析
- JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步:预解析和代码执行。
- 预解析:在当前作用域下, JS 代码执行之前,浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
- 代码执行: 从上到下执行JS语句。预解析只会发生在通过 var 定义的变量和 function 上。了解预解析能够让我们知道为什么在变量声明之前访问变量的值是 undefined,为什么在函数声明之前就可以调用函数。
变量预解析和函数预解析
变量预解析(变量提升)
- 预解析也叫做变量、函数提升。
- 变量提升:变量的声明会被提升到当前作用域的最上面,变量的赋值不会提升。
console.log(num); // 结果是多少? var num = 10; // undefined
函数预解析(函数提升)
- 函数提升: 函数的声明会被提升到当前作用域的最上面,但是不会调用函数。
fn(); function fn() { console.log('打印'); }
- 解析为:
function fn() { console.log('打印'); } fn();
解决函数表达式声明调用问题
fn(); var fn = function() { console.log('想不到吧'); }
- 解析为:
var fn; fn(); fn = function() { console.log('想不到吧'); }
预解析案例
- 案例 1
var num = 10; fun(); function fun() { console.log(num); var num = 20; }
- 解析为:
var num; function fun() { var num; console.log(num); num = 20; } num = 10; fun();
- 案例 2
var num = 10; function fn(){ console.log(num); var num = 20; console.log(num); } fn();
- 解析为:
var num; function fn() { var num; console.log(num); num = 20; console.log(num); } num = 10; fn();
- 案例 3
var a = 18; f1(); function f1() { var b = 9; console.log(a); console.log(b); var a = '123'; }
- 解析为:
var a; function f1() { var b; var a; b = 9; console.log(a); console.log(b); a = '123'; } a = 18; f1();
- 案例 4
f1(); console.log(c); console.log(b); console.log(a); function f1() { var a = b = c = 9; console.log(a); console.log(b); console.log(c); }
- 解析为:
function f1() { var a; a = b = c = 9; // 相当于 var a = 9; b = 9; c = 9; b 和 c 直接赋值 没有var 声明 当 全局变量看 // 集体声明 var a = 9, b = 9, c = 9; console.log(a); console.log(b); console.log(c); } f1(); console.log(c); console.log(b); console.log(a);