DATE 20201209 By WJB
变量提升就是作用域中声明的变量在代码预编译时会将所有的变量声明语句提升到最前边。
例如
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lesson1</title>
</head>
<body>
<script>
console.log(world);
</script>
</body>
</html>
执行结果:
执行时 提示world 未定义,其实在预编译时就会报错。
(1)对做如下修改
在console.log(world);语句下加一句“var world =“i like this world”;”
如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lesson1</title>
</head>
<body>
<script>
console.log(world);
var world ="i like the world";
</script>
</body>
</html>
执行结果如下
执行结果显示,world已经声明但为定义。问题来了,为什么log的时候world未声明 而执行结果却是显示已声明?
这里就要提到“变量提升”了,var world ="i like the world"; 可以拆分为变量声明和变量赋值。代码拆分为var world;world ="i like the world";。
其中var world 被提到作用用于最前边。编译时代码如下
<script>
var world
console.log(world);
world ="i like the world";
</script>
这样就可以解释了执行结果了。
这样就存在一个弊端,既所有的变量都会被声明。如下实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lesson1</title>
</head>
<body>
<script>
if(false)
{ var world ="i like the world"; }
console.log(world);
</script>
</body>
</html>
执行结果如下
很明显world 声明语句没有被执行,但仍然被声明了,这样在就无形增加了编译负担。
变量提升增强了代码的容错性,但增加了编译和执行负担,对最终的程序有不利影响。这个问题也可以解决请看 https://blog.csdn.net/wangjianbo09/article/details/111030803 这边文章。