2021-03-09 【阿里面試】有關symbol的一些知識(1)-基礎知識

相關文章：【阿里面試】有關symbol的一些知識(1)-基礎知識
【阿里面試】有關symbol的一些知識(2)-實例
【阿里面試】有關symbol的一些知識(3)-內置方法

作用

ES5 的對象屬性名都是字符串，這容易造成屬性名的衝突。比如，你使用了一個他人提供的對象，但又想爲這個對象添加新的方法（mixin 模式），新方法的名字就有可能與現有方法產生衝突。如果有一種機制，保證每個屬性的名字都是獨一無二的就好了，這樣就從根本上防止屬性名的衝突。這就是 ES6 引入Symbol的原因。

簡介

ES6 引入了一種新的原始數據類型Symbol，表示獨一無二的值。它是 JavaScript 語言的第七種數據類型，前六種是：undefined、null、布爾值（Boolean）、字符串（String）、數值（Number）、對象（Object）。

let s = Symbol();

typeof s;
// "symbol"

注意，Symbol函數前不能使用new命令，否則會報錯。這是因爲生成的 Symbol 是一個原始類型的值，不是對象。

也就是說，由於 Symbol 值不是對象，所以不能添加屬性。基本上，它是一種類似於字符串的數據類型。

Symbol 函數可以接受一個字符串作爲參數，表示對 Symbol 實例的描述，主要是爲了在控制檯顯示，或者轉爲字符串時，比較容易區分。

let s1 = Symbol("foo");
let s2 = Symbol("bar");

s1; // Symbol(foo)
s2; // Symbol(bar)

s1.toString(); // "Symbol(foo)"
s2.toString(); // "Symbol(bar)"

如果 Symbol 的參數是一個對象，就會調用該對象的 toString 方法，將其轉爲字符串，然後才生成一個 Symbol 值。

const obj = {
  toString() {
    return "abc";
  },
};
const sym = Symbol(obj);
sym; // Symbol(abc)

注意，Symbol 函數的參數只是表示對當前 Symbol 值的描述，因此相同參數的 Symbol 函數的返回值是不相等的。

// 沒有參數的情況
let s1 = Symbol();
let s2 = Symbol();

s1 === s2; // false

// 有參數的情況
let s1 = Symbol("foo");
let s2 = Symbol("foo");

s1 === s2; // false

Symbol 值不能與其他類型的值進行運算，會報錯。

let sym = Symbol("My symbol");

"your symbol is " + sym;
// TypeError: can't convert symbol to string
`your symbol is ${sym}`;
// TypeError: can't convert symbol to string

但是，Symbol 值可以顯式轉爲字符串。

let sym = Symbol("My symbol");

String(sym); // 'Symbol(My symbol)'
sym.toString(); // 'Symbol(My symbol)'

另外，Symbol 值也可以轉爲布爾值，但是不能轉爲數值。

let sym = Symbol();
Boolean(sym); // true
!sym; // false

if (sym) {
  // ...
}

Number(sym); // TypeError
sym + 2; // TypeError

Symbol.prototype.description

ES2019 提供了一個實例屬性 description，直接返回 Symbol 的描述。

const sym = Symbol("foo");

sym.description; // "foo"

作爲屬性名的 Symbol

由於每一個 Symbol 值都是不相等的，這意味着 Symbol 值可以作爲標識符，用於對象的屬性名，就能保證不會出現同名的屬性。這對於一個對象由多個模塊構成的情況非常有用，能防止某一個鍵被不小心改寫或覆蓋。

let mySymbol = Symbol();

// 第一種寫法
let a = {};
a[mySymbol] = "Hello!";

// 第二種寫法
let a = {
  [mySymbol]: "Hello!",
};

// 第三種寫法
let a = {};
Object.defineProperty(a, mySymbol, { value: "Hello!" });

// 以上寫法都得到同樣結果
a[mySymbol]; // "Hello!"

注意，Symbol 值作爲對象屬性名時，不能用點運算符

const mySymbol = Symbol();
const a = {};

a.mySymbol = "Hello!";
a[mySymbol]; // undefined
a["mySymbol"]; // "Hello!"

上面代碼中，因爲點運算符後面總是字符串，所以不會讀取 mySymbol 作爲標識名所指代的那個值，導致 a 的屬性名實際上是一個字符串，而不是一個 Symbol 值。

在對象的內部，使用 Symbol 值定義屬性時，Symbol 值必須放在方括號之中。

let s = Symbol();

let obj = {
  [s]: function (arg) { ... }
};

obj[s](123);

上面代碼中，如果 s 不放在方括號中，該屬性的鍵名就是字符串 s，而不是 s 所代表的那個 Symbol 值。

採用增強的對象寫法，上面代碼的 obj 對象可以寫得更簡潔一些。

let obj = {
  [s](arg) { ... }
};

Symbol 類型還可以用於定義一組常量，保證這組常量的值都是不相等的。

const log = {};

log.levels = {
  DEBUG: Symbol("debug"),
  INFO: Symbol("info"),
  WARN: Symbol("warn"),
};
console.log(log.levels.DEBUG, "debug message"); // Symbol(debug) "debug message"
console.log(log.levels.INFO, "info message"); // Symbol(info) "info message"

const COLOR_RED = Symbol();
const COLOR_GREEN = Symbol();

function getComplement(color) {
  switch (color) {
    case COLOR_RED:
      return COLOR_GREEN;
    case COLOR_GREEN:
      return COLOR_RED;
    default:
      throw new Error("Undefined color");
  }
}

常量使用 Symbol 值最大的好處，就是其他任何值都不可能有相同的值了，因此可以保證上面的 switch 語句會按設計的方式工作。

還有一點需要注意，Symbol 值作爲屬性名時，該屬性還是公開屬性，不是私有屬性。

屬性名的遍歷

Symbol 作爲屬性名，遍歷對象的時候，該屬性不會出現在 for...in、for...of 循環中，也不會被 Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。

但是，它也不是私有屬性，有一個 Object.getOwnPropertySymbols()方法，可以獲取指定對象的所有 Symbol 屬性名。該方法返回一個數組，成員是當前對象的所有用作屬性名的 Symbol 值。

const obj = {};
let a = Symbol("a");
let b = Symbol("b");

obj[a] = "Hello";
obj[b] = "World";

const objectSymbols = Object.getOwnPropertySymbols(obj);

objectSymbols;
// [Symbol(a), Symbol(b)]

const obj = {};
const foo = Symbol("foo");

obj[foo] = "bar";

for (let i in obj) {
  console.log(i); // 無輸出
}

Object.getOwnPropertyNames(obj); // []
Object.getOwnPropertySymbols(obj); // [Symbol(foo)]

另一個新的 API，Reflect.ownKeys()方法可以返回所有類型的鍵名，包括常規鍵名和 Symbol 鍵名。

let obj = {
  [Symbol("my_key")]: 1,
  enum: 2,
  nonEnum: 3,
};

Reflect.ownKeys(obj);
//  ["enum", "nonEnum", Symbol(my_key)]

由於以 Symbol 值作爲鍵名，不會被常規方法遍歷得到。我們可以利用這個特性，爲對象定義一些非私有的、但又希望只用於內部的方法。

let size = Symbol("size");

class Collection {
  constructor() {
    this[size] = 0;
  }

  add(item) {
    this[this[size]] = item;
    this[size]++;
  }

  static sizeOf(instance) {
    return instance[size];
  }
}

let x = new Collection();
Collection.sizeOf(x); // 0

x.add("foo");
Collection.sizeOf(x); // 1

Object.keys(x); // ['0']
Object.getOwnPropertyNames(x); // ['0']
Object.getOwnPropertySymbols(x); // [Symbol(size)]

對象 x 的 size 屬性是一個 Symbol 值，所以 Object.keys(x)、Object.getOwnPropertyNames(x)都無法獲取它。這就造成了一種非私有的內部方法的效果。

Symbol.for()，Symbol.keyFor()

我們希望重新使用同一個 Symbol 值，Symbol.for()方法可以做到這一點。它接受一個字符串作爲參數，然後搜索有沒有以該參數作爲名稱的 Symbol 值。如果有，就返回這個 Symbol 值，否則就新建一個以該字符串爲名稱的 Symbol 值，並將其註冊到全局。

let s1 = Symbol.for("foo");
let s2 = Symbol.for("foo");

s1 === s2; // true

Symbol.for()與 Symbol()這兩種寫法，都會生成新的 Symbol。

它們的區別是，前者會被登記在全局環境中供搜索，後者不會。Symbol.for()不會每次調用就返回一個新的 Symbol 類型的值，而是會先檢查給定的 key 是否已經存在，如果不存在纔會新建一個值。

比如，如果你調用 Symbol.for("cat")30 次，每次都會返回同一個 Symbol 值，但是調用 Symbol("cat")30 次，會返回 30 個不同的 Symbol 值。

Symbol.keyFor()方法返回一個已登記的 Symbol 類型值的 key。

let s1 = Symbol.for("foo");
Symbol.keyFor(s1); // "foo"

let s2 = Symbol("foo");
Symbol.keyFor(s2); // undefined

注意，Symbol.for()爲 Symbol 值登記的名字，是全局環境的，不管有沒有在全局環境運行

function foo() {
  return Symbol.for("bar");
}

const x = foo();
const y = Symbol.for("bar");
console.log(x === y); // true

Symbol.for()的這個全局登記特性，可以用在不同的 iframe 或 service worker 中取到同一個值。

iframe = document.createElement("iframe");
iframe.src = String(window.location);
document.body.appendChild(iframe);

// iframe 窗口生成的 Symbol 值，可以在主頁面得到。
iframe.contentWindow.Symbol.for("foo") === Symbol.for("foo");
// true

原文：# ECMAScript 6 入門