es6 symbol的实现方法示例


Posted in Javascript onApril 02, 2019

背景

ES5 的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突。如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。
ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。
Symbol 值通过Symbol函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。

let s = Symbol();

typeof s
// "symbol"

上面代码中,变量s就是一个独一无二的值。typeof运算符的结果,表明变量s是 Symbol 数据类型,而不是字符串之类的其他类型。

注意,Symbol函数前不能使用new命令,否则会报错。这是因为生成的 Symbol 是一个原始类型的值,不是对象。也就是说,由于 Symbol 值不是对象,所以不能添加属性。基本上,它是一种类似于字符串的数据类型。
Symbol函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分。

let s1 = Symbol('foo');
let s2 = Symbol('bar');

s1 // Symbol(foo)
s2 // Symbol(bar)

s1.toString() // "Symbol(foo)"
s2.toString() // "Symbol(bar)"

上面代码中,s1和s2是两个 Symbol 值。如果不加参数,它们在控制台的输出都是Symbol(),不利于区分。有了参数以后,就等于为它们加上了描述,输出的时候就能够分清,到底是哪一个值。

如果 Symbol 的参数是一个对象,就会调用该对象的toString方法,将其转为字符串,然后才生成一个 Symbol 值。

const obj = {
 toString() {
  return 'abc';
 }
};
const sym = Symbol(obj);
sym // Symbol(abc)

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

// 没有参数的情况
let s1 = Symbol();
let s2 = Symbol();

s1 === s2 // false

// 有参数的情况
let s1 = Symbol('foo');
let s2 = Symbol('foo');

s1 === s2 // false

上面代码中,s1和s2都是Symbol函数的返回值,而且参数相同,但是它们是不相等的。

Symbol 值不能与其他类型的值进行运算,会报错。

let sym = Symbol('My symbol');

"your symbol is " + sym
// TypeError: can't convert symbol to string
`your symbol is ${sym}`
// TypeError: can't convert symbol to string

作为属性名的 Symbol

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

let mySymbol = Symbol();

// 第一种写法
let a = {};
a[mySymbol] = 'Hello!';

// 第二种写法
let a = {
 [mySymbol]: 'Hello!'
};

// 第三种写法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });

// 以上写法都得到同样结果
a[mySymbol] // "Hello!"

上面代码通过方括号结构和Object.defineProperty,将对象的属性名指定为一个 Symbol 值。

注意,Symbol 值作为对象属性名时,不能用点运算符。

const mySymbol = Symbol();
const a = {};

a.mySymbol = 'Hello!';
a[mySymbol] // undefined
a['mySymbol'] // "Hello!"

上面代码中,因为点运算符后面总是字符串,所以不会读取mySymbol作为标识名所指代的那个值,导致a的属性名实际上是一个字符串,而不是一个 Symbol 值。

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

let s = Symbol();

let obj = {
 [s]: function (arg) { ... }
};

obj[s](123);

上面代码中,如果s不放在方括号中,该属性的键名就是字符串s,而不是s所代表的那个 Symbol 值。

采用增强的对象写法,上面代码的obj对象可以写得更简洁一些。

let obj = {
 [s](arg) { ... }
};

Symbol 类型还可以用于定义一组常量,保证这组常量的值都是不相等的。

const log = {};

log.levels = {
 DEBUG: Symbol('debug'),
 INFO: Symbol('info'),
 WARN: Symbol('warn')
};
console.log(log.levels.DEBUG, 'debug message');
console.log(log.levels.INFO, 'info message');

3实例:消除魔术字符串

魔术字符串指的是,在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。风格良好的代码,应该尽量消除魔术字符串,改由含义清晰的变量代替。

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

上面代码中,我们把Triangle写成shapeType对象的triangle属性,这样就消除了强耦合。

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

const shapeType = {
 triangle: Symbol()
};

4属性名的遍历

Symbol 作为属性名,该属性不会出现在for...in、for...of循环中,也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。但是,它也不是私有属性,有一个Object.getOwnPropertySymbols方法,可以获取指定对象的所有 Symbol 属性名。

Object.getOwnPropertySymbols方法返回一个数组,成员是当前对象的所有用作属性名的 Symbol 值。

const obj = {};
let a = Symbol('a');
let b = Symbol('b');

obj[a] = 'Hello';
obj[b] = 'World';

const objectSymbols = Object.getOwnPropertySymbols(obj);

objectSymbols
// [Symbol(a), Symbol(b)]

下面是另一个例子,Object.getOwnPropertySymbols方法与for...in循环、Object.getOwnPropertyNames方法进行对比的例子。

const obj = {};

let foo = Symbol("foo");

Object.defineProperty(obj, foo, {
 value: "foobar",
});

for (let i in obj) {
 console.log(i); // 无输出
}

Object.getOwnPropertyNames(obj)
// []

Object.getOwnPropertySymbols(obj)
// [Symbol(foo)]

上面代码中,使用Object.getOwnPropertyNames方法得不到Symbol属性名,需要使用Object.getOwnPropertySymbols方法。
另一个新的 API,Reflect.ownKeys方法可以返回所有类型的键名,包括常规键名和 Symbol 键名。

let obj = {
 [Symbol('my_key')]: 1,
 enum: 2,
 nonEnum: 3
};

Reflect.ownKeys(obj)
// ["enum", "nonEnum", Symbol(my_key)]

5 Symbol.for(),Symbol.keyFor()

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

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

s1 === s2 // true

上面代码中,s1和s2都是 Symbol 值,但是它们都是同样参数的Symbol.for方法生成的,所以实际上是同一个值。

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

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

let s1 = Symbol.for("foo");
Symbol.keyFor(s1) // "foo"

let s2 = Symbol("foo");
Symbol.keyFor(s2) // undefined

上面代码中,变量s2属于未登记的 Symbol 值,所以返回undefined。

需要注意的是,Symbol.for为 Symbol 值登记的名字,是全局环境的,可以在不同的 iframe 或 service worker 中取到同一个值。

iframe = document.createElement('iframe');
iframe.src = String(window.location);
document.body.appendChild(iframe);

iframe.contentWindow.Symbol.for('foo') === Symbol.for('foo')
// true

上面代码中,iframe 窗口生成的 Symbol 值,可以在主页面得到。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js获取变量
Aug 24 Javascript
javascript cookies操作集合
Apr 12 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 #Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 #Javascript
Vue 组件修改根实例的数据的方法
Apr 02 #Javascript
vue鼠标悬停事件实例详解
Apr 01 #Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 #jQuery
详解Vue前端对axios的封装和使用
Apr 01 #Javascript
浅谈js闭包理解
Apr 01 #Javascript
You might like
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
apycom出品的jQuery精美菜单破解方法
2011/02/18 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
Python里disconnect UDP套接字的方法
2015/04/23 Python
Python实现的彩票机选器实例
2015/06/17 Python
python实现教务管理系统
2018/03/12 Python
使用numba对Python运算加速的方法
2018/10/15 Python
Python自定义一个异常类的方法
2019/06/27 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
Django实现随机图形验证码的示例
2020/10/15 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
绿化工程实施方案
2014/03/17 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
银行催款通知书
2015/04/17 职场文书
红楼梦读书笔记
2015/06/25 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
社区干部培训心得体会
2016/01/06 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers