本期我们要讨论的symbols是个什么东西呢?
这里的Symbols不是指的徽标。
也不是能在代码中使用的小图片。
它也不是代表其它任何东西的一个别名。
当然咯,Symbols和Cymbals(铜钹)完全是两回事。
(在编程过程中使用铜钹可不是一个好主意,吵到你炸!)
言归正传,什么是Symbols呢?
它是Javascript的第七种基本类型自1997年Javascript被标准化以来,它定义了六种基本类型。直到ES6,JS程序中任何一个值都属于以下几种类型之一。
每种类型都是一系列值的集。前五个都是有限集。当然,Boolean类型只有true和false两个值,而且他们应该不会给Boolean型增加新值了。其它类型的值基本上都是数字和字符串。理论上说Numbers类型有18,437,736,874,454,810,627个值(包括了NaN,NaN是“Not a Number”的缩写)。String类型中可能的值就太多了,我算算大概有 (2144,115,188,075,855,872 − 1) ÷ 65,535个……当然,我这种算法不一定是精确的。
Object是一个无限集,每一个Object都是独一无二的。你随意打开一个Web页面就会生成一大堆新的Object。
ES6 Symbols也是一个集,但它的元素既不是字符串也不是对象。它是ES6的新成员:第七种基本类型。
让我们来谈谈它的应用场景。
以一个简单的布尔型来举例在JavaScript中,有时候将一个对象中的数据扩展到其它某个对象中是十分方便的。
例如,假设你正在写一个JS库,目的是使用CSS过渡让DOM元素在屏幕上移动。你应该知道同时使用多个CSS过渡在同一个div上是行不通的。这会引起div不规律跳跃。你打算解决这个问题,不过首先你得想法知道这个元素是否正处在一个过渡中。
怎样来解决这个问题呢?
其中一种方式是使用CSS APIs让浏览器来告诉你元素是否在位移过程中。但这未免有点杀鸡用牛刀了。你的库应该存储了移动状态:代码中触发过渡的时候就应该记录了!
你真正需要的是一种方法来跟踪记录哪些元素在过渡。你可以把过渡中的元素存在一个数组中。每当你的库触发一个元素的过渡之前,先检测那个元素是否在数组中。
遗憾的是,如果数组很大的话,遍历起来会很耗时。
在你看来最简单的方法其实是为元素设置一个标识:
if (element.isMoving) { smoothAnimations(element); } element.isMoving = true;
这样也会有一些潜在的问题。无法避免的事实是代码中会用到这个DOM的地方不止这一处。
1.其它代码中如果使用了for-in 或者 Object.keys()会遍历DOM的所有属性(会造成额外性能消耗)。
2.一些思维灵活的库作者会从技术方面考虑——你的库与其它库兼容性会很差。
3.一些思维灵活的库作者也会考虑扩展性——你的库扩展性也会很差。
4.JS标准委员会将来也许会为所有元素提供一个.isMoving()的方法,那么你需要重构你的代码,那时候你就傻眼了。
当然,你可以用一个冗长或傻瓜式的字符串来作为属性名,只需确保不会和别的属性重名。
if (element.__$jorendorff_animation_library$PLEASE_DO_NOT_USE_THIS_PROPERTY$isMoving__) { smoothAnimations(element); } element.__$jorendorff_animation_library$PLEASE_DO_NOT_USE_THIS_PROPERTY$isMoving__ = true;
代码写成这样也太虐待自己的眼睛了。
使用加密方法你可以生成一个理论上唯一的属性名:
// get 1024 Unicode characters of gibberish var isMoving = SecureRandom.generateName(); ... if (element[isMoving]) { smoothAnimations(element); } element[isMoving] = true;
object[name]语法使你可以使用任何字符串作为属性名。所以这样是可行的:不会有命名冲突,看起来还清爽!
但是,这样会导致调试体验糟透了?当你使用console.log()来打印元素的这个属性时,你会看到一大段字符串的垃圾数据。并且,这样的属性不止一个吧?你将如何保持连续性?每次重新加载的时候它们都生成不同的属性名。
为什么要搞得这么复杂?我们要得仅仅是一个简单的布尔值而已!
Symbols可以解决这个问题Symbols集中的值可以由程序创建和并作为属性的键来使用,也不用担心名称冲突。
var mySymbol = Symbol();
调用Symbol()来创建一个新的Symbol值,它不会等同于其他值。
与字符串和数字一样,你可以使用symbol来作为属性值。因为它不等同于其它任何字符串,这个symbol-keyed属性可以确保不会与其它任何属性冲突。
obj[mySymbol] = "ok!"; // guaranteed not to collide console.log(obj[mySymbol]); // ok!
接下来这方法就可以解决上面我们所讨论的那种情况:
// create a unique symbol var isMoving = Symbol("isMoving"); ... if (element[isMoving]) { smoothAnimations(element); } element[isMoving] = true;
关于这段代码的几个说明:
因为symbol键值是被设计来避免冲突的,所以JavaScript最基本的对象检测特性是会忽略symbol键值的。以for-in循环为例,循环只会遍历对象的字符串类型的键。Symbol键直接被忽略过了。Object.key(obj)和 Object.getOwnPropertyNames(obj) 也是这样运作的。但是sysmbols并不完全是私有的:可以使用新API——Object.getOwnPropertySymbols(obj)将所对象的所有symbol键;另一个新API—— Reflect.ownKeys(obj),将会同时返回string和symbol类型的键。(在以后的文章中我们将完整地探讨Reflect API。)
在库和框架中symbols将会有很多用途,不久我们会看到,JS语言本身对它也会有广泛的使用。
symbols确切定义是什么呢?<b>> typeof Symbol() "symbol"</b>
Symbols和其它基本类型大不一样。
从创建开始就是不可变的。你不能为它设置属性(如果你在严谨模式下尝试,会报类型错误)。它可以作为属性名。这是它的类字符串性质。
另一方面,每一个symbol都是唯一的。与其他的不同(就算他们的描述是一样的)你可以很容易地新创建一个。这是它的类对象性质。
ES6 symbols与Lisp和Ruby中的更传统的symbols很类似,但是没有如此紧密地集成到语言中。在Lisp中,所有的标识符都是symbols。在JS中,标识符和大多数属性的键值的首先仍是字符串,Symbols只是为开发人员提供了一个额外选择。
关于symbols的一个忠告:与JS中的其它类型不同,它不能被自动转换为字符串。试图拼接symbol与字符串将会引起类型错误。
> var sym = Symbol("<3"); > "your symbol is " + sym // TypeError: can't convert symbol to string > `your symbol is ${sym}` // TypeError: can't convert symbol to string
你可以通过显示地将symbol转换为一个字符串来避免这个问题,通过String(sym)或者sym.toString()。
symbols的三种形式有三种方法来获取symbol。
如果你仍然不确定symbols是否对你有帮助,这最后一个章节会很有趣,因为证实了在实践中symbols是很有用的。
ES6的文档中对通用symbols的使用是如何介绍的?我们已经看过了ES6是如何使用symbol来避免与已有代码命名冲突的。几周前,在关于迭代器的文章中,我们了解了循环(var item of myArray)是从调用myArray[Symbol.iterator]()开始的。我提到这个方法以前的写法是myArray.iterator(),但是加了symbol以后向后兼容性会更好。
现在我们知道了symbols的用法和作用。那么就很容易理解为什么这样做和这样做的意义是什么。
这里还有其它几个ES6使用通用symbols的场景。(这些特性在Firefox中还没实现。)
所讲到的这几个symbol的应用都不常见,很难看到这些特性本身对我们的日常代码有任何影响。从长远看就比较有意义了。通用symbols是JavaScript对于PHP和Python中的__doubleUnderscores的改进。标准委员会将来会添加新的hooks到JS中,而不会有影响已有代码的风险。
我什么时候可以开始使用ES6 symbols?Firefox 36和Chrome 38已经支持Symbols了。我自己也在Firefox中试过了,如果你运行的时候有问题,你该知道问谁吧——找我!
为了让那些本身还不支持ES6 symbols的浏览器支持它,你可以使用pollyfill(一段代码或插件,提供了那些开发者们希望浏览器原生提供支持的功能),比如core.js。因为Symbols还比较新,所以它的pollyfill还不是那么完善,详细了解请看使用说明。
接下来的两篇博客,首先会讨论一些我们期待已久的特性终于被ES6支持了,我实在忍不住抱怨它们的姗姗来迟。我们将从两个很古老的特性作为开始(老到几乎可以追溯到编程历史的起源),紧接着讨论两个与之非常相似的特性,由ephemerons提供技术支持。下次还将深入讨论collections(集合)。
原文链接: ES6 In Depth: Symbols 本译文遵循Creative Commons Attribution Share-Alike License v3.0