JavaScript with语句跨Frame变量引用陷阱与解析机制

with语句的语法糖与跨Frame应用

在脚本编程中使用with语句，可以显著缩短多级对象引用的代码长度，这是JScript提供的一种语法糖。虽然不使用with语句而通过临时变量也能达到相同效果，但为临时变量命名往往令人头疼。就连MASM高版本也提供了@@（以及@F和@B）来处理临时标号问题，可见开发者普遍倾向于简化命名工作。

我也倾向于使用with语句，因为它能简化代码并提高清晰度，尤其在处理跨Frame的变量引用时更为便捷。然而，今天我就因贪图方便而遇到了一个棘手的Bug，在with块中获取跨Frame变量时，花费了大量时间排查一个看似莫名其妙的错误。

跨Frame变量引用导致的Bug案例

代码逻辑并不复杂：在一个with块中，对另一个Frame中的变量进行引用和计算，并将结果赋值给当前页面函数的局部变量。示例代码大致如下：

var hierarchies = [];

with(parent.frames['xxxFrame'])

// 引用xxxFrame里的变量和值产生我要的东西

hierarchies.push(xxx);

// 开始使用hierarchies

此时，hierarchies数组的表现出乎意料，无论怎样调整，其内部值始终与预期存在差异，但并非完全错误（后续将解释原因，这也是导致Debug过程极其困惑的关键点）。

变量遮蔽与JScript搜索规则解析

问题根源在于：xxxFrame中也存在一个名为hierarchies的变量，且同样为数组，其内容与我在外部定义的数组内容相似。这解释了为何Debug过程如此令人困惑。此外，由于之前曾成功使用类似的with语句跨页面获取数据，潜意识里误认为with块内的hierarchies就是with外部的局部变量。尽管不记得xxxFrame中的变量是否由自己定义，但Debug过程确实令人沮丧。

JScript手册指出，with(objects) statements的作用是为语句设定默认对象。然而，在with内部对变量的作用范围遵循特定的搜索规则：优先在默认对象（objects）中进行匹配。尽管默认对象的作用域看似“更远”（如跨Frame情况），但当默认对象引用中无法匹配变量时，才会匹配with之前声明过的变量。若两者均无法匹配，则变量值为undefined。

本文仅作为“Debug中的滑铁卢”案例收录，旨在提醒开发者注意with语句在复杂作用域下的潜在风险。