周末加班改bug的时候突然想到个事——上周有个小老弟问我,“哥,为啥我写的script标签里变量a明明声明了,console.log却报ReferenceError?”我kan了眼他代码:哦豁,if语句里用var a=1;外面console.log,结果浏览器说没找到.我当时就笑了:“害,这就是没搞清楚var那点破事儿——它可没有块级作用域啊!”

你有没有过类似经历?变量明明在眼前飘着,引擎偏说找不到;或者两个函数里变量重名搞混了取值;再或者用了闭包返回函数后值不对…这些坑百分之八十dou跟"作用域"有关.今天咱就好好唠唠——你真的掌握JS作用域的奥秘了吗?

hen多人从小白教程里听说"JS是解释型语言",我当初也信了.直到后来踩坑踩多了才明白:所有现代浏览器里跑的JS引擎,dou是先把你的代码"翻译"一遍再执行——这叫JIT编译.不信?kan段简单代码:

var a = 10;

你以为引擎就傻呵呵地读一行执行一行?天真!它背地里分两步走:

第一步:编译器偷偷在当前作用域里"登记"一个叫a 的变量——相当于跟引擎打个招呼:"待会儿我要用到a啦,先给它留个位置".

第二步:引擎开始干活,在当前作 用 域 里 找 a ,找到之后给它赋值10.

这个过程里有三个角色超关键:

①编译器:负责把你的源码拆成token,再拼成AST语法树,Zui后生成字节码——相当于代码 的 "翻译官".

②引擎:负责执行字节码,管理内存和变量赋值——就是那个"吭哧吭哧干活" 的家伙.

③作 用 域 : 负 责 管 理 "变 量 的 登 记 和 查 找 " ——比 如 "a是属于哪个地盘 的?""找不到a该去哪问?"

搞不懂这三个角色?没关系,先记住一句话: 作 用 域 在 "编 译 阶 段 "就定死了,跟运行时没关系.

啥叫词法作 用 ?简单说就是:"变 在代 ,位决 的访范".举个Zui常见 的例子:

var globalName = "全世界douNengkan到我";function outer {    var outerName = "只有outer和里面Nengkan到我";    function inner {        var innerName = "只有inner自己Nengkan到我";        console.log; // ✅Nengkan到外层        console.log; // ✅Nengkan到外层外层        console.log; // ✅自己家 的    }    inner;}outer;

kan明白没?inner函数Neng访问到outer和全局 的变量 ,但反过来不行——因为inner是在outer里面定义 的 ,它 的"词法作 在出生时就绑死在outer和全局身上 .

这跟"动态作 "完全两码事!比如某些老语言 ,函在哪儿调用决定Neng访问啥 ——但 JS从生到死dou是词法作 .

再说个扎心 的 :你写代码时打错一个缩进 ,dou可Neng让作 dom变样 .比如把inner函数写到outer外面 ,那它就访问不到outerName了 ——所以以后写代码别乱缩进啊喂!

刚才那个嵌套函 的例子 ,本质上就是作 在起 .当引要找一个变 ,它会沿着一条"链 "从内往外翻 :

先kan自己 当前作 有没有这个变 ;没有?去上一层 ;还没有?再上一层 ;再没有?报ReferenceError.

遮蔽效应:

var name = "全局老王";function sayHi {    var name = "局部小李";    console.log; // →输出"局部小李"

LHS vs RHS查询:

console.log; // RHS查询:找a的值→没找到报错var b = a + c; // RHS查a和c的值→赋值给b→LHS查b并赋值

// eval等价于直接写var x=5//但Ru果eval在函内部呢?function test{    eval;    console.log;//→6};