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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
jquery 防止表单重复提交代码
Jan 21 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
js实现拖拽与碰撞检测
Sep 18 Javascript
vue+iview实现文件上传
Nov 17 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
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
提高 DHTML 页面性能
2006/12/25 Javascript
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
javascript innerText和innerHtml应用
2010/01/28 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
Python中的map、reduce和filter浅析
2014/04/26 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
python将数组n等分的实例
2019/12/02 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
法制宣传月活动总结
2014/04/29 职场文书
推荐信格式要求
2014/05/09 职场文书
社区反邪教工作方案
2014/06/16 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技