Symbol

小軒雪發表於2018-06-19
Symbol

引言

ES5 的物件屬性名都是字串，易造成屬性名衝突。比如，你使用了一個他人提供的物件，但又想為這個物件新增新的方法（mixin 模式），新方法的名字就有可能與現有方法產生衝突。 ES6 引入Symbol就可以解決這個問題。

一、Symbole初始化

無引數初始化

它是一種 類似於字串 的資料型別，Symbol函式前不能使用new命令，否則會報錯。

let s = Symbol();

typeof s
// "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)"
複製程式碼

注意：

1.若引數的值是物件，會呼叫物件的toString方法

const obj = {
  toString() {
    return 'abc';
  }
};
const sym = Symbol(obj);
sym // Symbol(abc)
複製程式碼

2.引數只是對當前 Symbol 值的描述，相同引數 的Symbol函式的 返回值不相等。

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

s1 === s2 // false

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

s1 === s2 // false
複製程式碼

3.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
複製程式碼

4.Symbol可以顯示轉化為字串和布林型別，但是不可轉化為Number型別。

let sym = Symbol('My symbol');

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

Boolean(sym)  // true

Number(sym) // TypeError
複製程式碼

二、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 值定義屬性時，Symbol 值必須放在方括號之中。

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

a.mySymbol = 'Hello!';  //點運算子後面總是字串

a[mySymbol] // undefined
a['mySymbol'] // "Hello!"

const b = {
    [mySymbol](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');
複製程式碼

特別注意

該屬性不會出現在for...in、for...of迴圈中，也不會被

  • Object.keys()、
  • Object.getOwnPropertyNames()、
  • JSON.stringify()
  • 而且還 不是私有屬性。

Symbol屬性訪問方法：

1.ES6提供了Object.getOwnPropertySymbols方法來獲取，得到的是一個陣列。

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)]
複製程式碼

2.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');  //增加了屬性 0: 'foo'，並將內部Symbol屬性值增加了1
Collection.sizeOf(x) // 1

Object.keys(x) // ['0']  只能便利到增加了的屬性0
Object.getOwnPropertyNames(x) // ['0']
Object.getOwnPropertySymbols(x) // [Symbol(size)]
複製程式碼

三、Symbol消除魔術字串

魔術字串 指的是，在程式碼中 多次出現、與程式碼形成強耦合 的某一個具體的字串或者數值。

function getArea(shape, options) {
  let area = 0;

  switch (shape) {
    case 'Triangle': // 魔術字串
      area = .5 * options.width * options.height;
      break;
    /* ... more code ... */
  }

  return area;
}

getArea('Triangle', { width: 100, height: 100 }); // 魔術字串'Triangle'
複製程式碼

常用的消除魔術字串的方法，就是把'Triangle'寫成一個變數。

const shapeType = {
    triangle: 'Triangle'
}
function getArea(shape, options) {
  let area = 0;

  switch (shape) {
    case shapeType.triangle: // 魔術字串
      area = .5 * options.width * options.height;
      break;
    /* ... more code ... */
  }

  return area;
}

getArea(shapeType.triangle, { width: 100, height: 100 }); // 魔術字串'Triangle'
複製程式碼

這樣就消除了程式碼的強耦合性。分析發現shapeType.triangle的值是什麼無關緊要，只要保證不與shapeType其他屬性值衝突就好。

const shapeType = {
    triangle: Symbol()
}
複製程式碼

四、Symbol.for()

使用同一個 Symbol 值，Symbol.for方法可以做到這一點。

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

s1 === s2 // true
複製程式碼

Symbol.for()不會每次呼叫就返回一個新的 Symbol 型別的值，而是會先檢查給定的key是否已經存在，如果不存在才會新建一個值。

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

Symbol("bar") === Symbol("bar")
// false 由於Symbol()寫法沒有登記機制
複製程式碼

檢查某個屬性是否已經登記，Symbol.keyFor()方法返回已登記的 Symbol 型別值的引數值。

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

let s2 = Symbol("foo");
Symbol.keyFor(s2) // undefined
複製程式碼

相關文章