我第一次真正理解了作用域链

最近在摸鱼的时候忽然刷到一个面试题,考察的是有关作用域链的,当时就想八股文里应该没有比作用域链更简单的了,后来果然毫无意外的答错了,原来我根本就不了解它,只是以前没有撞枪口上,这下栽了。本文就浅浅记录一下我更正错误的决心

面试题

js 复制代码
function bar() {
    console.log(myName)
}
function foo() {
    var myName = "foo里面"
    bar()
}
var myName = "foo外面"
foo()

看到题目的第一反应,就判断了答案是foo里面,想着bar里面没有myName,然后直接找他的上级foo,答案不就出来了吗,控制台直接打印,GG......

调用栈

首先,要理解作用域链要先理解好js的执行机制,抛开变量提升什么乱七八糟的先不谈,js的执行机制概括来说就是先编译,后执行。我们主要分析的是编译阶段。

一段js代码在执行前,都会编译并创建执行上下文,一般有以下几种情况

  • 当 JavaScript 执行全局代码的时候,会编译全局代码并创建全局执行上下文,而且在整个页面的生存周期内,全局执行上下文只有一份。
  • 当调用一个函数的时候,函数体内的代码会被编译,并创建函数执行上下文,一般情况下,函数执行结束之后,创建的函数执行上下文会被销毁。
  • 当使用 eval 函数的时候,eval 的代码也会被编译,并创建执行上下文。

编译阶段创建好执行上下文,压入调用栈,遵循先进后出的原则

由此,根据代码,可以得到以下调用栈的示意图

let、const关键字定义的变量不存在变量提升,才会被保存在词法环境

按照上面的图,我坚信我自己是对的,肯定是js有毒

outer

经过进一步查资料,发现了它 - outer

其实在每个执行上下文的变量环境中,都包含了一个外部引用,用来指向外部的执行上下文,我们把这个外部引用称为 outer

词法作用域

可是我们不知道outer的指向规则是什么,主观意识就觉得会指向foo的 执行上下文,但其实不然,还和另一个概念有关,它叫做词法作用域

词法作用域就是指作用域是由代码中函数声明的位置来决定的,所以词法作用域是静态的作用域,通过它就能够预测代码在执行过程中如何查找标识符

作用域链是由词法作用域决定的

真相

引入新概念,我们可以把上图优化一下

从图中可以看出,bar 和 foo 的 outer 都是指向全局上下文的,这也就意味着如果在 bar或者 foo中使用了外部变量,那么 JavaScript 引擎会去全局执行上下文中查找。我们把这个查找的链条就称为作用域链。同时也说明了,词法作用域是代码编译阶段就决定好的,和函数是怎么调用的没有关系。

相关推荐
拖孩31 分钟前
AI 帮我写的小程序「厨菜记」上线满月了,挣了两百块!!!
前端·后端·微信小程序
用户3600555790032 分钟前
Kestrel_VLLM - 13 · 为什么排除 MoE FFN Tiling 与 Tensor Core
前端
Hilaku41 分钟前
AI 流式输出都用 SSE,什么时候必须换 WebSocket?
前端·javascript·程序员
奇牙coding1 小时前
Codex CLI 升级后多文件编辑静默失效:config.yaml 枚举变更排查与修复指南
java·前端·javascript·ai
小羊没烦恼!1 小时前
Ajax与JSON的一些总结
android·java·前端·数据库·mysql·算法·okhttp
程序员老赵1 小时前
Docker 部署 Filestash:轻松搭建浏览器文件管理平台
前端·docker·开源
夏天要喝冰可乐1 小时前
给 23 万字修仙小说造个阅读站:浏览器内打包 EPUB 分页阅读 + 三主题实战
前端·产品·全栈
茶底世界之下1 小时前
林间步道要不要加暗角?用 Awaking 把强度收在20%
前端·ios·图片资源
执子念的飞鱼1 小时前
纯前端预览 275 种文件格式是怎么做到的
前端·vue.js·react.js
行者全栈架构师1 小时前
【鸿蒙心迹】互动卡片全链路——把核心功能放到桌面(FormKit 实战)(HarmonyOS 7.x)
前端·算法·架构