唉。关于变量声明提升的问题,这应该是js刚接触的时候就会的东西。直到我学了两个月前端的室友问我什么是变量声明提升是什么。。。
其实他也不是完全不知道,就是在声明变量之前调用了该变量,然后undefined了。但他不明白的为什么,其中的原理是什么,为什么不是未定义。
所以今天抽空,写一下这个,明白变量声明提升要知道两个点:ES6与ES5的变量声明方式以及预解析
ES5的变量声明:var、隐式变量
ES6的变量声明:let、const
预解析:简单说明,就是在js代码进行运行的时候,我们都知道是自上而下的单线程运行,而在解析的同时,存在一个预解析过程,它会找到所有的函数声明和变量,先行解析。
声明问题
ok,基本知识点了解以后,我们继续说。在ES5中,基本上是全部通过关键字var来声明变量及函数。而在ES5中也因此就存在了这个问题:变量提升。
按照我室友的说法,我们上个小例子:
console.log(strs);
var strs = '你好';
这里就能看到变量声明提升了,那么究竟什么是变量声明提升,我再上一段代码:
console.log(strs);
strs = '你好'; //strs is not defined
这里没有显示undefined,那么这里没有变量声明提升,看懂了么?没看懂的话,我直接用代码为大家说明变量声明提升的过程:
var strs;
console.log(strs);
strs = '你好';
实际上,这就是变量声明提升,在预解析中,将var声明和函数声明提升到最前,但不会提升赋值操作,所以我们之前的隐式变量并没有提前。同理ES6中的方式也不会。
总结:
预解析时,js会把所有的var 还有函数声明提升到当前作用域的最前面而不提升赋值,同样也不会调用函数
预解析后,才是代码执行,按照代码书写的顺序从上往下执行,如赋值或调用函数