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 Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
详解React中setState回调函数
Jun 14 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 Javascript
vue-model实现简易计算器
Aug 17 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
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
javascript 对象定义方法 简单易学
2009/03/22 Javascript
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
[01:32]DOTA2次级联赛——首支职业女子战队选拔赛全记录
2014/10/23 DOTA
gearman的安装启动及python API使用实例
2014/07/08 Python
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
python素数筛选法浅析
2018/03/19 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
生产部统计员岗位职责
2014/01/05 职场文书
电焊工岗位职责
2014/03/06 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
vue实现登陆页面开发实践
2022/05/30 Vue.js