前言
- 系列文章目录:
- 根据视频和PPT整理
- 视频及对应资料:
- JS
- 视频:JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程
- 视频对应资源(在视频简介里面)
- 链接:【https://gitee.com/xiaoqiang001/java-script.git】
- 视频对应资源(百度网盘)
- 链接:【https://pan.baidu.com/s/1q952v5mnFGR9IFjHlyn7Wg】
- 提取码:1234
1. 预解析
JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步:预解析和代码执行。
预解析:在当前作用域下, JS 代码执行之前,浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。预解析只会发生在通过 var 定义的变量和 function 上。所以,预解析分为:变量预解析和函数预解析
代码执行: 从上到下执行JS语句。
2. 变量预解析和函数预解析
2.1 变量预解析(变量提升)
变量预解析(变量提升):变量的声明会被提升到当前作用域的最上面,但是变量的赋值不会被提升。
<script> console.log(num); var num = 10; </script>
上面的代码相当于:
变量num的声明被提升到所在作用域的最上面。
<script> var num; // 由于变量在被输出时,只进行了声明并没有进行赋值 // 所以输出的undefined console.log(num); num = 10; </script>
<script> fun(); var fun = function() { console.log('fun'); } </script>
上面的代码相当于:
变量fun的声明被提升到所在作用域的最上面,由于函数是作为fun的值,所以此处不为函数的声明,只有变量的声明会被进行提升,而函数的声明不会。所以报错。
<script> var fun; // 此处调用的不为函数,而是一个取值为undefined的变量 // 变量不能被调用,所以报错 fun(); fun = function() { console.log('fun'); } </script>
2.2 函数预解析(函数提升)
函数预解析(函数提升):函数的声明和var声明变量一样会被提升到当前作用域的最上面。
<script> f1(); function f1() { console.log('f1'); } </script>
上面的代码相当于:
函数f1的声明被提升到所在作用域的最上面。所以不会报错。
<script> function f1() { console.log('f1'); } f1(); </script>
3. 案例
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); }
上面的代码相当于:
<script> function f1() { // var a = b = c = 9; // 相当于 c = 9; // 由于b c 没有进行声明直接进行赋值 b = c; // 相当于全局变量 var a = b; // a 使用了var进行声明为局部变量 console.log(a); // 9 console.log(b); // 9 console.log(c); // 9 } f1(); // 由于在函数局部作用域中的b c为全局变量 // 所以 b c 输出为9 console.log(c); // 9 console.log(b); // 9 // 由于全局作用域中没有 a的声明 // 函数中的声明的为局部作用域a console.log(a); // 报错 </script>