深入理解JavaScript变量作用域

首先需要提一下JavaScript的提前声明.

所谓的提前声明,指的是一个变量在被声明的时候,JavaScript在被声明的时候,JavaScript会自动地把它放到代码块的最顶部,也就是说,在这个变量定义的代码块里,你甚至可以把调用这个变量的语句放在声明之前,不过此时变量的赋值会是undefined

示例代码:

执行结果:

上面的代码和下面的代码是等价的

事实上JavaScript对于变量的提前声明的操作也确实如此

关于JavaScript的变量作用域

JavaScript的变量按照作用域划分,一共可分为两种,一种叫全局变量,另

一种叫做局部变量,首先需要声明,我们在讨论全局变量和局部变量的时候,真正在讨论的其实是全局作用域和局部作用域,全局变量作用在全局作用域,局部变量作用在局部作用域

      全局变量顾名思义,就是在代码的全局都可以调用的变量.全局变量定义在最外层函数或者代码的最外层,或者不使用var,const,let定义直接赋值的变量,比如a=1;b=’asd’;c=[1,2,3]等都属于全局变量.与之相对的,定义在函数体内部的变量属于局部变量

      因为作用域的原因,全局变量在定义了同名局部变量的函数体内无法直接调用,函数体内定义的同名局部变量会暂时屏蔽这个全局变量(原理下面会讲).但是可以通过关键字window来调用,其原因是全局变量的定义都处于最外层对象window之内,每定义一个全局变量,都相当于给window对象新加了一个属性,例如定义全局变量var i=0;这就相当于给window对象新加了一个i属性,其属性值为0,这样的话,在函数体内自然就可以通过调用window对象的属性来调用全局变量,也就是通过window.i来调用全局变量i

 

 

作用域链

      每段js代码(包括全局代码和函数)在定义的时候,都会相应的被赋予一个作用域链,他是一个对象列表或者链表.全局代码的作用域链里只有一个全局作用域,这就造成了他不能调用局部作用域里定义的变量,函数体的作用域链里既有属于这个函数的局部作用域,也有全局作用域.当这个函数内部还定义了其他函数的时候,被嵌套的这个函数的作用域不仅有属于他的局部作用域和全局作用域,还有嵌套他的函数的局部作用域,以此类推

      当函数内的一个变量要被调用的时候,函数会从离他最近一个作用域或者对象开始寻找这个变量,当在这个作用域找到了,此时就会直接调用这个变量.若没找到,就进入上一级作用域继续寻找,直到找到这个变量.如果找遍了他的作用域链内的所有作用域和对象都没有找到这个变量,此时会抛出ReferenceError异常

不同层级作用域上对象的分布:

JavaScript最顶层:作用域由一个全局对象组成

不包含嵌套的函数体内部:作用域由一个属于该函数的局部作用域和全局对象组成

在一个嵌套的函数体内:作用域链内至少包含三个对象:他自己的作用域,父级函数的作用域以及一个全局对象

每当调用一个函数的时候,属于他的局部作用域都会被重新创建,若想保存下这个局部作用域,可以使用闭包操作,但这不是这篇文章需要介绍的,有兴趣了解的请移步王福朋的博文深入理解JavaScript原型和闭包(完结)-王福朋