Symbol 解说

ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefinednull、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。

由于以 Symbol 值作为名称的属性,不会被常规方法遍历得到。我们可以利用这个特性,为对象定义一些非私有的、但又希望只用于内部的方法(只能通过Object.getOwnPropertySymbols方法获取,基本和不可枚举属性一样,Symbol 作为属性名,该属性不会出现在for...infor...of循环中,也不会被Object.keys()Object.getOwnPropertyNames()JSON.stringify()返回)。

Symbol 值通过Symbol函数生成

  1. let s = Symbol();
  2. typeof s
  3. // "symbol"
  4. let s1 = Symbol('foo');
  5. let s2 = Symbol('bar');
  6. s1 // Symbol(foo)
  7. s2 // Symbol(bar)
  8. s1.toString() // "Symbol(foo)"
  9. s2.toString() // "Symbol(bar)"
  10. const obj = {
  11. toString() {
  12. return 'abc';
  13. }
  14. };
  15. const sym = Symbol(obj);
  16. sym // Symbol(abc)

Symbol.for(),Symbol.keyFor()

有时,我们希望重新使用同一个 Symbol 值,Symbol.for方法可以做到这一点。它接受一个字符串作为参数,然后搜索有没有以该参数作为名称的 Symbol 值。如果有,就返回这个 Symbol 值,否则就新建并返回一个以该字符串为名称的 Symbol 值。

  1. let s1 = Symbol.for('foo');
  2. let s2 = Symbol.for('foo');
  3. s1 === s2 // true

Symbol.for()Symbol()这两种写法,都会生成新的 Symbol。它们的区别是,前者会被登记在全局环境中供搜索,后者不会。Symbol.for()不会每次调用就返回一个新的 Symbol 类型的值,而是会先检查给定的key是否已经存在,如果不存在才会新建一个值。比如,如果你调用Symbol.for("cat")30 次,每次都会返回同一个 Symbol 值,但是调用Symbol("cat")30 次,会返回 30 个不同的 Symbol 值。

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

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

内置的 Symbol 值

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

Symbol.iterator

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

  1. const myIterable = {};
  2. myIterable[Symbol.iterator] = function* () {
  3. yield 1;
  4. yield 2;
  5. yield 3;
  6. };
  7. [...myIterable] // [1, 2, 3]

对象进行for...of循环时,会调用Symbol.iterator方法,返回该对象的默认遍历器

Symbol.toStringTag

对象的Symbol.toStringTag属性,指向一个方法。在该对象上面调用Object.prototype.toString方法时,如果这个属性存在,它的返回值会出现在toString方法返回的字符串之中,表示对象的类型。也就是说,这个属性可以用来定制[object Object][object Array]object后面的那个字符串。

  1. // 例一
  2. ({[Symbol.toStringTag]: 'Foo'}.toString())
  3. // "[object Foo]"
  4. // 例二
  5. class Collection {
  6. get [Symbol.toStringTag]() {
  7. return 'xxx';
  8. }
  9. }
  10. let x = new Collection();
  11. Object.prototype.toString.call(x) // "[object xxx]"

ES6 新增内置对象的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.hasInstance instanceof使用

对象的Symbol.hasInstance属性,指向一个内部方法。当其他对象使用instanceof运算符,判断是否为该对象的实例时,会调用这个方法。比如,foo instanceof Foo在语言内部,实际调用的是Foo[Symbol.hasInstance](foo)

  1. class MyClass {
  2. [Symbol.hasInstance](foo) {
  3. return foo instanceof Array;
  4. }
  5. }
  6. [1, 2, 3] instanceof new MyClass() // true

Symbol.isConcatSpreadable 是否展开

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

  1. let arr1 = ['c', 'd'];
  2. ['a', 'b'].concat(arr1, 'e') // ['a', 'b', 'c', 'd', 'e']
  3. arr1[Symbol.isConcatSpreadable] // undefined
  4. let arr2 = ['c', 'd'];
  5. arr2[Symbol.isConcatSpreadable] = false;
  6. ['a', 'b'].concat(arr2, 'e') // ['a', 'b', ['c','d'], 'e']

上面代码说明,数组的默认行为是可以展开,Symbol.isConcatSpreadable默认等于undefined。该属性等于true时,也有展开的效果。
类似数组的对象正好相反,默认不展开。它的Symbol.isConcatSpreadable属性设为true,才可以展开。

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

Symbol.isConcatSpreadable属性也可以定义在类里面。

  1. class A1 extends Array {
  2. constructor(args) {
  3. super(args);
  4. this[Symbol.isConcatSpreadable] = true;
  5. }
  6. }
  7. class A2 extends Array {
  8. constructor(args) {
  9. super(args);
  10. }
  11. get [Symbol.isConcatSpreadable] () {
  12. return false;
  13. }
  14. }
  15. let a1 = new A1();
  16. a1[0] = 3;
  17. a1[1] = 4;
  18. let a2 = new A2();
  19. a2[0] = 5;
  20. a2[1] = 6;
  21. [1, 2].concat(a1).concat(a2)
  22. // [1, 2, 3, 4, [5, 6]]

上面代码中,类A1是可展开的,类A2是不可展开的,所以使用concat时有不一样的结果。
注意,Symbol.isConcatSpreadable的位置差异,A1是定义在实例上,A2是定义在类本身,效果相同。

Symbol.species 衍生对象指向

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

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

上面代码中,子类MyArray继承了父类ArrayaMyArray的实例,bca的衍生对象。你可能会认为,bc都是调用数组方法生成的,所以应该是数组(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. }
  4. const a = new MyArray();
  5. const b = a.map(x => x);
  6. b instanceof MyArray // false
  7. b instanceof Array // true

上面代码中,a.map(x => x)生成的衍生对象,就不是MyArray的实例,而直接就是Array的实例。
再看一个例子。

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

上面代码中,T2定义了Symbol.species属性,T1没有。结果就导致了创建衍生对象时(then方法),T1调用的是自身的构造方法,而T2调用的是Promise的构造方法。
总之,Symbol.species的作用在于,实例对象在运行过程中,需要再次调用自身的构造函数时,会调用该属性指定的构造函数。它主要的用途是,有些类库是在基类的基础上修改的,那么子类使用继承的方法时,作者可能希望返回基类的实例,而不是子类的实例。

Symbol.match

对象的Symbol.match属性,指向一个函数。当执行str.match(myObject)时,如果该属性存在,会调用它,返回该方法的返回值。

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

Symbol.replace

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

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

下面是一个例子。

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

Symbol.replace方法会收到两个参数,第一个参数是replace方法正在作用的对象,上面例子是Hello,第二个参数是替换后的值,上面例子是World

Symbol.search

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

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

Symbol.split

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

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

下面是一个例子。

  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. }
  16. 'foobar'.split(new MySplitter('foo'))
  17. // ['', 'bar']
  18. 'foobar'.split(new MySplitter('bar'))
  19. // ['foo', '']
  20. 'foobar'.split(new MySplitter('baz'))
  21. // 'foobar'

上面方法使用Symbol.split方法,重新定义了字符串对象的split方法的行为,

Symbol.toPrimitive

对象的Symbol.toPrimitive属性,指向一个方法。该对象被转为原始类型的值时,会调用这个方法,返回该对象对应的原始类型值。
Symbol.toPrimitive被调用时,会接受一个字符串参数,表示当前运算的模式,一共有三种模式。

  • Number:该场合需要转成数值
  • String:该场合需要转成字符串
  • Default:该场合可以转成数值,也可以转成字符串
    1. let obj = {
    2. [Symbol.toPrimitive](hint) {
    3. switch (hint) {
    4. case 'number':
    5. return 123;
    6. case 'string':
    7. return 'str';
    8. case 'default':
    9. return 'default';
    10. default:
    11. throw new Error();
    12. }
    13. }
    14. };
    15. 2 * obj // 246
    16. 3 + obj // '3default'
    17. obj == 'default' // true
    18. String(obj) // 'str'

    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. // }
    11. Object.keys(Array.prototype[Symbol.unscopables])
    12. // ['copyWithin', 'entries', 'fill', 'find', 'findIndex', 'includes', 'keys']
    上面代码说明,数组有 7 个属性,会被with命令排除。
    1. // 没有 unscopables 时
    2. class MyClass {
    3. foo() { return 1; }
    4. }
    5. var foo = function () { return 2; };
    6. with (MyClass.prototype) {
    7. foo(); // 1
    8. }
    9. // 有 unscopables 时
    10. class MyClass {
    11. foo() { return 1; }
    12. get [Symbol.unscopables]() {
    13. return { foo: true };
    14. }
    15. }
    16. var foo = function () { return 2; };
    17. with (MyClass.prototype) {
    18. foo(); // 2
    19. }
    上面代码通过指定Symbol.unscopables属性,使得with语法块不会在当前作用域寻找foo属性,即foo将指向外层作用域的变量。

Singleton 模式

Singleton 模式指的是调用一个类,任何时候返回的都是同一个实例。
对于 Node 来说,模块文件可以看成是一个类。怎么保证每次执行这个模块文件,返回的都是同一个实例呢?
很容易想到,可以把实例放到顶层对象global

  1. // mod.js
  2. function A() {
  3. this.foo = 'hello';
  4. }
  5. if (!global._foo) {
  6. global._foo = new A();
  7. }
  8. module.exports = global._foo;

然后,加载上面的mod.js

  1. const a = require('./mod.js');
  2. console.log(a.foo);

上面代码中,变量a任何时候加载的都是A的同一个实例。
但是,这里有一个问题,全局变量global._foo是可写的,任何文件都可以修改。

  1. global._foo = { foo: 'world' };
  2. const a = require('./mod.js');
  3. console.log(a.foo);

上面的代码,会使得加载mod.js的脚本都失真。
为了防止这种情况出现,我们就可以使用 Symbol。

  1. // mod.js
  2. const FOO_KEY = Symbol.for('foo');
  3. function A() {
  4. this.foo = 'hello';
  5. }
  6. if (!global[FOO_KEY]) {
  7. global[FOO_KEY] = new A();
  8. }
  9. module.exports = global[FOO_KEY];

上面代码中,可以保证global[FOO_KEY]不会被无意间覆盖,但还是可以被改写。

  1. global[Symbol.for('foo')] = { foo: 'world' };
  2. const a = require('./mod.js');

如果键名使用Symbol方法生成,那么外部将无法引用这个值,当然也就无法改写。

  1. // mod.js
  2. const FOO_KEY = Symbol('foo');
  3. // 后面代码相同 ……

实例清除魔术字符串

  1. function getArea(shape, options) {
  2. let area = 0;
  3. switch (shape) {
  4. case 'Triangle': // 魔术字符串
  5. area = .5 * options.width * options.height;
  6. break;
  7. /* ... more code ... */
  8. }
  9. return area;
  10. }
  11. getArea('Triangle', { width: 100, height: 100 }); // 魔术字符串
  12. const shapeType = { // 改由变量代替魔术字符串
  13. triangle: 'Triangle',
  14. triangle: Symbol(), // 这里就很适合用Symbol值,不会重复
  15. };
  16. function getArea(shape, options) {
  17. let area = 0;
  18. switch (shape) {
  19. case shapeType.triangle:
  20. area = .5 * options.width * options.height;
  21. break;
  22. }
  23. return area;
  24. }
  25. getArea(shapeType.triangle, { width: 100, height: 100 });

Iterator 解说 [ɪtə’reɪtə]

JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了MapSet。这样就有了四种数据集合,用户还可以组合使用它们,定义自己的数据结构,比如数组的成员是MapMap的成员是对象。这样就需要一种统一的接口机制,来处理所有不同的数据结构。

  1. var it = makeIterator(['a', 'b']);
  2. it.next() // { value: "a", done: false }
  3. it.next() // { value: "b", done: false }
  4. it.next() // { value: undefined, done: true }
  5. function makeIterator(array) {
  6. var nextIndex = 0;
  7. return {
  8. next: function() {
  9. return nextIndex < array.length ?
  10. {value: array[nextIndex++], done: false} :
  11. {value: undefined, done: true};
  12. }
  13. };
  14. }

Object实现Symbol接口的方式

  1. var obj = {a:1,b:2,c:1};
  2. var objA = { f: 4, ...obj }
  3. console.log(objA);
  4. var arr = [1,2,3];
  5. console.log(...arr);
  6. function makeIterator() {
  7. var array = this;
  8. var nextIndex = 0;
  9. var keys = Object.keys(array);
  10. var length = keys.length;
  11. return {
  12. next: function() {
  13. return nextIndex < length ?
  14. {value: array[keys[nextIndex++]], done: false} :
  15. {value: undefined, done: true};
  16. }
  17. };
  18. }
  19. objA[Symbol.iterator] = makeIterator;
  20. console.log(...objA); // 注意这里,注意这里,未实现的Iterator接口的话,这里会报错哦
  21. var n = makeIterator(objA);
  22. console.log(n.next());
  23. console.log(n.next());
  24. console.log(n.next());
  25. console.log(n.next());
  26. console.log(n.next());

默认 Iterator 接口

Iterator 接口的目的,就是为所有数据结构,提供了一种统一的访问机制,即for...of循环(详见下文)。当使用for...of循环遍历某种数据结构时,该循环会自动去寻找 Iterator 接口。

一种数据结构只要部署了 Iterator 接口,我们就称这种数据结构是“可遍历的”(iterable)。

ES6 规定,默认的 Iterator 接口部署在数据结构的Symbol.iterator属性,或者说,一个数据结构只要具有Symbol.iterator属性,就可以认为是“可遍历的”(iterable)。Symbol.iterator属性本身是一个函数,就是当前数据结构默认的遍历器生成函数。执行这个函数,就会返回一个遍历器。至于属性名Symbol.iterator,它是一个表达式,返回Symbol对象的iterator属性,这是一个预定义好的、类型为 Symbol 的特殊值,所以要放在方括号内

  1. const obj = {
  2. [Symbol.iterator] : function () {
  3. return {
  4. next: function () {
  5. return {
  6. value: 1,
  7. done: true
  8. };
  9. }
  10. };
  11. }
  12. };

原生具备 Iterator 接口的数据结构如下。

  • Array
  • Map
  • Set
  • String
  • TypedArray 美 [taɪpt]
  • 函数的 arguments 美 [‘ɑ:ɡjʊmənts] 对象
  • NodeList 对象
    ```javascript let arr = [‘a’, ‘b’, ‘c’]; let iter = arrSymbol.iterator;

iter.next() // { value: ‘a’, done: false } iter.next() // { value: ‘b’, done: false } iter.next() // { value: ‘c’, done: false } iter.next() // { value: undefined, done: true }

  1. 对象(Object)之所以没有默认部署 Iterator 接口,是因为对象的哪个属性先遍历,哪个属性后遍历是不确定的,需要开发者手动指定。本质上,遍历器是一种线性处理,对于任何非线性的数据结构,部署遍历器接口,就等于部署一种线性转换。不过,严格地说,对象部署遍历器接口并不是很必要,因为这时对象实际上被当作 Map 结构使用,ES5 没有 Map 结构,而 ES6 原生提供了。
  2. 一个对象如果要具备可被`for...of`循环调用的 Iterator 接口,就必须在`Symbol.iterator`的属性上部署遍历器生成方法(原型链上的对象具有该方法也可)。
  3. ```javascript
  4. // 自定义迭代器的例子
  5. let obj = {
  6. data: [ 'hello', 'world' ],
  7. [Symbol.iterator]() {
  8. const self = this;
  9. let index = 0;
  10. return {
  11. next() {
  12. if (index < self.data.length) {
  13. return {
  14. value: self.data[index++],
  15. done: false
  16. };
  17. } else {
  18. return { value: undefined, done: true };
  19. }
  20. }
  21. };
  22. }
  23. };
  24. let iteratorTemp = obj[Symbol.iterator]();
  25. console.log(iteratorTemp);
  26. console.log(iteratorTemp.next());

对于类似数组的对象(存在数值键名和length属性),部署 Iterator 接口,有一个简便方法,就是Symbol.iterator方法直接引用数组的 Iterator 接口。

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator]; // 或者 NodeList.prototype[Symbol.iterator] = [][Symbol.iterator];

[…document.querySelectorAll(‘div’)] // 可以执行了 NodeList 对象是类似数组的对象,本来就具有遍历接口,可以直接遍历。上面代码中,我们将它的遍历接口改成数组的Symbol.iterator属性,可以看到没有任何影响。

下面是另一个类似数组的对象调用数组的Symbol.iterator方法的例子。

let iterable = { 0: ‘a’, 1: ‘b’, 2: ‘c’, length: 3, [Symbol.iterator]: Array.prototype[Symbol.iterator] }; for (let item of iterable) { console.log(item); // ‘a’, ‘b’, ‘c’ } 注意,普通对象部署数组的Symbol.iterator方法,并无效果。

let iterable = { a: ‘a’, b: ‘b’, c: ‘c’, length: 3, [Symbol.iterator]: Array.prototype[Symbol.iterator] }; for (let item of iterable) { console.log(item); // undefined, undefined, undefined } 如果Symbol.iterator方法对应的不是遍历器生成函数(即会返回一个遍历器对象),解释引擎将会报错。

var obj = {};

obj[Symbol.iterator] = () => 1;

[…obj] // TypeError: [] is not a function 上面代码中,变量obj的Symbol.iterator方法对应的不是遍历器生成函数,因此报错。

有了遍历器接口,数据结构就可以用for…of循环遍历(详见下文),也可以使用while循环遍历。

var $iterator = ITERABLESymbol.iterator; var $result = $iterator.next(); while (!$result.done) { var x = $result.value; // … $result = $iterator.next(); } 上面代码中,ITERABLE代表某种可遍历的数据结构,$iterator是它的遍历器对象。遍历器对象每次移动指针(next方法),都检查一下返回值的done属性,如果遍历还没结束,就移动遍历器对象的指针到下一步(next方法),不断循环。