简单说说Javascript中的作用域链

Posted 2020-11-20 xuanang

    javascript中作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。变量的作用域有全局作用域和局部作用域两种。当查找变量的时候，会先从当前上下文的变量对象中查找，如果没有找到，就会从父级执行上下文的变量对象中查找，一直找到全局上下文的变量对象，也就是全局对象。这样由多个执行上下文的变量对象构成的链表就叫做作用域链。

看几个题目：

A :

 1 var a = 1
 2 function fn1(){
 3   function fn2(){
 4     console.log(a)
 5   }
 6   function fn3(){
 7     var a = 4
 8     fn2()
 9   }
10   var a = 2
11   return fn3
12 }
13 var fn = fn1()
14 fn() //输出多少

          观察代码，我们发现在这里  fn() 的结果最终由   function fn2(){console.log(a)} 决定，执行fn2，但在其中没有声明a,于是在其上一级作用域中寻找，发现存在局部变量 var a = 2  ，于是执行第4行 console.log(a) ，最终输出为 2  。

B：

 1 var a = 1
 2 function fn1(){
 3   function fn3(){
 4     var a = 4
 5     fn2()
 6   }
 7   var a = 2
 8   return fn3
 9 }
10 function fn2(){
11   console.log(a)
12 }
13 var fn = fn1()
14 fn() //输出多少

          观察代码，我们发现在这里fn() 的结果最终由 function fn2(){console.log(a)} 决定，执行fn2，但在其中没有声明a,于是在其上一级作用域中寻找，发现存在全局变量 var a = 1，于是最终结果输出为1 。

C：

 1 var a = 1
 2 function fn1(){
 3 
 4   function fn3(){
 5     function fn2(){
 6       console.log(a)
 7     }
 8     var a
 9 
10     fn2()
11     a = 4
12   }
13   var a = 2
14   return fn3
15 }
16 var fn = fn1()
17 fn() //输出多少

          观察代码，我们发现在这里fn() 的结果最终由fn2()决定，在fn3()中fn2()在执行的时候，其内部并没有声明变量a，于是向上一级作用域找，找到局部变量a，它虽已声明但还没有赋值（赋值在其后），所以最终输出为 undefined 。

小结一下：

1. 函数在执行的过程中，先从自己内部找变量；
2. 如果找不到，再从创建当前函数所在的作用域去找, 以此往上；
3. 注意找的是变量的当前的状态。

 

简单先写到这里吧，有不当之处欢迎批评指正。

个人博客，引用请注明出处。