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实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
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
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
JavaScript中的关键字"VAR"使用详解 分享
2013/07/31 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
python实现按长宽比缩放图片
2018/06/07 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
Python while循环使用else语句代码实例
2020/02/07 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
解释一下Windows的消息机制
2014/01/30 面试题
体育专业个人的求职信范文
2013/09/21 职场文书
商务主管岗位职责
2013/12/08 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
公司规章制度范本
2015/08/03 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技