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 相关文章推荐
js禁止小键盘输入数字功能代码
Aug 01 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
socket在egg中的使用实例代码详解
May 30 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 Javascript
javascript中闭包closure的深入讲解
Mar 03 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 Socket配置以及实例的详细介绍
2013/06/13 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
CCPry JS类库 代码
2009/10/30 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
js登录弹出层特效
2014/03/07 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
升旗仪式主持词
2014/03/19 职场文书
专业技术职务聘任书
2014/03/29 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书