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 相关文章推荐
Cookie 小记
Apr 01 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
vue-element-admin项目导入和导出的实现
May 21 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通过两层过滤获取留言内容的方法
2016/07/11 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
js表单验证实例讲解
2016/03/31 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
python随机取list中的元素方法
2018/04/08 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
Python处理PDF与CDF实例
2020/02/26 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
物业管理求职自荐信
2013/09/25 职场文书
迟到检讨书5000字
2014/01/31 职场文书
会计专业自我评价
2014/02/12 职场文书
多媒体教室标语
2014/06/26 职场文书
个人工作表现自我评价
2015/03/06 职场文书
民事答辩状范本
2015/05/21 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android
MySQL中varchar和char类型的区别
2021/11/17 MySQL