在变量里定义html语句_JavaScript的变量提升

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

其实，只要你掌握了JavaScript变量提升的知识点，就理解了变量的作用域。

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

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

var001显示信息

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

当点击按钮后，先显示下面的警告框：

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

让人不可思议的是，第一次弹出的警告框，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文档：

var002显示信息

看到这样的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中，上面的变换方式，被称为变量提升。其实，变量提升，就是变量声明上浮，一直上浮到全局或者函数体的顶部。