ES6-Symbol

1.概述

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

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

Symbol 值通過Symbol函數(shù)生成。這就是說,對象的屬性名現(xiàn)在可以有兩種類型,一種是原來就有的字符串,另一種就是新增的 Symbol 類型。凡是屬性名屬于 Symbol 類型,就都是獨一無二的,可以保證不會與其他屬性名產(chǎn)生沖突。

let s = Symbol();

typeof s
// "symbol"

上面代碼中,變量s就是一個獨一無二的值。typeof運算符的結果,表明變量s是 Symbol 數(shù)據(jù)類型,而不是字符串之類的其他類型。

注意,Symbol函數(shù)前不能使用new命令,否則會報錯。這是因為生成的 Symbol 是一個原始類型的值,不是對象。也就是說,由于 Symbol 值不是對象,所以不能添加屬性?;旧?,它是一種類似于字符串的數(shù)據(jù)類型。

Symbol函數(shù)可以接受一個字符串作為參數(shù),表示對 Symbol 實例的描述,主要是為了在控制臺顯示,或者轉為字符串時,比較容易區(qū)分。

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

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

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

上面代碼中,s1和s2是兩個 Symbol 值。如果不加參數(shù),它們在控制臺的輸出都是Symbol(),不利于區(qū)分。有了參數(shù)以后,就等于為它們加上了描述,輸出的時候就能夠分清,到底是哪一個值。

如果 Symbol 的參數(shù)是一個對象,就會調(diào)用該對象的toString方法,將其轉為字符串,然后才生成一個 Symbol 值。

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

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

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

s1 === s2 // false

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

s1 === s2 // false

上面代碼中,s1和s2都是Symbol函數(shù)的返回值,而且參數(shù)相同,但是它們是不相等的。

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 值也可以轉為布爾值,但是不能轉為數(shù)值。

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

if (sym) {
  // ...
}

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

2.作為屬性名的 Symbol

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

let mySymbol = Symbol();

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

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

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

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

上面代碼通過方括號結構和Object.defineProperty,將對象的屬性名指定為一個 Symbol 值。

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

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

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

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

同理,在對象的內(nèi)部,使用 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');
console.log(log.levels.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 值作為屬性名時,該屬性還是公開屬性,不是私有屬性。

3.屬性名的遍歷

Symbol 作為屬性名,該屬性不會出現(xiàn)在for...in、for...of循環(huán)中,也不會被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。但是,它也不是私有屬性,有一個Object.getOwnPropertySymbols方法,可以獲取指定對象的所有 Symbol 屬性名。

Object.getOwnPropertySymbols方法返回一個數(shù)組,成員是當前對象的所有用作屬性名的 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)]

下面是另一個例子,Object.getOwnPropertySymbols方法與for...in循環(huán)、Object.getOwnPropertyNames方法進行對比的例子。

const obj = {};

let foo = Symbol("foo");

Object.defineProperty(obj, foo, {
  value: "foobar",
});

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

Object.getOwnPropertyNames(obj)
// []

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

上面代碼中,使用Object.getOwnPropertyNames方法得不到Symbol屬性名,需要使用Object.getOwnPropertySymbols方法。

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

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

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

由于以 Symbol 值作為名稱的屬性,不會被常規(guī)方法遍歷得到。我們可以利用這個特性,為對象定義一些非私有的、但又希望只用于內(nèi)部的方法。

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)都無法獲取它。這就造成了一種非私有的內(nèi)部方法的效果。

4.Symbol.for(),Symbol.keyFor()

有時,我們希望重新使用同一個 Symbol 值,Symbol.for方法可以做到這一點。它接受一個字符串作為參數(shù),然后搜索有沒有以該參數(shù)作為名稱的 Symbol 值。如果有,就返回這個 Symbol 值,否則就新建并返回一個以該字符串為名稱的 Symbol 值。

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

s1 === s2 // true

上面代碼中,s1和s2都是 Symbol 值,但是它們都是同樣參數(shù)的Symbol.for方法生成的,所以實際上是同一個值。

Symbol.for()與Symbol()這兩種寫法,都會生成新的 Symbol。它們的區(qū)別是,前者會被登記在全局環(huán)境中供搜索,后者不會。Symbol.for()不會每次調(diào)用就返回一個新的 Symbol 類型的值,而是會先檢查給定的key是否已經(jīng)存在,如果不存在才會新建一個值。比如,如果你調(diào)用Symbol.for("cat")30 次,每次都會返回同一個 Symbol 值,但是調(diào)用Symbol("cat")30 次,會返回 30 個不同的 Symbol 值。

Symbol.for("bar") === Symbol.for("bar")
// true

Symbol("bar") === Symbol("bar")
// false

上面代碼中,由于Symbol()寫法沒有登記機制,所以每次調(diào)用都會返回一個不同的值。

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

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

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

上面代碼中,變量s2屬于未登記的 Symbol 值,所以返回undefined。

需要注意的是,Symbol.for為 Symbol 值登記的名字,是全局環(huán)境的,可以在不同的 iframe 或 service worker 中取到同一個值。

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

iframe.contentWindow.Symbol.for('foo') === Symbol.for('foo')
// true

上面代碼中,iframe 窗口生成的 Symbol 值,可以在主頁面得到。

5.Symbol應用場景

首先第一個應用場景上文已經(jīng)多次提到過,就是保證對象每個屬性的名字都是獨一無二的就好了,這樣就從根本上防止屬性名的沖突。

第一個應用場景就是構造私有變量

我們知道在JavaScript中,是沒有如Java等面向對象語言的訪問控制關鍵字private的,類上所有定義的屬性或方法都是可公開訪問的。因此這對我們進行API的設計時造成了一些困擾。

而有了Symbol以及模塊化機制,類的私有屬性和方法才變成可能。例如:

在文件 a.js中

const PASSWORD = Symbol()

class Login {
  constructor(username, password) {
    this.username = username
    this[PASSWORD] = password
  }

  checkPassword(pwd) {
      return this[PASSWORD] === pwd
  }
}

export default Login

在文件 b.js 中

import Login from './a'

const login = new Login('admin', '123456')
login.checkPassword('admin')  // true

login.PASSWORD  // oh!no!
login[PASSWORD] // oh!no!
login["PASSWORD"] // oh!no!

由于Symbol常量PASSWORD被定義在a.js所在的模塊中,外面的模塊獲取不到這個Symbol,也不可能再創(chuàng)建一個一模一樣的Symbol出來(因為Symbol是唯一的),因此這個PASSWORD的Symbol只能被限制在a.js內(nèi)部使用,所以使用它來定義的類屬性是沒有辦法被模塊外訪問到的,達到了一個私有化的效果。

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 1.概述 ES5的對象屬性名都是字符串,這容易造成屬性名的沖突。比如,你使用了一個他人提供的對象,但又想為這個對象...
    趙然228閱讀 880評論 2 10
  • Symbol Symbol 是一個符號對象,是es6新添加的數(shù)據(jù)類型,通過Symbol()可以得到一個唯一的值,所...
    文仔CXKSNLXX閱讀 661評論 0 0
  • 為啥需要 Symbol ES5 里面對象的屬性名都是字符串,如果你需要使用人提供的對象,你對這個對象有哪些屬性也不...
    晚溪呀閱讀 719評論 0 1
  • title: es6-Symboldate: 2018-02-07 22:40:00tags: es6 前言 突然...
    aymfx閱讀 468評論 0 0
  • Symbol:一種新的原始數(shù)據(jù)類型,表示獨一無二的值。 引入Symbol的原因:ES5 的對象屬性名都是字符串,這...
    Rose_yang閱讀 378評論 0 0

友情鏈接更多精彩內(nèi)容