面试题每日一练，测测你对JavaScript with 语句和作用域的理解

今天的挑战题目涉及到JavaScript中的 with 语句和变量作用域。with 语句允许你在指定对象的上下文中执行代码，但它的行为可能比你预想的更加复杂。让我们一起分析这段代码，看看它会输出什么以及为什么。

代码解析

首先，来看这段代码的前半部分：

const obj = {
  a: 1,
  b: 2
};

let a = 10;
let b = 20;

这里我们定义了一个对象 obj，它包含两个属性 a 和 b，它们的值分别是 1 和 2。同时，我们还定义了两个全局变量 a 和 b，它们的初始值分别是 10 和 20。

接下来，我们使用 with 语句来操作 obj 对象：

with (obj) {
  a += 1;
  b += 1;
}

理解 with 语句的作用

with 语句将 obj 对象的属性添加到当前作用域链的顶部，这意味着在 with 语句块中对属性的引用首先会查找 obj 对象的属性。

• 当执行 a += 1 时，JavaScript 引擎会首先查找 obj 中是否存在 a 属性。由于 obj.a 存在且等于 1，这行代码实际上等同于 obj.a += 1，所以 obj.a 的值将从 1 变为 2。

• 对于 b += 1，同样的逻辑适用。obj.b 存在且等于 2，所以这行代码等同于 obj.b += 1，因此 obj.b 的值将从 2 变为 3。

关键是，with 语句并不会影响到外部作用域的同名变量 a 和 b，因为在 with 块中，a 和 b 优先与 obj 的属性匹配。

输出结果

执行完 with 语句块后，我们来查看输出结果：

console.log(a, obj.a, b, obj.b);

• a：由于 with 语句块中对 a 的操作只影响了 obj.a，而全局变量 a 没有被修改，所以它仍然是 10。

• obj.a：在 with 语句块中，obj.a 被增加了 1，所以它的值变为 2。

• b：同理，with 语句块中的 b 操作只影响了 obj.b，全局变量 b 没有被修改，所以它仍然是 20。

• obj.b：在 with 语句块中，obj.b 被增加了 1，所以它的值变为 3。

因此，最终的输出是：

10 2 20 3

结束

这道题目展示了 with 语句的作用及其对作用域的影响。with 语句将指定对象的属性添加到作用域链的顶部，因此在 with 语句块中，属性引用首先会查找指定对象的属性，而不是外部作用域的同名变量。理解 with 语句的作用域规则对正确解答这道题目至关重要。你答对了吗？欢迎在评论区分享你的答案和想法！