利用Symbol安全地增加JavaScript对象的属性

在合作开发或者使用别人做好的对象进行开发的时候，在对象中添加自己的属性有可能会和对象中的原属性重名，这样是不安全的。为了解决这样的矛盾，也为了节省不必要的代码阅读时间，ES6增加了Symbol类型。

什么是Symbol？

概念

Symbol是ES6中引入的一种新的原始数据类型，和string、number等数据类型同等。

使用方法

let varSymbol = Symbol(); // 不可用 new 进行声明

console.log(typeof varSymbol); // symbol

特点

属性为Symbol类型的变量的值都是独一无二的；

let varSymbol1 = Symbol();
let varSymbol2 = Symbol();

console.log(varSymbol1 === varSymbol2); // false

Symbol可以接收一个字符串（可重复，变量的值依然是独一无二的），但是字符串的作用仅仅是为了区分变量；

let varSymbol1 = Symbol('s1');
let varSymbol2 = Symbol('s2');

console.log(varSymbol1); // Symbol(s1)
console.log(varSymbol2); // Symbol(s2)

Symbol不能与其他类型的值进行运算，也不可与Symbol进行运算。

const varSymbol1 = Symbol();

console.log(varSymbol1 + "100"); 
console.log(`${varSymbol1} 100`);
// TypeError: Cannot convert a Symbol value to a string
console.log(varSymbol1 + 100);
// TypeError: Cannot convert a Symbol value to a number
console.log(varSymbol1 > varSymbol1);
// TypeError: Cannot convert a Symbol value to a number

如何利用Symbol安全地增加JavaScript对象的属性

利用Symbol的值的唯一性，可以安全地增加JavaScript对象的属性。例如：

// 安全地增加对象属性
const person = {
  name: "person",
  getName() {
    console.log(`My name is ${this.name}`);
  },
};

person.getName();

const chGetName = {
  // getName: Symbol(),
  getName: Symbol("ch"),
};

person[chGetName.getName] = function () {
  console.log(`我的名字叫${this.name}`);
};

person[chGetName.getName]();

const enGetName = {
  // getName: Symbol(),
  getName: Symbol("en"),
};

person[enGetName.getName] = function () {
  console.log(`My name is ${this.name}`);
};

person[enGetName.getName]();

最后的输出结果为：

My name is person
我的名字叫person
My name is person

此时person的结构为：

分析结构可以发现，增加的属性为Symbol(ch)和Symbol(en)，因此不会出现重名复写的情况。就算只是简单的两个Symbol()，也会由于Symbol类型特有的唯一性，保证属性不会被复写。