Symbol.unscopables 是 JavaScript 中一个相对较新的符号（Symbol），用于控制对象属性在 with 语句中的可见性。它主要用于内置对象，如 Array.prototype，以防止某些方法被引入到 with 语句的作用域中，避免潜在的命名冲突和意外覆盖。

---

Symbol.unscopables 简介

• 符号（Symbol）：

  • 在 ECMAScript 6 中引入，符号是一种新的基本数据类型，用于创建独一无二的标识符。

• Symbol.unscopables：

  • 是一个内置符号，用于定义哪些属性在使用 with 语句时 不会 被引入到作用域中。
  • 它的值通常是一个对象，属性名对应要排除的属性，属性值为 true 表示该属性在 with 语句中不可见。
    -Array.prototype[Symbol.unscopables] 的属性特性

属性特性	是/否
可写	否
可枚举	否
可配置	是

• 原型是null：
  • 因此不会意外地使 Object.prototype 属性（比如 toString）变为非作用域属性，而令在 with 语句中调用数组的 toString() 方法仍然有效。

为什么需要 Symbol.unscopables

• with 语句的作用：

  • with 语句用于将一个对象的属性作为当前作用域的变量。这在某些情况下可以简化代码，但也可能导致命名冲突和调试困难。

  const obj = { a: 1, b: 2 };
  with (obj) {
      console.log(a); // 1
      console.log(b); // 2
  }
  

• 潜在问题：

  • 当对象拥有与当前作用域中已有变量相同名称的属性时，会导致意外覆盖。
  • 为了解决这个问题，JavaScript 提供了 Symbol.unscopables，允许对象指定哪些属性在 with 语句中不可见。

Array.prototype[Symbol.unscopables] 的工作原理

• 内置排除：

  • 为了防止数组方法（如 keys, values, entries 等）在 with 语句中引起冲突，Array.prototype 定义了 Symbol.unscopables 属性。

• 示例：

  console.log(Array.prototype[Symbol.unscopables]);
  // 输出:
  // {
  //   copyWithin: true,
  //   entries: true,
  //   fill: true,
  //   find: true,
  //   findIndex: true,
  //   includes: true,
  //   keys: true,
  //   values: true
  // }
  

  • 这意味着在 with (array) 语句中，这些方法不会被自动引入到作用域中。

• 目的：

  • 确保在使用 with 语句时，数组的方法不会覆盖作用域中已有的变量或函数，避免命名冲突。

使用 Symbol.unscopables 的示例

示例 1：默认行为

const array = [1, 2, 3];

with (array) {
    console.log(length); // 3
    console.log(keys);    // ReferenceError: keys is not defined
}

• 解释：
  • length 是数组的一个属性，没有被排除，因此可以在 with 语句中直接访问。
  • keys 是数组的方法，并被 Symbol.unscopables 排除，因此在 with 语句中不可见，导致 ReferenceError。

示例 2：自定义对象使用 Symbol.unscopables

假设您有一个自定义对象，并希望在 with 语句中排除某些属性：

const myObject = {
    a: 10,
    b: 20,
    c: 30,
    [Symbol.unscopables]: {
        b: true
    }
};

with (myObject) {
    console.log(a); // 10
    console.log(b); // ReferenceError: b is not defined
    console.log(c); // 30
}

• 解释：
  • 属性 b 被 Symbol.unscopables 排除，因此在 with 语句中无法访问，导致 ReferenceError。
  • 属性 a 和 c 没有被排除，可以正常访问。

示例 3：实现自定义 unscopables

const myArray = [1, 2, 3];

// 自定义方法
myArray.customMethod = function() {
    return 'custom';
};

// 定义 unscopables
myArray[Symbol.unscopables] = {
    customMethod: true
};

with (myArray) {
    console.log(customMethod); // ReferenceError: customMethod is not defined
}

• 解释：
  • 尽管 myArray 拥有 customMethod，但通过 Symbol.unscopables 排除了该方法在 with 语句中的可见性。

注意事项

1. with 语句的局限性：

   • with 语句在严格模式下是禁止的，因为它会导致作用域链的不明确和潜在的性能问题。

   'use strict';
   const obj = { a: 1 };
   with (obj) { // SyntaxError: Strict mode code may not include a with statement
       console.log(a);
   }
   

2. 类数组对象的 unscopables：

   • 像 Array.prototype 这样的内置对象通常会定义 Symbol.unscopables，确保其方法不会在 with 语句中意外引入，从而保持代码的健壮性。

总结

Symbol.unscopables 是一个用于控制对象属性在 with 语句中可见性的符号属性。它允许对象明确指定哪些属性在使用 with 语句时应被排除，防止命名冲突和意外覆盖。尽管 with 语句在现代 JavaScript 开发中不推荐使用，理解 Symbol.unscopables 有助于深入了解 JavaScript 语言的设计和内置对象的行为。

如果您正在开发需要处理作用域链或动态属性访问的高级功能，了解并合理使用 Symbol.unscopables 将是有益的。然而，对于大多数日常开发任务，遵循明确的作用域管理和避免使用 with 语句是更好的选择。