- React工程师修炼指南
- 开课吧组编 高少云 莫涛 韩明洋 余维海编著
- 509字
- 2025-02-27 03:27:44
1.4 Symbol
ES5中提供的6种数据类型分别是:Undefined、Null、布尔值(Boolean)、字符串(String)、数值(Number)和对象(Object)。ES6中新增一种数据类型Symbol来表示唯一的值。每一个创建的symbol都是唯一的,这样在实际运用中可以创建一些唯一的属性及定义私有变量。symbol的创建如下:

上述创建symbol后,调用时需要注意不像其他类型数据创建时需要加“new”运算符实例化,这里symbol都是直接调用函数。每个symbol都是独一无二的,类型是Symbol,代码如下:


上述代码中,即使Symbol传入的字符串是一样的,但是最终s1和s2还是有区别的,这也验证了symbol的唯一性。目前前端项目都会采用模块化构建,为了防止对象属性名被覆盖,可以通过symbol来定义属性名。在symbol出来之前会直接定义对象属性名如下:

上述代码在引用过程中可能会在追加属性的时候造成属性覆盖的情况,如:

为了防止变量覆盖的情况,可以通过symbol来定义对象属性名,防止对象属性被覆盖:

这里也是利用symbol类型值唯一性的特征使得对象中属性不会被覆盖。利用symbol作为属性名,属性名不会被Object.keys()、Object.getOwnPropertyNames()、for……in循环或者返回。代码如下:


symbol属性并不是私有属性,如果要获取属性名的symbol属性可以通过Object.getOwnPropertySymbols()获取对象的所有symbol属性,同样也可以通过Reflect.ownKeys()反射api来获取属性,代码如下:

同样可以在“类”里利用symbol来定义私有属性及方法,例如:
