一、概念層

ES6 引入的 Symbol 類型，除了能自定義唯一標(biāo)識(shí)符外，還定義了一批 內(nèi)置 Symbol（Well-known Symbols） ，這些是語言層面的“鉤子（hooks）”，允許開發(fā)者 改變對(duì)象在特定場景下的默認(rèn)行為。

常見的內(nèi)置 Symbol 有：

• 轉(zhuǎn)換與類型相關(guān)：Symbol.toPrimitive、Symbol.toStringTag
• 作用域控制：Symbol.unscopables
• 正則相關(guān)：Symbol.match、Symbol.replace、Symbol.search、Symbol.split
• 迭代協(xié)議：Symbol.iterator、Symbol.asyncIterator
• 其它對(duì)象行為：Symbol.hasInstance、Symbol.isConcatSpreadable、Symbol.species

二、原理層（核心作用）

1. Symbol.toPrimitive

• 控制對(duì)象被轉(zhuǎn)為原始值時(shí)的行為。
• 觸發(fā)場景：+、Number(obj)、String(obj)。

2. Symbol.toStringTag

• 控制 Object.prototype.toString.call(obj) 的結(jié)果標(biāo)簽。
• 默認(rèn)："[object ClassName]"，可自定義。

3. Symbol.unscopables

• 控制 with 語句中哪些屬性被屏蔽。
• 值為對(duì)象 { prop: true } → 屬性不可見。

4. Symbol.match

• 定義對(duì)象在 str.match(obj) 中的行為。
• 默認(rèn)：正則對(duì)象調(diào)用 RegExp.prototype[Symbol.match]。

5. Symbol.replace

• 定義對(duì)象在 str.replace(obj, replacement) 中的行為。
• 默認(rèn)：正則對(duì)象調(diào)用 RegExp.prototype[Symbol.replace]。

6. Symbol.search

• 定義對(duì)象在 str.search(obj) 中的行為。

7. Symbol.split

• 定義對(duì)象在 str.split(obj) 中的行為。

8. Symbol.iterator

• 定義對(duì)象的默認(rèn)迭代器，使其可被 for...of、解構(gòu)、... 展開使用。

9. Symbol.asyncIterator

• 定義對(duì)象的異步迭代器，支持 for await...of。

10. Symbol.hasInstance

• 控制 obj instanceof Class 的行為。

11. Symbol.isConcatSpreadable

• 控制數(shù)組/類數(shù)組對(duì)象在 concat 時(shí)是否展開。

12. Symbol.species

• 控制派生對(duì)象的方法（如 map、filter）返回的構(gòu)造函數(shù)。

三、對(duì)比層（表格總結(jié)）

四、實(shí)踐層（代碼示例 + 注釋）

1. Symbol.toPrimitive

const user = {
  name: "Alice",
  age: 25,
  [Symbol.toPrimitive](hint) {
    if (hint === "number") return this.age;
    if (hint === "string") return this.name;
    return `${this.name}, ${this.age}`;
  }
};

console.log(+user);        // 25
console.log(`${user}`);    // "Alice"
console.log(user + "!");   // "Alice, 25!"

2. Symbol.toStringTag

class Car {
  get [Symbol.toStringTag]() {
    return "SuperCar";
  }
}

console.log(Object.prototype.toString.call(new Car())); 
// [object SuperCar]

3. Symbol.unscopables

const obj = {
  a: 1,
  b: 2,
  [Symbol.unscopables]: { b: true }
};

with (obj) {
  console.log(a); // 1
  // console.log(b); // ReferenceError: b is not defined
}

4. Symbol.match

const matcher = {
  [Symbol.match](str) {
    return str.includes("JS") ? ["JS Found!"] : null;
  }
};

console.log("I love JS".match(matcher)); // ["JS Found!"]
console.log("Hello".match(matcher));     // null

5. Symbol.replace

const replacer = {
  [Symbol.replace](str, replacement) {
    return str.split("bad").join(replacement);
  }
};

console.log("bad code, bad style".replace(replacer, "good"));
// "good code, good style"

6. Symbol.search

const searcher = {
  [Symbol.search](str) {
    return str.indexOf("needle");
  }
};

console.log("Find the needle in haystack".search(searcher)); 
// 9

7. Symbol.split

const splitter = {
  [Symbol.split](str) {
    return str.split(" ").reverse();
  }
};

console.log("one two three".split(splitter)); 
// ["three", "two", "one"]

8. Symbol.iterator

const range = {
  from: 1, to: 3,
  *[Symbol.iterator]() {   // 生成器定義迭代器
    for (let i = this.from; i <= this.to; i++) yield i;
  }
};

console.log([...range]); // [1, 2, 3]

9. Symbol.asyncIterator

const asyncRange = {
  from: 1, to: 3,
  async *[Symbol.asyncIterator]() {
    for (let i = this.from; i <= this.to; i++) {
      await new Promise(r => setTimeout(r, 100)); // 模擬異步
      yield i;
    }
  }
};

(async () => {
  for await (const num of asyncRange) {
    console.log(num); // 1, 2, 3
  }
})();

10. Symbol.hasInstance

class Even {
  static [Symbol.hasInstance](x) {
    return typeof x === "number" && x % 2 === 0;
  }
}

console.log(2 instanceof Even); // true
console.log(3 instanceof Even); // false

11. Symbol.isConcatSpreadable

const arr = [1, 2];
const obj = { 0: "a", 1: "b", length: 2, [Symbol.isConcatSpreadable]: true };

console.log(arr.concat(obj)); // [1, 2, "a", "b"]

12. Symbol.species

class MyArray extends Array {
  static get [Symbol.species]() {
    return Array; // 派生方法返回普通數(shù)組
  }
}

const a = new MyArray(1, 2, 3);
const b = a.map(x => x * 2);

console.log(b instanceof MyArray); // false
console.log(b instanceof Array);   // true

五、拓展層

正則相關(guān) Symbol（match/replace/search/split）

• 讓對(duì)象偽裝成正則，或者實(shí)現(xiàn)特殊文本處理邏輯。
• 比如寫一個(gè)“敏感詞替換器”。

與 Proxy 結(jié)合

• 可以在代理對(duì)象里攔截這些 Symbol 鉤子，動(dòng)態(tài)修改行為。

類庫設(shè)計(jì)

• toPrimitive 和 toStringTag 常用于類庫，使自定義對(duì)象更自然地融入 JS 語法。

六、潛在問題

• 可讀性下降：過度使用 Symbol 鉤子會(huì)讓對(duì)象行為難以預(yù)測。
• 調(diào)試難度增加：如 toPrimitive 的隱式觸發(fā)，可能導(dǎo)致詭異結(jié)果。
• 兼容性：unscopables 與 with 相關(guān)，而 with 本身不推薦使用。

? 總結(jié)：

• 轉(zhuǎn)換類：toPrimitive、toStringTag、unscopables
• 正則類：match、replace、search、split
• 迭代類：iterator、asyncIterator
• 對(duì)象行為類：hasInstance、isConcatSpreadable、species

這些內(nèi)置 Symbol 就像“魔法鉤子”，能讓對(duì)象在不同語境下展現(xiàn)出完全不同的行為。

以上就是一文詳解JavaScript內(nèi)置Symbol方法(含示例)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript內(nèi)置Symbol方法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論