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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
JavaScript Date对象详解
Mar 01 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
TypeScript中的方法重载详解
Apr 12 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
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笔记之:数据类型与常量的使用分析
2013/05/14 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
js阻止事件追加的具体实现
2014/10/15 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
python 中random模块的常用方法总结
2017/07/08 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
详解python tkinter模块安装过程
2020/01/06 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
如何将字串String转换成整数int
2015/02/21 面试题
物业管理毕业生个人的求职信
2013/11/30 职场文书
咨询公司各岗位职责
2013/12/02 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
公司晚会主持词
2014/03/22 职场文书
拓展训练激励口号
2014/06/17 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
电影红河谷观后感
2015/06/11 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS