symbol初學

symbol

1.概述

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函數(shù)前不能使用new命令驶乾，否則會報錯邑飒。這是因為生成的 Symbol 是一個原始類型的值，不是對象级乐。
注意疙咸，Symbol函數(shù)的參數(shù)只是表示對當前 Symbol 值的描述，因此相同參數(shù)的Symbol函數(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 值可以顯式轉(zhuǎn)為字符串题山。
let sym = Symbol('My symbol');

String(sym) // 'Symbol(My symbol)'
sym.toString() // 'Symbol(My symbol)'
  • Symbol 值也可以轉(zhuǎn)為布爾值，但是不能轉(zhuǎn)為數(shù)值故痊。
let sym = Symbol();
Boolean(sym) // true
!sym  // false

if (sym) {
  // ...
}

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

2.作為屬性名的Symbol

let mySymbol = Symbol();

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

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

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

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

上面代碼通過方括號結(jié)構(gòu)和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 值囱稽。

3.實例：消除魔術(shù)字符串

魔術(shù)字符串指的是郊尝，在代碼之中多次出現(xiàn)、與代碼形成強耦合的某一個具體的字符串或者數(shù)值战惊。
常用的消除魔術(shù)字符串的方法流昏，就是把它寫成一個變量。

const shapeType = {
  triangle: 'Triangle'
};

function getArea(shape, options) {
  let area = 0;
  switch (shape) {
    case shapeType.triangle:
      area = .5 * options.width * options.height;
      break;
  }
  return area;
}

getArea(shapeType.triangle, { width: 100, height: 100 });

上面代碼中吞获，我們把Triangle寫成shapeType對象的triangle屬性况凉，這樣就消除了強耦合。
仔細分析各拷，可以發(fā)現(xiàn)shapeType.triangle等于哪個值并不重要刁绒，只要確保不會跟其他shapeType屬性的值沖突即可。因此烤黍，這里就很適合改用 Symbol 值知市。

const shapeType = {
  triangle: Symbol()
}

4.屬性名的遍歷

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

5.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

Symbol.for()與Symbol()這兩種寫法，都會生成新的 Symbol痘番。它們的區(qū)別是捉片，前者會被登記在全局環(huán)境中供搜索平痰，后者不會。
Symbol.keyFor方法返回一個已登記的 Symbol 類型值的key伍纫。

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

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

內(nèi)置的symbol的值
除了定義自己使用的 Symbol 值以外宗雇，ES6 還提供了 11 個內(nèi)置的 Symbol 值，指向語言內(nèi)部使用的方法莹规。

Symbol.hasInstance
對象的Symbol.hasInstance屬性赔蒲，指向一個內(nèi)部方法。當其他對象使用instanceof運算符良漱，判斷是否為該對象的實例時舞虱，會調(diào)用這個方法。

比如母市，foo instanceof Foo在語言內(nèi)部矾兜，實際調(diào)用的是FooSymbol.hasInstance。

6.Symbol.isConcatSpreadable

對象的Symbol.isConcatSpreadable屬性等于一個布爾值患久，表示該對象用于Array.prototype.concat()時椅寺，是否可以展開。

let arr1 = ['c', 'd'];
['a', 'b'].concat(arr1, 'e') // ['a', 'b', 'c', 'd', 'e']
arr1[Symbol.isConcatSpreadable] // undefined


let arr2 = ['c', 'd'];
arr2[Symbol.isConcatSpreadable] = false;
['a', 'b'].concat(arr2, 'e') // ['a', 'b', ['c','d'], 'e']

上面代碼說明蒋失，數(shù)組的默認行為是可以展開返帕，Symbol.isConcatSpreadable默認等于undefined。該屬性等于true時篙挽，也有展開的效果荆萤。

類似數(shù)組的對象正好相反，默認不展開铣卡。它的Symbol.isConcatSpreadable屬性設(shè)為true链韭，才可以展開。

let obj = {length: 2, 0: 'c', 1: 'd'};
['a', 'b'].concat(obj, 'e') // ['a', 'b', obj, 'e']

obj[Symbol.isConcatSpreadable] = true;
['a', 'b'].concat(obj, 'e') // ['a', 'b', 'c', 'd', 'e']

symbol.species

  static get [Symbol.species]() { return Array; }
}

上面代碼中煮落，由于定義了Symbol.species屬性梧油，創(chuàng)建衍生對象時就會使用這個屬性返回的函數(shù)，作為構(gòu)造函數(shù)州邢。這個例子也說明，定義Symbol.species屬性要采用get取值器褪子。默認的Symbol.species屬性等同于下面的寫法量淌。

static get [Symbol.species]() {
  return this;

Symbol.match

對象的Symbol.match屬性，指向一個函數(shù)嫌褪。當執(zhí)行str.match(myObject)時呀枢，如果該屬性存在，會調(diào)用它笼痛，返回該方法的返回值裙秋。

String.prototype.match(regexp)
// 等同于
regexp[Symbol.match](this)

class MyMatcher {
  [Symbol.match](string) {
    return 'hello world'.indexOf(string);
  }
}

'e'.match(new MyMatcher()) // 1

Symbol.replace

對象的Symbol.replace屬性琅拌，指向一個方法，當該對象被String.prototype.replace方法調(diào)用時摘刑，會返回該方法的返回值进宝。

String.prototype.replace(searchValue, replaceValue)
// 等同于
searchValue[Symbol.replace](this, replaceValue)

Symbol.search

對象的Symbol.search屬性，指向一個方法枷恕，當該對象被String.prototype.search方法調(diào)用時党晋，會返回該方法的返回值。

String.prototype.search(regexp)
// 等同于
regexp[Symbol.search](this)

class MySearch {
  constructor(value) {
    this.value = value;
  }
  [Symbol.search](string) {
    return string.indexOf(this.value);
  }
}
'foobar'.search(new MySearch('foo')) // 0

Symbol.split

對象的Symbol.split屬性徐块，指向一個方法未玻，當該對象被String.prototype.split方法調(diào)用時，會返回該方法的返回值胡控。

String.prototype.split(separator, limit)
// 等同于
separator[Symbol.split](this, limit)

Symbol.iterator

對象的Symbol.iterator屬性扳剿，指向該對象的默認遍歷器方法。

對象進行for…of循環(huán)時昼激，會調(diào)用Symbol.iterator方法庇绽，返回該對象的默認遍歷器，

class Collection {
  *[Symbol.iterator]() {
    let i = 0;
    while(this[i] !== undefined) {
      yield this[i];
      ++i;
    }
  }
}

let myCollection = new Collection();
myCollection[0] = 1;
myCollection[1] = 2;

for(let value of myCollection) {
  console.log(value);
}
// 1
// 2

Symbol.toPrimitive

對象的Symbol.toPrimitive屬性癣猾，指向一個方法敛劝。該對象被轉(zhuǎn)為原始類型的值時，會調(diào)用這個方法纷宇，返回該對象對應(yīng)的原始類型值夸盟。

Symbol.toPrimitive被調(diào)用時，會接受一個字符串參數(shù)像捶，表示當前運算的模式上陕，一共有三種模式。

  • Number：該場合需要轉(zhuǎn)成數(shù)值
  • String：該場合需要轉(zhuǎn)成字符串
  • Default：該場合可以轉(zhuǎn)成數(shù)值拓春，也可以轉(zhuǎn)成字符串
let obj = {
  [Symbol.toPrimitive](hint) {
    switch (hint) {
      case 'number':
        return 123;
      case 'string':
        return 'str';
      case 'default':
        return 'default';
      default:
        throw new Error();
     }
   }
};

2 * obj // 246
3 + obj // '3default'
obj == 'default' // true
String(obj) // 'str'

Symbol.toStringTag

對象的Symbol.toStringTag屬性释簿，指向一個方法。在該對象上面調(diào)用Object.prototype.toString方法時硼莽，如果這個屬性存在庶溶，它的返回值會出現(xiàn)在toString方法返回的字符串之中，表示對象的類型懂鸵。也就是說偏螺，這個屬性可以用來定制[object Object]或[object Array]中object后面的那個字符串。

// 例一
({[Symbol.toStringTag]: 'Foo'}.toString())
// "[object Foo]"

// 例二
class Collection {
  get [Symbol.toStringTag]() {
    return 'xxx';
  }
}

let x = new Collection();
Object.prototype.toString.call(x) // "[object xxx]"

ES6 新增內(nèi)置對象的Symbol.toStringTag屬性值如下匆光。

  • JSON[Symbol.toStringTag]：‘JSON’
  • Math[Symbol.toStringTag]：‘Math’
  • Module 對象M[Symbol.toStringTag]：‘Module’
  • ArrayBuffer.prototype[Symbol.toStringTag]：‘ArrayBuffer’
  • DataView.prototype[Symbol.toStringTag]：‘DataView’
  • Map.prototype[Symbol.toStringTag]：‘Map’
  • Promise.prototype[Symbol.toStringTag]：‘Promise’
  • Set.prototype[Symbol.toStringTag]：‘Set’
  • %TypedArray%.prototype[Symbol.toStringTag]：'Uint8Array’等
  • WeakMap.prototype[Symbol.toStringTag]：‘WeakMap’
  • WeakSet.prototype[Symbol.toStringTag]：‘WeakSet’
  • %MapIteratorPrototype%[Symbol.toStringTag]：‘Map Iterator’
  • %SetIteratorPrototype%[Symbol.toStringTag]：‘Set Iterator’
  • %StringIteratorPrototype%[Symbol.toStringTag]：‘String Iterator’
  • Symbol.prototype[Symbol.toStringTag]：‘Symbol’
  • Generator.prototype[Symbol.toStringTag]：‘Generator’
  • GeneratorFunction.prototype[Symbol.toStringTag]：‘GeneratorFunction’

Symbol.unscopables

對象的Symbol.unscopables屬性套像，指向一個對象。該對象指定了使用with關(guān)鍵字時终息，哪些屬性會被with環(huán)境排除夺巩。

Array.prototype[Symbol.unscopables]
// {
//   copyWithin: true,
//   entries: true,
//   fill: true,
//   find: true,
//   findIndex: true,
//   includes: true,
//   keys: true
// }

Object.keys(Array.prototype[Symbol.unscopables])
// ['copyWithin', 'entries', 'fill', 'find', 'findIndex', 'includes', 'keys']

上面代碼說明贞让，數(shù)組有 7 個屬性，會被with命令排除柳譬。

// 沒有 unscopables 時
class MyClass {
  foo() { return 1; }
}

var foo = function () { return 2; };

with (MyClass.prototype) {
  foo(); // 1
}

// 有 unscopables 時
class MyClass {
  foo() { return 1; }
  get [Symbol.unscopables]() {
    return { foo: true };
  }
}

var foo = function () { return 2; };

with (MyClass.prototype) {
  foo(); // 2
}

上面代碼通過指定Symbol.unscopables屬性喳张，使得with語法塊不會在當前作用域?qū)ふ襢oo屬性，即foo將指向外層作用域的變量

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末征绎，一起剝皮案震驚了整個濱河市蹲姐，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌人柿，老刑警劉巖柴墩，帶你破解...
    沈念sama閱讀 218,386評論 6贊 506
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異凫岖，居然都是意外死亡江咳，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評論 3贊 394
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門哥放，熙熙樓的掌柜王于貴愁眉苦臉地迎上來歼指，“玉大人，你說我怎么就攤上這事甥雕〔壬恚” “怎么了？”我有些...
    開封第一講書人閱讀 164,704評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵社露，是天一觀的道長挟阻。 經(jīng)常有香客問我，道長峭弟，這世上最難降的妖魔是什么附鸽？ 我笑而不...
    開封第一講書人閱讀 58,702評論 1贊 294
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮瞒瘸，結(jié)果婚禮上坷备，老公的妹妹穿的比我還像新娘。我一直安慰自己情臭，他們只是感情好省撑，可當我...
    茶點故事閱讀 67,716評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著俯在，像睡著了一般丁侄。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上朝巫，一...
    開封第一講書人閱讀 51,573評論 1贊 305
  • 城市分裂傳說
    那天，我揣著相機與錄音石景，去河邊找鬼劈猿。 笑死拙吉，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的揪荣。 我是一名探鬼主播筷黔，決...
    沈念sama閱讀 40,314評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼仗颈！你這毒婦竟也來了佛舱？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,230評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤挨决，失蹤者是張志新（化名）和其女友劉穎请祖，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體脖祈，經(jīng)...
    沈念sama閱讀 45,680評論 1贊 314
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡肆捕，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,873評論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了盖高。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片慎陵。...
    茶點故事閱讀 39,991評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖喻奥，靈堂內(nèi)的尸體忽然破棺而出席纽，到底是詐尸還是另有隱情，我是刑警寧澤撞蚕，帶...
    沈念sama閱讀 35,706評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布润梯，位于F島的核電站，受9級特大地震影響诈豌，放射性物質(zhì)發(fā)生泄漏仆救。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 41,329評論 3贊 330
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一矫渔、第九天 我趴在偏房一處隱蔽的房頂上張望彤蔽。 院中可真熱鬧，春花似錦庙洼、人聲如沸顿痪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,910評論 0贊 22
  • 一樁弒父案油够，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽蚁袭。三九已至，卻和暖如春石咬，著一層夾襖步出監(jiān)牢的瞬間揩悄，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,038評論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來泰國打工鬼悠， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留删性，地道東北人亏娜。 一個月前我還...
    沈念sama閱讀 48,158評論 3贊 370
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像蹬挺，于是被迫代替她去往敵國和親维贺。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 44,941評論 2贊 355