ES6 中的 Symbol 详解及应用

什么是 Symbol？

Symbol 是 ES6 中新增的一种基本数据类型，表示独一无二的值。它是一种类似于字符串的数据类型，但是它的值是唯一且不可变的，可以用作对象属性的键值。

Symbol 的创建

Symbol 可以通过全局的 Symbol 函数来创建，每个 Symbol 值都是唯一的，即使它们使用相同的描述符。

const s1 = Symbol('foo');
const s2 = Symbol('foo');
console.log(s1 === s2); // false

Symbol 的应用

1. 对象属性的键值

Symbol 可以作为对象属性的键值，这样可以避免属性名冲突的问题。

// javascriptcn.com 代码示例
const obj = {};
const a = Symbol('a');
const b = Symbol('b');

obj[a] = 'hello';
obj[b] = 'world';

console.log(obj[a]); // 'hello'
console.log(obj[b]); // 'world'

2. 避免属性被意外修改

Symbol 的另一个用途是定义对象的私有属性，这样可以避免属性被意外修改。

// javascriptcn.com 代码示例
const obj = {};

const foo = Symbol('foo');
obj[foo] = 'bar';

Object.defineProperty(obj, 'bar', {
  value: 'hello',
  writable: false
});

obj.bar = 'world'; // 报错：Cannot assign to read only property 'bar' of object

console.log(obj[foo]); // 'bar'
console.log(obj.bar); // 'hello'

3. 定义类的私有属性

Symbol 还可以用来定义类的私有属性，这样可以避免属性被子类或实例修改。

// javascriptcn.com 代码示例
const _name = Symbol('name');

class Person {
  constructor(name) {
    this[_name] = name;
  }

  getName() {
    return this[_name];
  }
}

class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }

  getGrade() {
    return this.grade;
  }
}

const person = new Person('Tom');
console.log(person.getName()); // 'Tom'
console.log(person._name); // undefined

const student = new Student('Jerry', 90);
console.log(student.getName()); // 'Jerry'
console.log(student._name); // undefined
console.log(student.getGrade()); // 90

4. 遍历对象的属性

Symbol 也可以用来定义对象的可遍历属性。

// javascriptcn.com 代码示例
const obj = {
  [Symbol.iterator]: function* () {
    yield 1;
    yield 2;
    yield 3;
  }
};

for (const value of obj) {
  console.log(value); // 1 2 3
}

总结

Symbol 是 ES6 中新增的一种基本数据类型，表示独一无二的值。它可以作为对象属性的键值，避免属性名冲突的问题；也可以用来定义对象的私有属性，避免属性被意外修改；还可以用来定义类的私有属性，避免属性被子类或实例修改；最后，Symbol 也可以用来定义对象的可遍历属性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65582bd5d2f5e1655d264347