搞不懂作用域链？这篇文章让你一眼秒懂！

前言

新手哈基米搞不懂什么是作用域链？深入了解JS代码的执行过程让你秒懂作用域链！

js 复制代码

function fn() {
    console.log(myName);
}
function fn2() {
    var myName = '南北绿豆'
    fn()
}
var myName = '哈基米'
fn2()

究竟是会出现"哈基米",还是"南北绿豆"呢？诶，先不要着急哈气。想要真正弄清输出结果是"哈基米"还是"南北绿豆"。我们先要深入理解一下这段js代码究竟是怎样的一个执行过程。

什么是函数执行上下文？
- 当一个函数被调用时，js引擎会先创建一个对应的"函数执行上下文"对象，并将函数中声明的变量与函数都存在其中。供函数执行时使用，由此才实现了函数作用域的概念。
其主要组成部分：
- 变量环境：保存使用var关键字声明的对象和函数内部声明的子函数，由此实现常见的"函数作用域"。
- 词法环境：保存使用let关键字声明的对象，主要用于实现"块级作用域"的功能，非本文重点，不做详细描述。
例子：

js 复制代码

function fn2() {
    var myName = '南北绿豆'
    fn()
}

图片的抽象表达：js引擎会为本函数创建一个函数上下文

js 复制代码

function fn() {
    console.log(myName);
}
function fn2() {
    var myName = '南北绿豆'
    fn()
}
var myName = '哈基米'
fn2()

光靠这些我们还无法得知fn2是如何调用到fn函数的，所以我们还得了解这两个执行上下文的出现顺序，以及js引擎是如何对他们进行处理，才能够正常的执行代码。所以我们的新朋友"调用栈"便可以登场了。

后进先出：它与我们所知的"栈"这一数据结构一样，有着"后进先出"（LIFO）的特点。
"函数执行上下文生命周期"的管理者：js引擎通过调用栈间接控制"函数执行上下文的生命周期"来管理"函数的执行顺序"，由此直接决定代码的执行流程。
- 具体过程是：每当一个函数被调用时，js引擎会为其创建一个"函数执行上下文"，然后将该"函数执行上下文"压入栈顶，js引擎就会开始执行处于栈顶的函数，当函数执行完毕，便会让栈顶元素出栈。

当准备执行fn2（）时，js引擎会在全局执行上下文中寻找fn2（）的定义，发现其存在。js引擎对其进行编译并创建对应函数执行上下文并将其压入调用栈，然后开始执行函数fn2，一行一行往下执行。

当准备执行fn（）时，js引擎会在fn2函数执行上下文中寻找fn（）的定义，未发现定义，于是继续向全局执行上下文中寻找fn（）的定义。发现fn（）定义，js引擎对其进行编译并创建对应函数执行上下文压入调用栈，然后开始执行fn，一行一行往下执行。

js引擎对变量与函数的寻找过程难道真的只是"由内向外寻找"？如果是这样输出的结果应该是"南北绿豆"才对。

怎么是哈基米？

js 复制代码

var num=0;
function f1()
{
    console.log(num);
}
fn1()

由此形成了一个最简单的作用域链

js 复制代码

function fn() {
    console.log(myName);
}
function fn2() {
    var myName = '南北绿豆'
    fn()
}
var myName = '哈基米'
fn2()