摘要：設(shè)置對(duì)象屬性只讀。提供了一個(gè)注冊(cè)機(jī)制，當(dāng)你注冊(cè)之后，就能在全局共享注冊(cè)表里面的。的注冊(cè)表和對(duì)象表很像，都是結(jié)構(gòu)，只不過這個(gè)是值。語法只有一個(gè)參數(shù)，返回的是從注冊(cè)表獲取全局共享的注意如果要防止命名重復(fù)問題，可以加上前綴。

還記得對(duì)象Object嗎？

let obj = {
  a: 1
}

對(duì)象的格式：

Object {
    key: value
}

在ES5的時(shí)代，對(duì)象的key只能是字符串String類型。有人就想搞事，把key改成其他數(shù)據(jù)類型，這不是瞎折騰嗎？ES組織的大神們?yōu)榱藢?duì)付這類搞事的人，就指定了一個(gè)新的數(shù)據(jù)類型：Symbol。

學(xué)習(xí)Symbol之前，讓我們回憶一下你曾經(jīng)用過的原始數(shù)據(jù)類型，只有5個(gè)，別搞錯(cuò)了。

null、undefined

是不是面試的時(shí)候有人問過你這兩者的區(qū)別？問這種問題的人很無聊，你要是和他當(dāng)同事，真是受罪。

Number 數(shù)字類型

const a = 10
typeof a // number

String 字符串

const a = "haha"
typeof a // string

boolean 布爾型

const a = true, b = false

Symbol到底長(zhǎng)啥樣？又該怎么用呢？我們一起來探索一下。

在MDN文檔中，關(guān)于Symbol的說明是這樣的：

Symbol 是一種特殊的、不可變的數(shù)據(jù)類型，可以作為對(duì)象屬性的標(biāo)識(shí)符使用。Symbol 對(duì)象是一個(gè) symbol primitive data type 的隱式對(duì)象包裝器。

symbol 數(shù)據(jù)類型是一個(gè)原始數(shù)據(jù)類型。

Symbol的語法格式：

Symbol([description]) //description是可選的

創(chuàng)建一個(gè)Symbol：

看了Symbol的描述，不知道是什么鬼？長(zhǎng)得像個(gè)函數(shù)。

我們開始按照語法創(chuàng)建一個(gè)Symbol來研究一下

const name = Symbol();
const name1 = Symbol("sym1");
console.log(name, name1) // Symbol() Symbol(sym1)

Symbol不能使用new

const name = new Symbol(); //不可以這樣做。
//Symbol is not a constructor

使用Symbol：

使用Number的時(shí)候，我們可以這樣寫：

const b = Number(10) // 10
//簡(jiǎn)寫
const b = 10

同理，使用Symbol，我們可以這樣：

const name1 = Symbol("sym1"); // Symbol(sym1)

在所有使用可計(jì)算屬性名的地方，都能使用Symbol類型。比如在對(duì)象中的key。

const name = Symbol("name");
const obj = {
  [name]: "haha"
}
console.log(obj[name]) // haha

你還可以使用Object.defineProperty()和Object.defineProperties()方法。這2個(gè)方法是對(duì)象的方法，但是作為Symbol類型key，也不影響使用。

// 設(shè)置對(duì)象屬性只讀。
Object.defineProperty(obj, name, {writable: false})

這2個(gè)方法非常有用，在react源碼中，使用了大量的只讀屬性的對(duì)象。以下是從react源碼截取的一段代碼，設(shè)置了props對(duì)象只讀。但是react仍舊使用字符串作為key，并不用Symbol。

Object.defineProperty(props, "key", {
    get: warnAboutAccessingKey,
    configurable: true
  });

Symbol有點(diǎn)特殊，在js文件中定義的Symbol，并不能在其他文件直接共享。

ES6提供了一個(gè)注冊(cè)機(jī)制，當(dāng)你注冊(cè)Symbol之后，就能在全局共享注冊(cè)表里面的Symbol。Symbol的注冊(cè)表和對(duì)象表很像，都是key、value結(jié)構(gòu)，只不過這個(gè)value是Symbol值。
（key, Symbol）
語法：

Symbol.for() //只有一個(gè)參數(shù)

還有一個(gè)方法是獲取注冊(cè)表的Symbol。

語法：

Symbol.keyFor() //只有一個(gè)參數(shù)，返回的是key

從注冊(cè)表獲取全局共享的Symbol

let name = Symbol.for("name");
let name1 = Symbol.for("name1");
let name2 = Symbol.for("name2");

console.log(Symbol.keyFor(name)) // name
console.log(Symbol.keyFor(name1)) // name1
console.log(Symbol.keyFor(name2)) // name2

注意：如果要防止Symbol命名重復(fù)問題，可以加上前綴。如：hyy.name

JavaScript中的類型可以自動(dòng)轉(zhuǎn)換。比如Number轉(zhuǎn)換成字符串。

let a = 1;
console.log(typeof a); // number
console.log(a + " haha") // "1haha"

但是注意了，Symbol不支持這種轉(zhuǎn)換。Symbol就是這么拽??！

let a = Symbol("a");
console.log(typeof a);
console.log(a + " haha") // Cannot convert a Symbol value to a string

在對(duì)象中獲取字符串的key時(shí)，可以使用Object.keys()或Object.getOwnPropertyNames()方法獲取key，但是使用Symbol做key是，你就只能使用ES6新增的方法來獲取了。

let a = Symbol("a");
let b = Symbol("b");

let obj = {
  [a]: "123",
  [b]: 45
}

const symbolsKey = Object.getOwnPropertySymbols(obj);

for(let value of symbolsKey) {
  console.log(obj[value]) 
}
//"123"
//45

Symbol還提供了多個(gè)方法給開發(fā)者使用，我們不再一一研究每個(gè)方法的用途，你想要了解全面可以查看 Symbol MDN文檔

我們只需要知道Symbol如何定義，如何在全局共享，如果在對(duì)象中替代key即可應(yīng)付基本的開發(fā)需求了。

最后再回顧一下Symbol是什么：Symbol是JavaScript的原始數(shù)據(jù)類型，一個(gè)全新的數(shù)據(jù)類型，和對(duì)象、數(shù)字、字符串等完全不一樣，它必須通過Symbol()創(chuàng)建。它的使用看上面的詳細(xì)介紹。

=> 返回文章目錄