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 相关文章推荐
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 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实现的Cookies操作类实例
2014/09/24 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
如何实现JS函数的重载
2006/09/22 Javascript
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
python输出决策树图形的例子
2019/08/09 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
python中id函数运行方式
2020/07/03 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
幼儿园中班教学反思
2014/02/10 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python