JS预解析学习笔记
最近在学习JavaScript的预解析内容将笔记分享给大家前言
JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步:预解析和代码执行。(1).预解析:JS引擎会把JS里面所有的 var关键字 还有function函数提升到当前作用域的最前面
(2).代码执行:按照代码书写顺序从上往下执行
一、预解析?
预解析分为 变量预解析(变量提升) 和 函数预解析(函数提升)(1).变量提升:就是把所有的变量声明提升到当前作用域的最前面 不提升赋值操作
(2).函数提升:就是把所有的函数声明提升到当前作用域的最前面 不调用函数
二、案例:
案例1
(1)初始代码如下:
var num = 10;
fun1();
function fun1() {
console.log(num);
var num = 20;
}
(2)运行时的代码:
// 变量函数都提升
var num;
function fun1() {
var num;
// 就近原则上面只有num,依次罗列所以这是undefined
console.log(num);
num = 20;
}
num = 10;
fun();
(3)运行结果如下:
(4)分析:
我们知道JavaScript解析器在运行JavaScript代码的时候,JS引擎会把JS里面所有的 var关键字 还有function函数提升到当前作用域的最前面这里又有var关键字又有function函数所以首先将变量提升到前面(注意提升是不赋值的),然后再将函数提升到前面(注意提升是不调用的),函数里面也有var关键字所以需要提升到前面,再照着原来的代码顺序num = 10,fun()这样写下来就是上面运行时的代码。
案例2
(1)初始代码如下:
getnum();
console.log(y);
console.log(z);
console.log(x);
function getnum() {
var x = y = z = 6;
console.log(x);
console.log(y);
console.log(z);
}
(2)相当于以下代码:
//函数提升
function getnum() {
// var x = y = z = 6;
// 这里的变量声明相当于var x = 6; y=6; z=6; y和z是全局变量所以变量提升是将x提升就好
//变量提升
var x = 6;
x = y = z = 6;
console.log(x);
console.log(y);
console.log(z);
}
getnum();
// 如果将控制台x写在第一行,就只会显示3行6然后1行报错影响下面y和z的继续输出,由于x是函数里的局部变量就会报错显示未定义(x is not defined)
// 写在最后一行前面的y和z就可以输出不会被影响
console.log(y);
console.log(z);
console.log(x);
(3)运行结果如下:
(4)分析:
JS运行代码的时候首先在整个代码的主体部分找var关键字发现没有,然后发现有getnum()函数于是将其提升到前面,其他的代码按照顺序来依次执行,而getnum()函数里面也有一个var关键字局部变量的提升就是x变量,y和z是全局变量没关键字定义不会提升上去,然而由于x是局部变量也就使得接下来在函数外部控制台输出x的时候会显示未定义。