ES6详解五:Symbol
2015-09-18 21:43
549 查看
为什么要Symbol
Symbol的目的就是为了实现一个唯一不重复不可变的值,任何一个Symbol都是唯一的,不会和其他任何Symbol相等。很多时候其实我们都需要用到唯一不重复的值。比如我们给一个DOM节点做动画,那么我们需要判断动画是否正在执行。
这个时候一般的做法是给DOM节点加上一个属性(或者classname之类的)做一个标记,比如下面这样:
d.isMoving = true; //正在执行动画
然后问题就来了,这样做很容易产生冲突,万一你用了一个三方动画库,人家也是用
isMoving来进行标记的怎么办。或者万一DOM规范以后添加了一个
isMoving接口怎么办。
解决方法是让这个名字变得很特殊:
d.my_is_moving_flag_prevent_conflict = true;
这样虽然基本能防止冲突,但是实在是太奇怪了。
这个时候我们就需要一个唯一不重复的值来做标记:
var isMoving = Symbol("is moving"); d[isMoving] = true;
因为每次创建的
Symbol都是唯一不重复的,所以别人即使再次创建一个Symbol 也不会和你的Symbol冲突。
基本用法
Symbol 有两种用法,一种是创建局部的Symbol:var s = Symbol("description");
另一种是创建全局的 Symbol:
var s = Symbol.for("description");
当然我们一般用的都是局部的。
一定要区分 Symbol 和 String,他们完全是两码事,事实上Symbol是一种新的数据类型,也就是JS中的第七种数据类型-Symbol。创建 Symbol 时传入的一个字符串只是对 Symbol 的一个说明,参见MDN的说明:A description of the symbol which can be used for debugging but not to access the symbol itself.
这个说明只是为了方便调试,免得你不知道这个Symbol是干嘛的。虽然可以不用传,但是为了调试方便以及代码的可读性,建议还是带上这个参数.
直接使用
Symbol("xx"),每一次都会创建一个不同的 Symbol,不管传入的描述符是否一样:
var a=Symbol("a"), b=Symbol("a"); a === b; //false
但是如果用
Symbol.for创建全局Symbol,那么当描述符和以前的一个全局Symbol相同的时候,会返回之前的Symbol,所以他们是相等的,如果没有则创建一个新的:
var a = Symbol.for("a"), b = Symbol.for("a"); a === b; //true
Symbol.iterator
iterator 是一种设计模式,很多语言(比如java)通过iterator 实现遍历功能,如果一个值支持遍历,那么它只需要实现 iterator 接口即可。在JS中其实也是,只是在Symbol出现之前这是一个隐藏的特性,我们只能想下面这样通过
for来实现数组遍历:
var a = [1,2,3]; for(var i=0;i<a.length;i++) { //xxxx}
其实for语句就是通过隐藏的 iterator 来实现遍历的,现在我们可以通过
Symbol.iterator来取到这个 iterator 对象,并且自己调用
iterator.next()来实现遍历:
var a = [1,2,3]; var i = a[Symbol.iterator](); i.next(); //1 i.next(); //2 i.next(); //3
并且
Symbol.iterator是一个全局唯一的值,可以保证不会和 a 上面的任何属性方法有冲突。
结合闭包和Symbol实现私有属性
Symbol 的初衷其实就是实现私有属性,不过由于Object.getOwnPropertySymbols()接口的出现,导致即使是用 Symbol 作为key也可以被遍历出来,因此不能做到私有。
不过,排除这一点,我们可以基本上可以认为使用 Symbol 的属性是私有属性。
var People = (function() { var name = Symbol("name"); class People { constructor(n) { //构造函数 this[name] = n; } sayName() { console.log(this[name]); } } return People; })();
参见上面的例子,我们使用闭包主要是保护这个 Symbol ,它无法直接在闭包外面访问。这样除了使用
Object.getOwnPropertySymbols()之外我们无法访问
this[name]属性,基本可以认为是私有的。
至少这种做法比使用
this._name要好很多,因为Symbol不会污染keys,
for ... in之类的用法不会受到影响。
参考
非常棒的一篇文章,推荐看一下 https://hacks.mozilla.org/2015/06/es6-in-depth-symbols/https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- js可突破windows弹退效果代码
- 比较详细的ruby symbol 学习资料
- JSP脚本漏洞面面观
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- perl操作MongoDB报错undefined symbol: HeUTF8解决方法
- 爆炸式的JS圆形浮动菜单特效代码
- 提示出现unresolved external symbol _main的解决方法
- js select常用操作控制代码
- 从jsp发送动态图像
- 原生js结合html5制作小飞龙的简易跳球
- js 页面模块自由拖动实例
- js实现小鱼吐泡泡在页面游动特效
- js 提交和设置表单的值
- PHP VBS JS 函数 对照表
- PHP+JS实现大规模数据提交的方法
- 仿51JOB的地区选择效果(可选择多个地区)