🚀 参考链接

  • 阮大大：Symbol

    Symbol 是什么？

    symbol 是 ES6 引入的一个新的原始数据类型，表示一个独一无二的值，是 Javascript 的第七种数据类型。

    为什么引入 Symbol？

    ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。

    使用

    创建一个 Symbol

    1. let s = Symbol();
    2. s; // Symbol()
    3. typeof s; // "symbol"
    Symbol 可以接收一个参数，用于区分不同的值； ```javascript let s1 = Symbol(‘foo’); let s2 = Symbol(‘bar’);

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

s1.toString() // “Symbol(foo)” s2.toString() // “Symbol(bar)”

  1. 如果 Symbol 的参数是一个对象，就会调用该对象的toString方法，将其转为字符串，然后才生成一个 Symbol 值。
  2. ```javascript
  3. const obj = {
  4.   toString() {
  5.     return 'abc';
  6.   }
  7. };
  8. const sym = Symbol(obj);
  9. sym // Symbol(abc)

Symbol 还提供了一个 description 熟悉，用来获取 symbol 的描述。

  1. const sym = Symbol('foo');
  3. sym.description // "foo"

Symbol 作为属性名

  1. let mySymbol = Symbol();
  3. // 第一种写法
  4. let a = {};
  5. a[mySymbol] = 'Hello!';
  7. // 第二种写法
  8. let a = {
  9.   [mySymbol]: 'Hello!'
  10. };
  12. // 第三种写法
  13. let a = {};
  14. Object.defineProperty(a, mySymbol, { value: 'Hello!' });
  16. // 以上写法都得到同样结果
  17. a[mySymbol] // "Hello!"

需要注意什么？

能使用 new 命令

symbol 函数不能使用 new 命令，因为 Symbol 生成的值是原始类型，不是对象。

相同参数的Symbol不等

Symbol函数的参数只是表示对当前 Symbol 值的描述，因此相同参数的Symbol函数的返回值是不相等的。

  1. // 没有参数的情况
  2. let s1 = Symbol();
  3. let s2 = Symbol();
  5. s1 === s2 // false
  7. // 有参数的情况
  8. let s1 = Symbol('foo');
  9. let s2 = Symbol('foo');
  11. s1 === s2 // false

不能与其他类型的值进行运算

Symbol 值不能与其他类型的值进行运算，会报错。

  1. let sym = Symbol('My symbol');
  3. "your symbol is " + sym
  4. // TypeError: can't convert symbol to string
  5. `your symbol is ${sym}`
  6. // TypeError: can't convert symbol to string

不能转换为数值

Symbol 可以转换为字符串、Boolean，但是不能转换为数值。

不能用点运算符

Symbol 值作为对象属性名时，不能用点运算符。

  1. const mySymbol = Symbol();
  2. const a = {};
  4. a.mySymbol = 'Hello!';
  5. a[mySymbol] // undefined
  6. a['mySymbol'] // "Hello!"

公开属性

Symbol 值作为属性名时，该属性还是公开属性，不是私有属性。

遍历的问题

Symbol 作为属性名，遍历对象的时候，该属性不会出现在for…in、for…of循环中，也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。

但是，它也不是私有属性，有一个Object.getOwnPropertySymbols()方法，可以获取指定对象的所有 Symbol 属性名。该方法返回一个数组，成员是当前对象的所有用作属性名的 Symbol 值。

  1. const obj = {};
  2. let a = Symbol('a');
  3. let b = Symbol('b');
  5. obj[a] = 'Hello';
  6. obj[b] = 'World';
  8. const objectSymbols = Object.getOwnPropertySymbols(obj);
  10. objectSymbols
  11. // [Symbol(a), Symbol(b)]

另一个新的 API，Reflect.ownKeys()方法可以返回所有类型的键名，包括常规键名和 Symbol 键名。

  1. let obj = {
  2.   [Symbol('my_key')]: 1,
  3.   enum: 2,
  4.   nonEnum: 3
  5. };
  7. Reflect.ownKeys(obj)
  8. //  ["enum", "nonEnum", Symbol(my_key)]

Symbol 的其他方法

Symbol.for()

Symbol.for() 创建的 Symbol 值会被登记到全局，当有同样的参数被传入时不会重新创建新的 Symbol。

  1. Symbol.for("bar") === Symbol.for("bar")
  2. // true
  4. Symbol("bar") === Symbol("bar")
  5. // false

Symbol.for 没有作用域的限制。

  1. function app() {
  2.     var lo = Symbol.for("lo");
  3.     return { [lo]: "xxx" }
  4. }
  5. const data = app();
  6. data[Symbol.for("lo")]; // "xxx"

Symbol.keyFor

Symbol.keyFor()方法返回一个已登记的 Symbol 类型值的key。

  1. let s1 = Symbol.for("foo");
  2. Symbol.keyFor(s1) // "foo"
  4. let s2 = Symbol("foo");
  5. Symbol.keyFor(s2) // undefined

上面代码中，变量s2属于未登记的 Symbol 值，所以返回undefined。

应用场景

消除魔术字符串

魔术字符串指的是，在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。风格良好的代码，应该尽量消除魔术字符串，改由含义清晰的变量代替。

  1. function getArea(shape, options) {
  2.   let area = 0;
  4.   switch (shape) {
  5.     case 'Triangle': // 魔术字符串
  6.       area = .5 * options.width * options.height;
  7.       break;
  8.     /* ... more code ... */
  9.   }
  11.   return area;
  12. }
  14. getArea('Triangle', { width: 100, height: 100 }); // 魔术字符串

上面代码中，字符串Triangle就是一个魔术字符串。它多次出现，与代码形成“强耦合”，不利于将来的修改和维护。

常用的消除魔术字符串的方法，就是把它写成一个变量。

  1. const shapeType = {
  2.   triangle: 'Triangle'
  3. };
  5. function getArea(shape, options) {
  6.   let area = 0;
  7.   switch (shape) {
  8.     case shapeType.triangle:
  9.       area = .5 * options.width * options.height;
  10.       break;
  11.   }
  12.   return area;
  13. }
  15. getArea(shapeType.triangle, { width: 100, height: 100 });

上面代码中，我们把Triangle写成shapeType对象的triangle属性，这样就消除了强耦合。

如果仔细分析，可以发现 shapeType.triangle 等于哪个值并不重要，只要确保不会跟其他shapeType属性的值冲突即可。因此，这里就很适合改用 Symbol 值。

  1. const shapeType = {
  2.   triangle: Symbol()
  3. };

上面代码中，除了将 shapeType.triangle 的值设为一个 Symbol，其他地方都不用修改。

非私有内部方法

由于以 Symbol 值作为键名，不会被常规方法遍历得到。我们可以利用这个特性，为对象定义一些非私有的、但又希望只用于内部的方法。

  1. let size = Symbol('size');
  3. class Collection {
  4.   constructor() {
  5.     this[size] = 0;
  6.   }
  8.   add(item) {
  9.     this[this[size]] = item;
  10.     this[size]++;
  11.   }
  13.   static sizeOf(instance) {
  14.     return instance[size];
  15.   }
  16. }
  18. let x = new Collection();
  19. Collection.sizeOf(x) // 0
  21. x.add('foo');
  22. Collection.sizeOf(x) // 1
  24. Object.keys(x) // ['0']
  25. Object.getOwnPropertyNames(x) // ['0']
  26. Object.getOwnPropertySymbols(x) // [Symbol(size)]

上面代码中，对象x的size属性是一个 Symbol 值，所以Object.keys(x)、Object.getOwnPropertyNames(x)都无法获取它。这就造成了一种非私有的内部方法的效果。

Symbol.for 在 iframe 和 service worker 中的应用

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

  1. iframe = document.createElement('iframe');
  2. iframe.src = String(window.location);
  3. document.body.appendChild(iframe);
  5. iframe.contentWindow.Symbol.for('foo') === Symbol.for('foo')
  6. // true

上面代码中，iframe 窗口生成的 Symbol 值，可以在主页面得到。

内置的 Symbol 值

除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方法。

我们可以使用这个内置的 Symbol 改变 JS 的一些默认行为，这也被称为 JS元编程。

Symbol.hasInstance

当对象使用 instanceof 运算符时会调用此方法。

  1. // 等同于
  2. const Even = {
  3.   [Symbol.hasInstance](obj) {
  4.     return Number(obj) % 2 === 0;
  5.   }
  6. };
  8. 1 instanceof Even // false
  9. 2 instanceof Even // true
  10. 12345 instanceof Even // false

Symbol.isConcatSpreadable

对象的Symbol.isConcatSpreadable属性等于一个布尔值，表示该对象用于Array.prototype.concat()时，是否可以展开。

Symbol.species

对象的Symbol.species属性，指向一个构造函数。创建衍生对象时，会使用该属性。

  1. class MyArray extends Array {
  2. }
  4. const a = new MyArray(1, 2, 3);
  5. const b = a.map(x => x);
  6. const c = a.filter(x => x > 1);
  8. b instanceof MyArray // true
  9. c instanceof MyArray // true

上面代码中，子类MyArray继承了父类Array，a是MyArray的实例，b和c是a的衍生对象。你可能会认为，b和c都是调用数组方法生成的，所以应该是数组（Array的实例），但实际上它们也是MyArray的实例。

Symbol.species属性就是为了解决这个问题而提供的。现在，我们可以为MyArray设置Symbol.species属性。

  1. class MyArray extends Array {
  2.   static get [Symbol.species]() { return Array; }
  3. }

上面代码中，由于定义了Symbol.species属性，创建衍生对象时就会使用这个属性返回的函数，作为构造函数。这个例子也说明，定义Symbol.species属性要采用get取值器。默认的Symbol.species属性等同于下面的写法。

  1. static get [Symbol.species]() {
  2.   return this;
  3. }

现在，再来看前面的例子。

  1. class MyArray extends Array {
  2.   static get [Symbol.species]() { return Array; }
  3. }
  5. const a = new MyArray();
  6. const b = a.map(x => x);
  8. b instanceof MyArray // false
  9. b instanceof Array // true

再看一个例子。

  1. class T1 extends Promise {
  2. }
  4. class T2 extends Promise {
  5.   static get [Symbol.species]() {
  6.     return Promise;
  7.   }
  8. }
  10. new T1(r => r()).then(v => v) instanceof T1 // true
  11. new T2(r => r()).then(v => v) instanceof T2 // false

上面代码中，T2定义了Symbol.species属性，T1没有。结果就导致了创建衍生对象时（then方法），T1调用的是自身的构造方法，而T2调用的是Promise的构造方法。

总之，Symbol.species的作用在于，实例对象在运行过程中，需要再次调用自身的构造函数时，会调用该属性指定的构造函数。它主要的用途是，有些类库是在基类的基础上修改的，那么子类使用继承的方法时，作者可能希望返回基类的实例，而不是子类的实例。

Symbol.match

  1. String.prototype.match(regexp)
  2. // 等同于
  3. regexp[Symbol.match](this)
  5. class MyMatcher {
  6.   [Symbol.match](string) {
  7.     return 'hello world'.indexOf(string);
  8.   }
  9. }
  11. 'e'.match(new MyMatcher()) // 1

Symbol.replace

对象的Symbol.replace属性，指向一个方法，当该对象被String.prototype.replace方法调用时，会返回该方法的返回值。

  1. const x = {};
  2. x[Symbol.replace] = (...s) => console.log(s);
  4. 'Hello'.replace(x, 'World') // ["Hello", "World"]

Symbol.search

对象的Symbol.search属性，指向一个方法，当该对象被String.prototype.search方法调用时，会返回该方法的返回值。

  1. String.prototype.search(regexp)
  2. // 等同于
  3. regexp[Symbol.search](this)
  5. class MySearch {
  6.   constructor(value) {
  7.     this.value = value;
  8.   }
  9.   [Symbol.search](string) {
  10.     return string.indexOf(this.value);
  11.   }
  12. }
  13. 'foobar'.search(new MySearch('foo')) // 0

Symbol.split

对象的Symbol.split属性，指向一个方法，当该对象被String.prototype.split方法调用时，会返回该方法的返回值。

  1. class MySplitter {
  2.   constructor(value) {
  3.     this.value = value;
  4.   }
  5.   [Symbol.split](string) {
  6.     let index = string.indexOf(this.value);
  7.     if (index === -1) {
  8.       return string;
  9.     }
  10.     return [
  11.       string.substr(0, index),
  12.       string.substr(index + this.value.length)
  13.     ];
  14.   }
  15. }
  17. 'foobar'.split(new MySplitter('foo'))
  18. // ['', 'bar']
  20. 'foobar'.split(new MySplitter('bar'))
  21. // ['foo', '']
  23. 'foobar'.split(new MySplitter('baz'))
  24. // 'foobar'

Symbol.iterator

对象的Symbol.iterator属性，指向该对象的默认遍历器方法。

  1. const myIterable = {};
  2. myIterable[Symbol.iterator] = function* () {
  3.   yield 1;
  4.   yield 2;
  5.   yield 3;
  6. };
  8. [...myIterable] // [1, 2, 3]
  1. class Collection {
  2.   *[Symbol.iterator]() {
  3.     let i = 0;
  4.     while(this[i] !== undefined) {
  5.       yield this[i];
  6.       ++i;
  7.     }
  8.   }
  9. }
  11. let myCollection = new Collection();
  12. myCollection[0] = 1;
  13. myCollection[1] = 2;
  15. for(let value of myCollection) {
  16.   console.log(value);
  17. }
  18. // 1
  19. // 2

Symbol.toPrimitive

对象的Symbol.toPrimitive属性，指向一个方法。该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。

Symbol.toPrimitive被调用时，会接受一个字符串参数，表示当前运算的模式，一共有三种模式。

  • Number：该场合需要转成数值
  • String：该场合需要转成字符串
  • Default：该场合可以转成数值，也可以转成字符串 ```javascript let obj = { Symbol.toPrimitive { switch (hint) {
    1. case 'number':
    2.   return 123;
    3. case 'string':
    4.   return 'str';
    5. case 'default':
    6.   return 'default';
    7. default:
    8.   throw new Error();
    } } };

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

  1. <a name="9G2Zd"></a>
  2. ## Symbol.toStringTag
  3. 对象的Symbol.toStringTag属性，指向一个方法。在该对象上面调用Object.prototype.toString方法时，如果这个属性存在，它的返回值会出现在toString方法返回的字符串之中，表示对象的类型。也就是说，这个属性可以用来定制[object Object]或[object Array]中object后面的那个字符串。
  4. ```javascript
  5. // 例一
  6. ({[Symbol.toStringTag]: 'Foo'}.toString())
  7. // "[object Foo]"
  9. // 例二
  10. class Collection {
  11.   get [Symbol.toStringTag]() {
  12.     return 'xxx';
  13.   }
  14. }
  15. let x = new Collection();
  16. Object.prototype.toString.call(x) // "[object xxx]"

Symbol.unscopables

对象的Symbol.unscopables属性，指向一个对象。该对象指定了使用with关键字时，哪些属性会被with环境排除。

  1. Array.prototype[Symbol.unscopables]
  2. // {
  3. //   copyWithin: true,
  4. //   entries: true,
  5. //   fill: true,
  6. //   find: true,
  7. //   findIndex: true,
  8. //   includes: true,
  9. //   keys: true
  10. // }
  12. Object.keys(Array.prototype[Symbol.unscopables])
  13. // ['copyWithin', 'entries', 'fill', 'find', 'findIndex', 'includes',

上面代码说明，数组有 7 个属性，会被with命令排除。

  1. // 没有 unscopables 时
  2. class MyClass {
  3.   foo() { return 1; }
  4. }
  6. var foo = function () { return 2; };
  8. with (MyClass.prototype) {
  9.   foo(); // 1
  10. }
  12. // 有 unscopables 时
  13. class MyClass {
  14.   foo() { return 1; }
  15.   get [Symbol.unscopables]() {
  16.     return { foo: true };
  17.   }
  18. }
  20. var foo = function () { return 2; };
  22. with (MyClass.prototype) {
  23.   foo(); // 2
  24. }

上面代码通过指定Symbol.unscopables属性，使得with语法块不会在当前作用域寻找foo属性，即foo将指向外层作用域的变量。