JS中作用域和变量提升(hoisting)的深入理解

时间:2020-05-15 人气:0

作用域（Scoping）

对于Javascript初学者来说，一个最迷惑的地方就是作用域；事实上，不光是初学者。我就见过一些有经验的javascript程序员，但他们对scope理解不深。javascript作用域之所以迷惑，是因为它程序语法本身长的像C家族的语言。我对作用域的理解是只会对某个范围产生作用，而不会对外产生影响的封闭空间。在这样的一些空间里，外部不能访问内部变量，但内部可以访问外部变量。

c语言的变量分为全局变量和局部变量，全局变量的作用范围是任何文件和函数访问（当然，对于非变量定义的其他c文件，需要使用extern关键字进行申明，使用static关键字也可以将作用范围限定在当前文件中），局部变量的作用范围就是从申明到最近的大括号涵盖的块级范围。java则无全局变量，有类变量，成员变量和局部变量，作用范围根据public,protected,private等访问权限有不同的作用范围，这里就不多述。

JS作用域有哪些？

在ES5中，js只有两种形式的作用域：全局作用域和函数作用域。

全局作用域其实是全局对象的作用域，任意地方都可以访问到（如果没有被函数作用域覆盖）。

函数对象作用域跟c的局部变量作用域是不同的，它的作用域是整个函数范围，不论他是在函数的任意位置申明的！这就是所谓的hoisting，也就是变量提升的概念。不过不着急，下面会专门针对hoisting来进行解释。

不过，在ES6中，新增了一个块级作用域（最近的大括号涵盖的范围），但是仅限于let方式申明的变量。
作用域演示：

定义变量时，如果不写var，比如 i=0，则会被定义为全局变量，作用域为全局作用域，否则为局部变量，作用域为函数作用域。上面第一行的var i=0，之所以说它是全局变量，是因为它已经是在全局区申明的了，并不在函数范围内，因此跟 i=0 是一样的。

至于，为什么结果会是这样，继续往下看就知道了。

申明形式

变量声明：

函数申明：

变量提升（Hoisting）

引出一个问题

下面这段代码会输出什么内容？

这道题我面试过很多人，大多数人都说输出的是日期。但真实的结果是undefined。为什么是这样呢？这里就引出了一个概念--hoisting，中文的意思就是变量提升。MDN中对变量hoisting的解释是这样的：

var hoisting

Because variable declarations (and declarations in general) are processed before any code is executed, declaring a variable anywhere in the code is equivalent to declaring it at the top. This also means that a variable can appear to be used before it's declared. This behavior is called "hoisting", as it appears that the variable declaration is moved to the top of the function or global code.

这段话翻译下来就是

因为变量申明是在任意代码执行前处理的，在代码区中任意地方申明变量和在最开始（最上面）的地方申明是一样的。也就是说，看起来一个变量可以在申明之前被使用！这种行为就是所谓的“hoisting”，也就是变量提升，看起来就像变量的申明被自动移动到了函数或全局代码的最顶上。

注意：仅仅是申明提升了，定义并不会被提升。

如此，上面这段代码其实就是下面的形式：

所以，这样就应该理解了，console输出的时候，tmp变量仅仅是申明了但未定义，所以输出应该是undefined。

这里需要说明的是，虽然所有的申明（包括ES5的var、function，和ES6的function *、let、const、class）都会被提升，但是var、function、function *和let、const、class的的提升却并不相同！具体原因可以看这里的说明（大体的意思是虽然let，const，class也被提升了，但是却并不会被初始化，这时候去访问他们则会报ReferenceError异常，他们需要到语句执行的时候才会被初始化，而在被初始化之前的状态叫做temporal dead zone）。我们来看一段代码就知道了：

这里a被提升，但因为定义在后，所以输出undefined