龙空技术网

JavaScript的变量提升

编程实践 100

前言:

此刻姐妹们对“js赋值全局变量”大概比较着重,大家都想要剖析一些“js赋值全局变量”的相关资讯。那么小编同时在网上汇集了一些关于“js赋值全局变量””的相关文章,希望看官们能喜欢,朋友们快快来了解一下吧!

如果是第一次学习JavaScript,或许你会对此感到疑惑:在JavaScript中,变量只有全局变量和局部变量两种,而不像C语言和Java语言,还有块变量。

其实,只要你知道了JavaScript的变量提升,就理解了变量的作用域。

1、有点不可思议的变量未定义

下面是一个包含JavaScript的完整HTML文档:

<!DOCTYPE html><html><head><title>var001</title><meta charset="utf-8" /><script>var theMesage = "value of global";function showMessage(){alert(theMessage);var theMessage = "value of local";alert(theMessage);}</script></head><body><button onclick="showMessage();" >显示信息</button></body></html>

当使用浏览器打开该文档后,界面展示如下:

当点击按钮后,先显示下面的警告框:

点击告警框的“确定”按钮后,再显示下面的警告框:

让人不可思议的是,第一次弹出的警告框,theMessage变量的值竟然是undefined!

2、变量未定义的原因

初一看JavaScript代码,我们会认为第一次警告框显示的信息应该是“value of global”,因为theMessage变量的值就是“value of global”。

其实在浏览器内部,showMessage函数中的语句:

var theMessage = "value of local";

经历了两次变换,第一次变换,将这条语句变为两条语句:

var theMessage;theMessage = "value of local";

这两条语句,一条是变量声明语句,用于生成变量;第二条是赋值语句,用于为变量赋值。

第二次变换,就是将变量声明语句上浮到函数体的顶部,因此,最终执行之前的showMessage函数,是这个样子:

function showMessage(){var theMessage;alert(theMessage);theMessage = "value of local";alert(theMessage);}

看到showMessage函数的最终形式,你会立即明白:theMessae变量没有被赋值就使用了,当然是undefined。原来如此!

3、语句块内定义的变量,外部竟然可以使用

下面也是一个包含JavaScript的完整HTML文档:

<!DOCTYPE html><html><head><title>var002</title><meta charset="utf-8" /><script>function showMessage(){var theMessage = "";for (var i=1; i<5; i++){theMessage = theMessage + " " + i;}theMessage = theMessage + " " + i*100;alert(theMessage);}</script></head><body><button onclick="showMessage();" >显示信息</button></body></html>

看到这样的HTML文件,这样的JavaScript函数,有经验的C程序员或者Java程序员,会立即喊出来:“程序错了,在for块之外,i不能被使用!”,实际上,HTML文件被浏览器打开后,展示如下:

点击“显示信息”按钮,出现下面的警告框:

程序竟然正常运行了!

4、程序正常运行的原因

上面的程序正常运行的原因,也是变量提升,下面的语句:

var i=1;

也是经过两次变换,最终,showMessage函数在运行前,被变换成这样了:

function showMessage(){var theMessage;var i;theMessage = "";for (i=1; i<5; i++){theMessage = theMessage + " " + i;}theMessage = theMessage + " " + i*100;alert(theMessage);}

这样的代码,肯定可以正常运行了。

5、变量提升知识点的总结

在JavaScript中,上面的变换方式,被称为变量提升。其实,变量提升,就是变量声明上浮,一直上浮到全局或者函数体的顶部。

标签: #js赋值全局变量 #html上浮