#hello，JS：作用域和作用域链
前言：
在记录作用域和作用域链知识，我一度陷入了错误理解的边缘😂，它也是之后理解闭包知识非常重要的前置知识。查了资料，做了习题，问了老师验证了自己的理解，终于输出了一些我自己的理解。部分知识的表述有引用。如有不妥之处，请老司机拍砖😂~
一、什么是作用域
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
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所处的位置来看
在页面里所写的代码都是出于一个全局作用域下。全局作用域，相当于页面上有一个含有声明变量a或者函数fn的window对象，所声明的全局变量都是window对象下对应的一个属性
image
还没有接触到ES6的let、const之前，只有函数作用域和全局作用域，函数作用域肯定是在全局作用域里面的，而函数作用域中又可以继续嵌套函数作用域，如：
image
那么代码则是：
image
三、从面试题解构作用域和作用域链：
1、解密原理：
- 每当执行完一块作用域里的函数后，它就进入一个新的作用域下（一般从下往上找）
- 当你使用一个变量或者给一个变量去赋值时，变量是从当前的作用域找，再从上层作用域（指当前这个函数所声明的作用域里）上找
2、具体如何运用解密原理
（0）测试：
var name = 'iceman'
这段小小的js代码有其编译过程，经历了下面的步骤：
A、编译器在当前作用域中声明一个变量name
B、运行时引擎在作用域中查找该变量，找到了name变量并为其赋值
下面这道题则证明以上说法：
console.log(name); // 输出undefined var name = 'miya';
在`1``var name = 'miya' 的上一行已输出name变量，并没有报错，输出undefined```，说明输出时该变量已存在，只是没有赋值而已。【这段很重要】
编译器工作，是在代码执行前从上到下进行编译，当遇到某个用var声明变量时，先检查在当前作用域下是否存在了该变量。如果存在，则忽略这个声明；如果不存在，则在当前作用域中声明该变量。
查找的规则：是从当前作用域开始找，如果没找到再到父级作用域中找，一层层往外找，如果在全局作用域如果还没找到的话，就会报错了：ReferenceError: 某变量 is not defined
（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）第二题：
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）【重点】第三题：
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）再深入看几道网上的经典题，感受一下已经模糊的智商😂（其实也还好啦并没有对智商多大的撞击）
在作用域链中查找过程的伪代码：
第一道题：
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。
*/
第二道题：
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
*/
第三道题：
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
*/
