JavaScript变量作用域与作用域链深度解析

回顾过往开发经历，JavaScript的学习深度仍有不足。趁着周末空闲时间，购买了被誉为“犀牛书”的《JavaScript权威指南》，旨在系统深入地掌握JavaScript核心知识。初版阅读印象是篇幅厚重，但其中近半内容为参考手册性质。

JavaScript变量作用域基础

一、作用域基础

讨论变量时，首要概念即为作用域。由于对JavaScript作用域机制不熟悉，开发者常将面向对象的作用域规则错误地套用于JS，这种习惯性思维虽常见，但并非适用于所有场景。JavaScript采用的是函数作用域。浏览器环境本质上是一个被实例化的window对象，若在window层级定义name字段，则该变量具备window函数作用域，即在window范围内均可访问。若在window下定义ctrip函数，并在其中定义同名name变量，则该新定义的name仅局限于ctrip函数内部生效，而外部的name仍保留在window作用域中。

观察相关示意图，可得出以下两点结论：

1. 在window层级定义了name后，仍可在函数内部定义同名变量，这在C#等强类型语言中通常是不被允许的。

2. JavaScript表现出“只关注当前作用域”的特性，从而产生第一个输出“second”。这看似平常，实则体现了对函数作用域的深层理解。当解析器执行ctrip函数时，首要任务是扫描并收集该函数内的所有局部变量声明，随后再执行后续代码。因此，var name="second"语句在ctrip函数体内的任何位置声明均有效。

调整语句顺序后可以看到，在ctrip函数内部，第一个console.log输出结果为undefined。这一结果证实了解析器确实优先收集了name局部变量。有人可能疑惑为何未直接显示“second”，原因在于初始化操作是逐语句执行的。当执行console.log(name)时，解析器仅知晓存在一个名为name的变量，但尚未完成赋值，因此输出undefined。

作用域链与变量查找机制

二、作用域链机制

前述示例清晰表明，在function中定义的变量仅具备该function范围内的作用域。同时，示例仅展示了一层嵌套（window包含ctrip）。同理，此规则可延伸至多层嵌套，如三层、四层乃至N层，这些层级共同构成了链式结构，即作用域链。

从示意图可见，在ctrip内部再定义plane函数，形成三层嵌套。输出结果符合预期：每层的name变量仅在其自身作用域范围内生效。

然而，若出现一种情况：在定义plane函数时，误将var name="third"中的var关键字遗漏，此时plane中的name值究竟为何？是first还是second？

具体代码如下所示：

var name="first";
function ctrip(){
var name="second";
function plane(){
name="third";
console.log(name);
  }
plane();
console.log(name);
}
ctrip();
console.log(name);

此时考验对作用域链的理解。当代码执行至plane函数内的name="third"时，解析器发现plane内部无name局部变量，遂沿作用域链回溯至外层ctrip函数。在ctrip中找到name变量后，解析器将ctrip中的name值修改为“third”。

另一种情形：若再次出现笔误，在plane函数中将name="third"错写为nam="third"（漏掉字母e），这并非代码逻辑问题，而是书写错误。此时解析器将如何处理？

同理，在回溯查找过程中，解析器发现ctrip中无nam变量，继续回溯至顶层window对象，依然未找到nam。

此时解析器采取如下处理策略：既然整个作用域链中均不存在该变量，且用户进行了赋值操作，为避免报错尴尬，解析器会隐式地在window对象下定义一个nam变量。

此时，nam即成为全局变量。我们可在window顶层通过console.log(nam)进行验证。

关于变量作用域的核心内容即此，理解其机制后便不再复杂。