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 前台切换网站的样式实现
Jun 22 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
理解javascript中DOM事件
Dec 25 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
JavaScript实现简单的弹窗效果
May 19 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生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
在Python中使用SQLite的简单教程
2015/04/29 Python
Python选课系统开发程序
2016/09/02 Python
Python3 操作符重载方法示例
2017/11/23 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
Python turtle库的画笔控制说明
2020/06/28 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
三八妇女节活动主持词
2014/03/17 职场文书
灰雀教学反思
2014/04/28 职场文书
村庄绿化方案
2014/05/07 职场文书
经济国贸专业求职信
2014/06/18 职场文书
个人原因辞职信模板
2015/05/13 职场文书
对公司的意见和建议
2015/06/04 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
小学远程教育工作总结
2015/08/13 职场文书
Python中glob库实现文件名的匹配
2021/06/18 Python
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫