前言：

在记录作用域和作用域链知识，我一度陷入了错误理解的边缘😂，它也是之后理解闭包知识非常重要的前置知识。查了资料，做了习题，问了老师验证了自己的理解，终于输出了一些我自己的理解。部分知识的表述有引用如有不妥之处，请老司机拍砖😂~

参考资料：

lce_shou《深入理解闭包之前置知识→作用域与词法作用域》

一、什么是作用域

1、先看一段简单代码:

function  fn()  { 
         var a =  'miya'; 
         console.log(a); 
 // 输出"miya" 
          }  
     fn();

在fn函数执行的时候，输出一个a变量，那么这个a变量是哪里来?有看到函数第一行有定义a变量的代码var a = 'miya'

2、继续看另外一段代码：

var b =  'programmer';  function  fn()  { 
          console.log(b);  // 输出"programmer"  
       } 
fn();

同样，在输出b的时候，自己函数内部没有找到变量b，那么就在外层的全局中查找，找到了就停止查找并输出了。

3、那么，可以注意到以上两段代码都有查找变量。第一段代码是在函数中找到a变量，第二段代码是在全局中找到b变量。当然也要注意：javascript中{ }并没有带来块级作用域，如：

{ 
    var a=1 
 } 
console.log(a) 
 //1
/*即使这样的定义，同样能输出：1*/

javascript的作用域是通过函数来形成，也就是说一个函数内定义的变量，函数外是不可以访问，如：

function  fn(){ 
 var a =1; 
 }  //js编译器从此函数作用域出来之后，外界的变量函数或者声明变量均与之无关 
 fn(); console.log(a);  //"ReferenceError: a is not defined"说明在全局作用域中变量未被声明

接下来，我们在函数、全局，两个概念名分别都加上作用域三个字，是不是又打开一个新世界了？

关注细节的就知道，作用域，本质是一套规则，用于确定在何处以及如何查找变量（标识符）的规则。关键点在于：查找变量（标识符）。接下来让我们继续探索作用域链。

二、作用域链

1、还是看刚才这段代码

var b =  'programmer'; 
 function  fn()  { 
console.log(b);  // 输出"programmer" 
 }  
fn();

一般来说，我们在查找b变量时，先在函数作用域中查找，没有找到，再去全局作用域中查找，你会注意到，这是一个往外层查找的过程，即顺着一条链条从下往上查找变量，这条链条，我们就称之为作用域链。

2、全局作用域，我们先从js页面中同时存在变量fn和变量a所处的位置来看

image
在页面里所写的代码都是出于一个全局作用域下。全局作用域，相当于页面上有一个含有声明变量a或者函数fn的window对象，所声明的全局变量都是window对象下对应的一个属性。
image

还没有接触到ES6的let、const之前，只有函数作用域和全局作用域，函数作用域肯定是在全局作用域里面的，而函数作用域中又可以继续嵌套函数作用域，如：

image

三、从面试题解构作用域和作用域链

1、解密原理：

• 每当执行完一块作用域里的函数后，它就进入一个新的作用域下（一般从下往上找）
• 当你使用一个变量或者给一个变量去赋值时，变量是从当前的作用域找，再从上层作用域（指当前这个函数所声明的作用域里）上找

2、具体如何运用解密原理

（0）测试：

var name = 'iceman'

这段小小的js代码有其编译过程，经历了下面的步骤：
A、编译器在当前作用域中声明一个变量name
B、运行时引擎在作用域中查找该变量，找到了name变量并为其赋值
下面这道题则证明以上说法：

console.log(name);   // undefined  
var name =  'miya';  

在var name = 'miya'的上一行已输出name变量，并没有报错，输出undefined，说明输出时该变量已存在，只是没有赋值而已。【这段很重要】

编译器工作，是在代码执行前从上到下进行编译，当遇到某个用var声明变量时，先检查在当前作用域下是否存在了该变量。如果存在，则忽略这个声明；如果不存在，则在当前作用域中声明该变量。

查找的规则：是从当前作用域开始找，如果没找到再到父级作用域中找，一层层往外找，如果在全局作用域如果还没找到的话，就会报错了：

ReferenceError: 某变量 is not defined

（1）第1题：

var a = 1
function fn1(){  
     function fn2(){
         console.log(a)
  }
  function fn3(){
    var a = 4
    fn2()
  }
  var a = 2   
  return fn3   
}
var fn = fn1() 
fn() //输出多少

//输出a=2
//执行fn2函数，fn2找不到变量a,接着往上在找到创建当前fn2所在的作用域fn1中找到a=2

（2）第2题：

var a = 1        
function fn1(){
  function fn3(){  
    var a = 4
    fn2()        
  }
  var a = 2
  return fn3    
}
function fn2(){
  console.log(a)  
}
var fn = fn1()   
fn() //输出多少

//输出a=1
//最后执行fn2函数，fn2找不到变量a,接着往上在找到创建当前fn2所在的全局作用域中找到a=1

（3）【重点】第3题：

var a = 1
   function fn1(){
       function fn3(){
         function fn2(){
             console.log(a)
       }
 var a
  fn2()
  a = 4
  }      
  var a = 2
  return fn3
}
var fn = fn1()
fn() //输出多少

//输出undefined
//函数fn2在执行的过程中，先从自己内部找变量找不到，再从创建当前函数所在的作用域fn去找,
注意此时变量声明前置，a已声明但未初始化为undefined

事实上，我发现上一节函数中立刻执行的函数表达式本质上也可以感受一下局部作用域和全局作用域的区别。

（4）再深入看几道网上的经典题，感受一下已经模糊的智商_{😂（其实也还好啦}并没有对智商多大的撞击）

在作用域链中查找过程的伪代码：

第1道题：

var x = 10
bar() 
function foo() {
 console.log(x) 
}
function bar(){
 var x = 30
  foo() 
}

/*
第2行，bar（）调用bar函数
第6行，bar函数里面调用foo函数
第3行，foo函数从自己的局部环境里找x，结果没找到
第1行，foo函数从上一级环境里找x，即从全局环境里找x，找到了var x=10。
foo（）的输出结果为10。
*/

第2道题：

var x = 10;
bar() 
function bar(){
  var x = 30;
  function foo(){
    console.log(x) 
  }
  foo();
}   
/*
第2行，bar（）调用bar函数
第3行，bar函数里面是foo函数
foo函数在自己的局部环境里寻找x，没找到
foo函数到自己的上一级环境，即bar函数的局部环境里找x，找到var x=30
所以第2行的bar（）输出为30
*/

第3道题：

var x = 10;
bar() 
function bar(){
  var x = 30;
  (function (){
    console.log(x)
  })() 
}
/*
第2行，bar（）调用bar函数
第三行，bar函数里的function（）在自己的局部环境里寻找x，但没找到
function（）在上级环境即bar的局部环境里寻找x，找到var x=30，于是显示结果为30
*/