ES6中Symbol类型用法实例详解


Posted in Javascript onApril 06, 2017

本文实例讲述了ES6中的Symbol类型。分享给大家供大家参考,具体如下:

Symbol是在ES6中新加入的类型。

正如我们所知,JavaScript中有以下几种类型:

Undefined ,Null ,Boolean ,Number ,String, Object

但是上述类型在处理某些情况的时候是远远不够的。下面我们来举一个例子:

假设我们要移动div,也需要在某些情况下判断该div是否处于移动状态,所以我们会想到给div这类的对象设置一个属性。

if (element.isMoving) {
 smoothAnimations(element);
}
element.isMoving = true;

但是这样会存在一些问题,比如:

我们可能和第三方的库冲突

我们可能和未来的标准冲突等

于是可以采用第二种方法,也就是采用加密函数,制定一个值:

var isMoving = SecureRandom.generateName();
...
if (element[isMoving]) {
 smoothAnimations(element);
}
element[isMoving] = true;

这样确实解决了冲突问题,但却带来了调试问题,我们每次查看该对象属性时都会看见一大堆垃圾命名。

于是为了解决冲突问题,ES6提出了Symbol这样的新类型。

Symbol是一种特殊的、不可变的数据类型,可以作为对象属性的标识符使用。我们看demo:

var sym1 = Symbol();
var sym2 = Symbol("foo");
var sym3 = Symbol("foo");

Symbol("foo") 不会强制字符串 "foo" 进入一个Symbol,它每次都创建一个新的Symbol

Symbol("foo") === Symbol("foo"); // false

所以可以利用这个特性来创建私有属性:

(function() {
 // 创建symbol
 var key = Symbol("key");
 function MyClass(privateData) {
  this[key] = privateData;
 }
 MyClass.prototype = {
  doStuff: function() {
   ... this[key] ...
  }
 };
})();
var c = new MyClass("hello")
c["key"] === undefined//无法访问该属性,因为是私有的

也可以利用Symbol来解除上面所说的冲突问题:

// create a unique symbol
var isMoving = Symbol("isMoving");
...
if (element[isMoving]) {
 smoothAnimations(element);
}
element[isMoving] = true;

当然,也可以通过另外的调用方法来生成可以与外界共享的Symbol类型,就是Symbol.for方法

Symbol.for(key) 方法会根据给定的键 key,来从 symbol 注册表中找到对应的 symbol,如果找到了,则返回它,否则,新建一个与该键关联的 symbol,并放入 symbol 注册表中。

Symbol.for("foo"); // 创建一个 symbol 并放入 symbol 注册表中,键为 "foo"
Symbol.for("foo"); // 从 symbol 注册表中读取键为"foo"的 symbol
Symbol.for("bar") === Symbol.for("bar"); // true,证明了上面说的
Symbol("bar") === Symbol("bar"); // false,Symbol() 函数每次都会返回新的一个 symbol
var sym = Symbol.for("mario");
sym.toString();
// "Symbol(mario)",mario 既是该 symbol 在 symbol 注册表中的键名,又是该 symbol 自身的描述字符串

所以为了防止冲突,我们最好给symbol带上前缀:

Symbol.for("mdn.foo");
Symbol.for("mdn.bar");

希望本文所述对大家ECMAScript程序设计有所帮助。

Javascript 相关文章推荐
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
jQuery文字轮播特效
Feb 12 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 Javascript
JS数组去重详情
Nov 07 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 #Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 #Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 #Javascript
ES6中的箭头函数实例详解
Apr 06 #Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 #Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 #Javascript
javascript中this用法实例详解
Apr 06 #Javascript
You might like
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
jQuery 白痴级入门教程
2009/11/11 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
js的三种继承方式详解
2017/01/21 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
python实现定制交互式命令行的方法
2014/07/03 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
杠杆的科学教学反思
2014/01/10 职场文书
公务员诚信承诺书
2014/05/26 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
环保宣传语大全
2015/07/13 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书