JS 中的 with 语法：从「语法糖」到「不推荐使用」的全面解析

在 JavaScript 早期设计中，with 语法曾被视为「简化对象属性访问」的便捷工具------它允许你在代码块内直接引用对象的属性，无需重复写对象名。但随着 JS 语言的发展，with 的「便捷」逐渐被「风险」覆盖，不仅被严格模式禁用，还成为现代前端开发中的「反模式」。今天我们就从「是什么、怎么用、为什么被弃用」三个维度，彻底搞懂 with 语法。

一、先明确：with 语法到底是什么？

with 是 JavaScript 中的一个语句关键字 ，作用是「临时扩展当前作用域链」------在 with 代码块内部，你可以直接访问指定对象的属性，无需重复书写「对象名.属性名」的完整形式。

它的语法结构非常简单：

js 复制代码

with (指定对象) {
  // 代码块：可直接引用该对象的属性
}

举个直观的例子，没有 with 时，访问对象属性需要重复写对象名；有了 with，可以直接写属性名：

js 复制代码

// 定义一个用户对象
const user = {
  name: "张三",
  age: 28,
  address: {
    city: "北京",
    street: "朝阳路"
  }
};

// 1. 无 with：访问属性必须写 "user." 或 "user.address."
console.log(user.name); // 张三
console.log(user.age); // 28
console.log(user.address.city); // 北京

// 2. 有 with：临时将 user 加入作用域链，直接写属性名
with (user) {
  console.log(name); // 张三（等价于 user.name）
  console.log(age); // 28（等价于 user.age）
  
  // 嵌套对象也能简化（先将 address 加入作用域链）
  with (address) {
    console.log(city); // 北京（等价于 user.address.city）
    console.log(street); // 朝阳路（等价于 user.address.street）
  }
}

从表面看，with 像是「语法糖」，能减少重复代码------但这层「糖衣」下，藏着三个致命问题。

二、为什么 with 被禁用？三大核心风险

with 语法的设计缺陷，导致它不仅会降低代码可读性，还会引入隐蔽的 bug，甚至影响性能。这也是 ES5 引入严格模式后，直接禁用 with 的根本原因。

1. 变量/属性歧义：到底是「对象属性」还是「局部变量」？

with 代码块内，直接写的标识符（比如 name）可能有两种含义：

情况 1：是 with 指定对象的属性（如 user.name）；
情况 2：是代码块内声明的局部变量（如 let name = "李四"）。

但 JS 引擎无法在「编译阶段」确定它到底是哪种含义，只能在「运行阶段」动态判断------这会导致两个问题：

问题 1：代码可读性差，开发者容易误解

js 复制代码

const user = { name: "张三" };
let age = 18;

with (user) {
  // 这里的 age 是局部变量（18），还是 user.age（undefined）？
  console.log(age); // 输出 18（因为局部变量优先级更高）
  
  // 这里的 name 是 user.name（张三），还是未声明的变量？
  console.log(name); // 输出 张三
}

对于阅读代码的人来说，必须同时记住「with 的对象有哪些属性」和「外部有哪些变量」，才能判断标识符的含义------代码越复杂，误解概率越高。

问题 2：意外修改外部变量，引入隐蔽 bug

如果 with 对象没有某个属性，直接赋值会「意外创建全局变量」（普通模式下），或报错（严格模式下）：

js 复制代码

const user = { name: "张三" };

// 普通模式下：with 内赋值未定义的属性，会创建全局变量
with (user) {
  // user 没有 gender 属性，所以这行等价于「window.gender = "男"」
  gender = "男"; 
}
console.log(window.gender); // 男（意外污染全局）

// 更危险的场景：如果外部有同名变量，会被意外修改吗？
let score = 100;
with (user) {
  // user 没有 score 属性，所以这行等价于「score = 60」（修改外部变量）
  score = 60; 
}
console.log(score); // 60（外部变量被意外篡改）

这种 bug 非常隐蔽------开发者以为在修改「对象属性」，实际却在修改「全局/外部变量」，排查时很难定位原因。

2. 破坏作用域规则，导致性能下降

JavaScript 引擎的「性能优化」依赖于「编译阶段确定作用域」------比如，引擎会提前知道「某个变量在哪个作用域中」，从而快速查找。

但 with 会「动态扩展作用域链」：在 with 代码块内，作用域链会临时加入「指定对象」，而对象的属性是「动态的」（可能随时添加/删除），引擎无法在编译阶段确定「标识符到底属于哪个作用域」，只能在运行时逐行判断。

这会导致引擎的「优化策略失效」，代码执行速度变慢------尤其是在循环、高频调用的函数中使用 with，性能损耗会非常明显。

3. 严格模式直接禁用，现代工具不兼容

为了规避上述风险，ES5 引入的严格模式 直接禁止使用 with 语句------只要代码中启用了严格模式，使用 with 会直接抛出语法错误：

js 复制代码

"use strict";
const user = { name: "张三" };

with (user) { // SyntaxError: Strict mode code may not include a with statement
  console.log(name);
}

更关键的是，现代前端开发工具（webpack、Vite 等）会默认在打包后的代码中添加严格模式，这意味着即使你在源码中写了 with，打包后也会报错。

三、替代方案：不用 with，如何简化属性访问？

既然 with 被禁用，那有没有更安全的方式简化「对象属性访问」？当然有，以下三种方案既安全又符合现代 JS 规范：

1. 方案 1：解构赋值（最推荐）

ES6 引入的「解构赋值」可以直接提取对象的属性到局部变量，既简洁又明确，完全替代 with 的核心功能：

js 复制代码

const user = {
  name: "张三",
  age: 28,
  address: { city: "北京", street: "朝阳路" }
};

// 1. 解构对象顶层属性
const { name, age } = user;
console.log(name); // 张三
console.log(age); // 28

// 2. 解构嵌套对象（给嵌套属性起别名更清晰）
const { address: { city, street } } = user;
console.log(city); // 北京
console.log(street); // 朝阳路

// 3. 函数参数中解构（更常用）
function printUser({ name, age, address: { city } }) {
  console.log(`${name}, ${age}岁, 住在${city}`);
}
printUser(user); // 张三, 28岁, 住在北京

解构赋值的优势：

明确性：变量来自哪个对象，一目了然；
安全性：不会意外修改外部变量，也不会创建全局变量；
性能：编译阶段就能确定变量来源，不影响引擎优化。

2. 方案 2：给对象起短名（适合属性少的场景）

如果对象名很长（比如 this.$refs.userForm），可以给对象起一个短别名，减少重复书写：

js 复制代码

// 原代码：重复写很长的对象名
this.$refs.userForm.name = "张三";
this.$refs.userForm.age = 28;
this.$refs.userForm.validate();

// 优化：给对象起短名
const form = this.$refs.userForm;
form.name = "张三";
form.age = 28;
form.validate();

3. 方案 3：使用 `Object destructuring` 配合函数（复杂场景）

如果需要在多个地方访问同一对象的属性，可以封装一个函数，通过解构返回需要的属性：

js 复制代码

const user = {
  name: "张三",
  age: 28,
  address: { city: "北京" },
  hobbies: ["篮球", "编程"]
};

// 封装函数：提取需要的属性
function getUserInfo(user) {
  const { name, age, address: { city } } = user;
  return { name, age, city };
}

// 使用时直接获取简化后的属性
const { name, age, city } = getUserInfo(user);
console.log(name, age, city); // 张三 28 北京

四、总结：with 语法的「前世今生」

with 语法的设计初衷是「简化代码」，但由于它存在「歧义风险、性能问题、破坏作用域」三大缺陷，最终被严格模式禁用，成为 JS 语言中的「历史遗留特性」。

在现代前端开发中，我们有更安全、更高效的替代方案（解构赋值、短别名等），完全不需要依赖 with。记住：遇到需要简化对象属性访问的场景，优先用解构赋值，永远不要用 with------这不仅是规范，更是避免 bug 的关键。

最后用一句话总结 with 的命运：「始于便捷，终于风险，被现代 JS 淘汰是必然结果」。

JS 中的 with 语法：从「语法糖」到「不推荐使用」的全面解析