详解ES6 Symbol 的用途


Posted in Javascript onOctober 14, 2018

Symbol 唯一的用途就是标识对象属性,表明对象支持的功能。 相比于字符属性名,Symbol 的区别在于唯一,可避免名字冲突。 这样 Symbol 就给出了唯一标识类型信息的一种方式,从这个角度看有点类似 C++ 的 Traits。

解决了什么问题

在 JavaScript 中要判断一个对象支持的功能,常常需要做一些 Duck Test。 比如经常需要判断一个对象是否可以按照数组的方式去迭代,这类对象称为 Array-like。 lodash 中是这样判断的:

function isArrayLike(value) {
  return value != null && isLength(value.length) && !isFunction(value);
}

在 ES6 中提出一个 @@iterator 方法,所有支持迭代的对象(比如 Array、Map、Set)都要实现。 @@iterator 方法的属性键为 Symbol.iterator 而非字符串。 这样只要对象定义有 Symbol.iterator 属性就可以用 for ... of 进行迭代。 比如:

if (Symbol.iterator in arr) {
  for(let n of arr) console.log(n)
}

其他用例

上述例子中 Symbol 标识了这个对象是可迭代的(Iterables),是一个典型的 Symbol 用例。 详情可以参考 ES6 迭代器 一文。 此外利用 Symbol 还可以做很多其他事情,例如:

常量枚举

JavaScript 没有枚举类型,常量概念也通常用字符串或数字表示。例如:

const COLOR_GREEN = 1
const COLOR_RED = 2

function isSafe(trafficLight) {
  if (trafficLight === COLOR_RED) return false
  if (trafficLight === COLOR_GREEN) return true
  throw new Error(`invalid trafficLight: ${trafficLight}`)
}
  • 我们需要认真地排列这些常量的值。如果不小心有两个值重复会很难调试,就像 #define false true 引起的问题一样。
  • 取值可能重复。如果有另一处定义了 BUSY = 1 并不小心把 BUSY 传入,干脆 isSafe(1),理想的枚举概念应该抛出异常,但上述代码无法检测。

Symbol 给出了解决方案:

const COLOR_GREEN = Symbol('green')
const COLOR_RED = Symbol('red')

即使字符串写错或重复也不重要,因为每次调用 Symbol() 都会给出独一无二的值。 这样就可以确保所有 isSafe() 调用都传入这两个 Symbol 之一。

私有属性

由于没有访问限制,JavaScript 曾经有一个惯例:私有属性以下划线起始来命名。 这样不仅无法隐藏这些名字,而且会搞坏代码风格。 可以利用 Symbol 来隐藏这些私有属性:

let speak = Symbol('speak')
class Person {
  [speak]() {
    console.log('harttle')
  }
}

如下几种访问都获取不到 speak 属性:

let p = new Person()

Object.keys(p)           // []
Object.getOwnPropertyNames(p)    // []
for(let key in p) console.log(key) // <empty>

但 Symbol 只能隐藏这些函数,并不能阻止未授权访问。 仍然可以通过 Object.getOwnPerpertySymbols(), Reflect.ownKeys(p) 来枚举到 speak 属性。

新的基本类型

Symbol 是新的基本类型,从此 JavaScript 有 7 种类型:

  • Number
  • Boolean
  • String
  • undefined
  • null
  • Symbol
  • Object

转换为字符串

Symbol 支持 symbol.toString() 方法以及 String(symbol), 但不能通过 + 转换为字符串,也不能直接用于模板字符串输出。 后两种情况都会产生 TypeError,是为了避免把它当做字符串属性名来使用。

转换为数字

不可转换为数字。Number(symbol) 或四则运算都会产生 TypeError。

转换为布尔

Boolean(symbol) 和取非运算都 OK。这是为了方便判断是否包含属性。

包裹对象

Symbol 是基本类型,但不能用 new Symbol(sym) 来包裹成对象,需要使用 Object(sym)。 除了判等不成立外,包裹对象的使用与原基本类型几乎相同:

let sym = Symbol('author')
let obj = {
  [sym]: 'harttle'
}
let wrapped = Object(sym)
wrapped instanceof Symbol  // true,真的是true!!!
obj[sym]          // 'harttle'
obj[wrapped]        // 'harttle'

常见的 Symbol

文章最前面的例子提到的 Symbol.iterator 是一个内置 Symbol。除此之外常见的内置 Symbol 还有:

Symbol.match

Symbol.match 在 String.prototype.match() 中用于获取 RegExp 对象的匹配方法。 我们来改写一下 Symbol.match 标识的方法,

观察 String.prototype.match() 的表现, 下面的例子来自 MDN:

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@match
class RegExp1 extends RegExp {
 [Symbol.match](str) {
  var result = RegExp.prototype[Symbol.match].call(this, str);
  return result ? 'VALID' : 'INVALID';
 }
}

console.log('2012-07-02'.match(new RegExp1('([0-9]+)-([0-9]+)-([0-9]+)')));
// expected output: "VALID"
Symbol.toPrimitive

在对象进行运算时经常会变成 "[object Object]", 这是对象转换为字符串(基本数据类型)的默认行为,定义在 Object.prototype.toString。 比如这个对象:

var count = {
  value: 3
};
count + 2   // "[object Object]2"

这个对象也在表示一个数字,怎么让它可以参加四则运算呢? 给它加一个 Symbol.toPrimitive 属性,来改变它转换为基本类型的行为:

count[Symbol.toPrimitive] = function () {
  return this.value
};
count + 2   // 5

更多内置 Symbol 请参考 MDN 文档: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol#Well-known_symbols

跨 Realm 使用

JavaScript Realm 是指当前代码片段运行的上下文,包括全局变量,比如 Array, Date 这些全局函数。 在打开新标签页、 加载 iframe 或加载 Worker 进程时,都会产生多个 JavaScript Realm。 跨 Realm 通信时这些全局变量是不同的,例如从 iframe 中传递给数组 arr 给父窗口, 父窗口中收到的 arr instanceof Array 为 false,因为它的原型是 iframe 中的那个 Array。

但是一个对象在 iframe 中可以迭代(Iterable),那么在父窗口中也应当能被迭代。 这就要求 Symbol 可以跨 Realm,当然 Symbol.iterator 可以。 如果你定义的 Symbol 也需要跨 Realm,请使用 Symbol Registry API:

// 在 Symbol Registry 中注册一个跨 Realm Symbol
let sym = Symbol.for('foo')
// 获取 Symbol 的键值字符串
Symbol.keyFor(sym)   // 'foo'

内置的跨 Realm Symbol 其实不在 Symbol Registry 中:

Symbol.keyFor(Symbol.iterator)  // undefined

总结

以上所述是小编给大家介绍的ES6 Symbol 的用途,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 #Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 #Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 #Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 #Javascript
详解webpack loader和plugin编写
Oct 12 #Javascript
深入理解Angularjs 脏值检测
Oct 12 #Javascript
vue中render函数的使用详解
Oct 12 #Javascript
You might like
php自动获取目录下的模板的代码
2010/08/08 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
js切换光标示例代码
2013/10/10 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
AngularJS实现根据变量改变动态加载模板的方法
2016/11/04 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
python定时器使用示例分享
2014/02/16 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
python批量修改文件名的示例
2020/09/27 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
党的群众路线教育学习材料
2014/05/12 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
2015年电话客服工作总结
2015/05/18 职场文书