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 相关文章推荐
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
AngularJS内置指令
Feb 04 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 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 ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
php的一个简单加密解密代码
2014/01/14 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
javascript实现日期格式转换
2014/12/16 Javascript
DOM 事件流详解
2015/01/20 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
Python join()函数原理及使用方法
2020/11/14 Python
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
企业厂长岗位职责
2013/12/17 职场文书
电子商务专业个人的自我评价
2013/12/19 职场文书
财务部出纳岗位职责
2013/12/22 职场文书
学习经验交流会主持词
2014/04/01 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
银行招聘自荐信
2015/03/06 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
严以用权学习心得体会
2016/01/12 职场文书
入党心得体会
2019/06/20 职场文书
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript