通过《阿凡达》来一次JavaScript执行上下文的形象理解之旅

这篇文章呢，我想借阿凡达的一些情节和设定来帮助我们更深刻地理解js中的执行上下文，让枯燥的知识生动起来，让知识的孤岛链接起来。

文章安排：我会先大概介绍一下阿凡达电影的一些剧情，然后用阿凡达中的情节和设定来类比js的执行上下文，最后我们再总结和完善一下执行上下文的概念。

如果说你之前了解过执行上下文的概念最好，如果没有可以先阅读本文的最后一部分，粗略理解一下，再观看类比阿凡达的部分，这样效果会好一点。

说一下阿凡达的剧情（应该都看过吧）

故事发生在2154年，人类已经能够穿越宇宙，到达遥远的星球潘多拉。

潘多拉星球上有一种稀有的矿石，可以解决地球的能源危机。人类为了获取这种矿石，开始与潘多拉星球的原住民Na’vi族进行冲突。

主角杰克是一名前海军陆战队员，他因为哥哥的意外死亡，被选择接替哥哥的位置，参与了阿凡达计划。阿凡达计划是人类利用生物工程技术，制造了Na’vi族的人工生物体，人类可以通过神经链接设备控制这些人工生物体。

杰克在阿凡达身体中开始探索潘多拉星球，并与Na’vi族的公主奈蒂莉相识，两人逐渐产生了深厚的感情。杰克开始理解和尊重Na’vi族的生活方式，并决定帮助他们抵抗人类的侵略。

在电影的高潮部分，杰克联合Na’vi族和潘多拉星球的动物，与人类军队进行了一场激烈的战斗。最终，人类军队被击败，被迫离开潘多拉星球。

杰克选择留在潘多拉星球，并完成了转生仪式，他的意识被永久地转移到了他的阿凡达身体中，成为了一名真正的Na’vi族人。

阿凡达与执行上下文

在JavaScript中，执行上下文是代码执行的环境，它可以分为全局执行上下文、函数执行上下文和eval函数执行上下文。每个执行上下文都有三个重要的组成部分：变量对象、作用域链和this指针。这些概念可以通过电影《阿凡达》来形象地理解。

全局执行上下文

在电影的开头，我们被引入到潘多拉星球，这就像JavaScript的全局执行上下文。

在这个环境中，潘多拉星球就是全局对象，也就是this指针指向的对象。而星球上的各种元素和生物，包括人类基地、阿凡达、Na’vi族等，就像是全局变量和函数，它们构成了全局执行上下文的变量对象。

全局执行上下文的作用域链就是全局的，因为我们还没有进入任何函数。

函数执行上下文

当主角杰克进入阿凡达的身体，他进入了一个新的环境，这就是函数执行上下文。

在这个环境中，杰克的阿凡达身体就是this指针。他的能力和任务就像电影中的角色和环境，这就是函数执行上下文中的变量对象。

作用域链在这里就是由阿凡达的身体和潘多拉星球组成的，因为阿凡达的身体是在潘多拉星球上的。

Eval函数执行上下文

在电影中，有一个场景是杰克在阿凡达身体中，通过潘多拉的神秘力量与潘多拉星球的生态系统进行交流。

这个场景可以被看作是eval函数执行上下文，因为它是在主线之外的，同时又能访问和影响主线的环境和角色。在这个环境中，杰克的阿凡达身体仍然是this指针，他的能力和任务就像电影中的角色和环境，这就是eval函数执行上下文中的变量对象。

作用域链在这里就是由神秘力量、阿凡达的身体和潘多拉星球组成的，因为神秘力量是在阿凡达的身体和潘多拉星球上的。

总结

总结和完善一下执行上下文的概念，执行上下文可以分为三种类型：

1. 全局执行上下文：这是默认的、最基本的执行上下文。不在任何函数内部的代码都在全局执行上下文中。它做两件事：创建一个全局对象，并将this关键字设置为全局对象，全局执行上下文只有一个。

2. 函数执行上下文：每当一个函数被调用时，都会为该函数创建一个新的函数执行上下文。每个函数都有自己的执行上下文，但是只有当函数被调用时才会被创建，函数执行上下文可以有无数个。

3. Eval函数执行上下文：执行在eval函数内部执行的代码会根据它被调用的位置来决定其作用域链，大致相当于一个可以访问当前作用域的立即执行函数。了解即可，一般开发中不推荐使用eval，容易造成安全隐患，比如被攻击者注入恶意攻击代码。

每个执行上下文都有三个重要的组成部分：

• 变量对象（Variable Object）：包含了函数的参数（arguments）、局部变量和函数声明。

• 作用域链（Scope Chain）：用于解析变量名，当代码中出现一个变量时，JavaScript会从作用域链的顶端开始，逐级查找是否有一个匹配的变量。如果到最底端还未找到，那么会认为这个变量未定义（undefined）。

• this指针：在全局执行上下文中，它指向的是全局对象。在函数执行上下文中，this取决于函数是如何被调用的。如果它被一个对象调用，那么this就指向那个对象，否则指向全局对象（或undefined，如果在严格模式下）。

执行上下文的创建和执行过程分为两个阶段：创建阶段和执行阶段。在创建阶段，JavaScript引擎首先会创建变量对象，然后建立作用域链，最后确定this指针。在执行阶段，JavaScript引擎开始执行代码，这时候已经完成了所有的函数声明和变量声明。

有收获的话，可以点个赞哟。