Symbol

目录

1. summary

2. Symbol作为属性是公有属性

3. Symbol实现私有属性的3种方式

4. Symbol.for

5. Symbol.keyFor()

6. 内置Symbol

7. 实例: 消除魔术字符串

---

1. summary

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

直接调用Symbol函数即可生成一个Symbol，注意Symbol函数前不能使用new命令，否则会报错(Uncaught TypeError: Symbol is not a constructor)， 因为 Symbol 是原始数据类型，不是对象。

Symbol函数可以接受一个字符串作为参数，表示对 Symbol 的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。

let syb1 = Symbol('head');
let syb2 = Symbol('foot');

syb1 // Symbol(head)
syb2 // Symbol(foot)

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

// with parameters
let syb1 = Symbol();
let syb2 = Symbol();

syb1 === syb2 // false

// without parameters
let syb3 = Symbol('test');
let syb4 = Symbol('test');

syb3 === syb4 // false

2. Symbol作为属性是公有属性

Symbol 值可以作为标识符，用于对象的属性名，由于每一个 Symbol 值都是不相等的，这意味着就能保证不会出现同名的属性，能防止某一个键被不小心改写或覆盖的情况。

注意，在对象的内部，使用 Symbol 值定义属性时，Symbol 值必须放在方括号之中。

let mySymbol = Symbol();

// the first method
let a = {};
a[mySymbol] = 'Hello!';

// The second method
let a = {
  [mySymbol]: 'Hello!'
};

// the third method
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });

// the above methods get the same results
a[mySymbol] // "Hello!"

Symbol 值作为属性名时，该属性是公有属性不是私有属性，可以在类的外部访问。但是不会出现在 for...in 、 for...of 的循环中，也不会被 Object.keys() 、 Object.getOwnPropertyNames() 、JSON.stringify()返回。如果要读取到一个对象的 Symbol 属性，可以通过 Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 取到。

3. Symbol实现私有属性的3种方式

第一种方式：用一个字符串或者下划线的方式，缺点很显然，不是真正的私有，依然可以遍历

var Person = (function() {
    let _name = `_name`
    // 或者 let name = 'shfjkshfkjsjkf'
    function Person(name) {
        this[_name] = name;
    }

    Person.prototype.getName = function() {
        return this[_name];
    };

    return Person;
}());

第二种方式：闭包，真的私有了，但是仍然存在缺点：实例无法共享方法，浪费内存空间

var Person = (function() {
    function Person(name) {
        this.getName = function() {
            return name;
        };
    }

    return Person;
}());

第三种方式：使用Symbol，缺陷：仍然会被Object.getOwnPropertySymbols获取到属性，进而修改该属性对应的值

var Person = (function() {
  var nameSymbol = Symbol('name');

  function Person(name) {
    this[nameSymbol] = name;
  }

  Person.prototype.getName = function() {
    return this[nameSymbol];
  };

  return Person;
}());

4. Symbol.for

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

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

s1 === s2 // true

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

5. Symbol.keyFor()

Symbol.keyFor() 返回一个已登记的 Symbol 类型值的 key ，用来检测该字符串参数作为名称的 Symbol 值是否已被登记。

let yellow1 = Symbol.for("Yellow");

Symbol.keyFor(yellow1); // "Yellow"

6. 内置Symbol

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

• Symbol.hasInstance
• Symbol.isConcatSpreadable
• Symbol.species
• Symbol.match
• Symbol.replace
• Symbol.search
• Symbol.split
• Symbol.toPrimitive
• Symbol.toStringTag
• Symbol.unscopables
• Symbol.iterator，对象的Symbol.iterator属性，指向该对象的默认生成遍历器的方法。

7. 实例: 消除魔术字符串

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就是一个魔术字符串。它多次出现，与代码形成“强耦合”，不利于将来的修改和维护。

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

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 });

但是如果没有办法保证有人写了一句

const shapeType = {
  triangle: 'Triangle',
  rectangle: 'Triangle'
};

接下来一旦出现bug会很难调试

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

const shapeType = {
  triangle: Symbol(),
  rectangle:Symbol()
};