前端细节大全（一）：javascript中的变量提升问题

 

一、问题的发现

    很多小伙伴在前端作业的js部分中往往会遇到一些问题就是明明我给变量赋值了，为什么之后在函数调用的时候输出变量是undefined。小编也是觉得很奇怪，接下来看看小编的理解。

二、解释

   我们先看如下图：

    //定义全局变量
    var scope="全局变量";
	function test(){
		document.writeln(scope + "<br >");
        //定义局部变量，作用于函数内部
		var scope="局部变量";
        //再次输出scope值
		document.writeln(scope + "<br >");
	}
	test();//调用函数

结果：

                                                           

 我们会发现，显示出undefined，而第二个局部变量却能够很好的输出。这是为什么呢？细心的小伙伴已经发现，我们申明scope的时候是在函数外部进行声明，但是在函数内部声明另一个scope的时候出现变量提升，也就是函数内部的scope声明语句会提升到函数头部进行声明，此时就相当于scope下面这个函数。 我们会发现，显示出undefined，而第二个局部变量却能够很好的输出。这是为什么呢？细心的小伙伴已经发现，我们申明scope的时候是在函数外部进行声明，但是在函数内部声明另一个scope的时候出现变量提升，也就是函数内部的scope声明语句会提升到函数头部进行声明，外部的scope会被函数内部的scope重新声明并赋值，此时就相当于scope下面这个函数。

    //定义全局变量
    var scope="全局变量";
	function test(){
		var scope;
		document.writeln(scope + "<br >");//所以输出为undefined
        //定义局部变量，作用于函数内部
		scope="局部变量";
        //再次输出scope值
		document.writeln(scope + "<br >");//输出scope值
	}
	test();//调用函数

在根据我们的局部变量覆盖全局变量原理，就可以知道原来这是出现了提升变量而导致声明放在函数体的头部执行。

三、总结

        变量提升是在js中可能发生的情况，在我们定义一个全局变量的时候，编写的函数如果存在同名的局部变量可能将全局变量替换，使用var修饰符修饰成员变量是作用于全局的，let修饰符是作用于块作用域（函数等）的，所以避免预防的方法就是变量定义中尽量不使用同名的变量名命名或者使用没有let来进行修饰。