ES2015学习笔记(2)-Symbol

一句话总结:通过Symbol可以更好地定义对象的行为,控制属性的可见性。

翻译自ES6 in Action: Symbols and Their Uses

Symbol是一种新的基本数据类型(primitive type),它每一次都会产生一个唯一值,不会和其它的Symbol冲突(这个有点像UUID)。我们一起研究一下Symbol如何使用。

创建Symbol

创建Symbol对象就是直接调用Symbol函数。Symbol函数只是个普通函数并不是构造函数,所以不能使用new

const foo = Symbol();
const bar = Symbol();

foo === bar
// <-- false

创建Symbol对象时可以给Symbol传入一个字符串参数,作为对象的标记。这个标记并不影响Symbol实际的值,可以通过toString函数显示,这个通常是为了debugging方便。多个Symbol可以指定相同的标签,但是最好避免这样做。

let foo = Symbol('baz');
let bar = Symbol('baz');

foo === bar
// <-- false
console.log(foo);
// <-- Symbol(baz)

用Symbol可以解决什么问题

Symbol可以替代字符串或或者数字作为常量。

class Application {
  constructor(mode) {
    switch (mode) {
      case Application.DEV:
        // Set up app for development environment
        break;
      case Application.PROD:
        // Set up app for production environment
        break;
      case default:
        throw new Error('Invalid application mode: ' + mode);
    }
  }
}

Application.DEV = Symbol('dev');
Application.PROD = Symbol('prod');

// Example use
const app = new Application(Application.DEV);

字符串和整数的值不能保证唯一,例如,数字2或字符串development等也可以在程序的其他地方有不同的含义。使用Symbol使我们可以更确定值的含义是什么。

Symbol的另一个用法是作为对象的属性名。通过方括号我们可以让Symbol对象作为对象的属性。这样做有两个好处,首先,Symbol对象不会和对象已有的属性产生冲突,因为它是唯一的;第二,Symbol对象属性在for...inObject.keys()Object.getOwnPropertyNames()JSON.stringify()这些方法中被忽略掉。

const user = {};
const email = Symbol();

user.name = 'Fred';
user.age = 30;
user[email] = 'fred@example.com';

Object.keys(user);
// <-- Array [ "name", "age" ]

Object.getOwnPropertyNames(user);
// <-- Array [ "name", "age" ]

JSON.stringify(user);
// <-- "{"name":"Fred","age":30}"

如果需要访问,可以通过函数Object.getOwnPropertySymbols()Reflect.ownKeys()获得。

Object.getOwnPropertySymbols(user);
// <-- Array [ Symbol() ]

Reflect.ownKeys(user)
// <-- Array [ "name", "age", Symbol() ]

众所周知的符号(Well-know Symbol)

由于Symbol对象属性对es6之前的代码实际上是不可见的,所以它们非常适合在不破坏向后兼容性的情况下向JavaScript现有类型添加新功能。所谓众所周知的符号(Well-know Symbol)是符号函数的预定义属性,用于自定义某些语言特性的行为,并用于实现新的功能,如迭代器。

Symbol.iterator是一个众所周知的符号,它用于为对象分配一个特殊的方法,允许对对象进行迭代。

const band = ['Freddy', 'Brian', 'John', 'Roger'];
const iterator = band[Symbol.iterator]();

iterator.next().value;
// <-- { value: "Freddy", done: false }
iterator.next().value;
// <-- { value: "Brian", done: false }
iterator.next().value;
// <-- { value: "John", done: false }
iterator.next().value;
// <-- { value: "Roger", done: false }
iterator.next().value;
// <-- { value: undefined, done: true }

内置类型StringArrayTypedArrayMapSet都有一个默认符号迭代器方法,当这些类型的实例在for...of循环中,或与spread操作符一起使用时,将调用该方法。浏览器也开始使用这个符号,iterator允许以相同的方式遍历NodeList和HTMLCollection等DOM结构。

全局注册

ES6规范还定义了一个运行时范围的符号注册表,这意味着我们可以在不同的执行上下文中存储和检索符号,例如在文档和嵌入式iframeservice worker之间。

Symbol.for(key)函数从注册表中检索给定键的符号。如果不存在,则返回一个新符号。相同键的后续调用将返回相同的符号。

Symbol.keyFor (symbol)函数检索给定符号的键。使用注册表中不存在的符号调用方法将返回undefined

onst debbie = Symbol.for('user');
const mike   = Symbol.for('user');

debbie === mike
// <-- true

Symbol.keyFor(debbie);
// <-- "user"

何时使用

在一些用例中,使用Symbol提供了好处。本文前面提到的一种情况是,当我们想要向对象添加在序列化对象时不包含的隐藏属性时。

库的开发者还可以使用Symbol对象属性或方法安全地增强客户端对象,而不必担心覆盖现有键(或让其他代码覆盖对象的键)。例如,组件(例如日期选择器)经常使用各种选项和需要存储在某处的状态初始化。将小部件实例分配给DOM元素对象的属性并不理想,因为该属性可能与另一个键冲突。使用基于符号的键可以很好地解决这个问题,并确保小部件实例不会被覆盖。

参考

ES6 in Action: Symbols and Their Uses

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,185评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,652评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,524评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,339评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,387评论 6 391
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,287评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,130评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,985评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,420评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,617评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,779评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,477评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,088评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,716评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,857评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,876评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,700评论 2 354

推荐阅读更多精彩内容

  • 概述 ES5的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添加...
    oWSQo阅读 516评论 1 3
  • 回忆一下JS中的原始类型:字符串型、数字型、布尔型、null和undefined。 ES6中引入了第6种原始类型:...
    ___Jing___阅读 8,663评论 2 10
  • 本文为阮一峰大神的《ECMAScript 6 入门》的个人版提纯! babel babel负责将JS高级语法转义,...
    Devildi已被占用阅读 1,983评论 0 4
  • 创建符号值 Symbol没有字面量形式,这在JS的基本类型中是独一无二的.可以用全局函数来创建符号值 符号值是基本...
    牙哥阅读 411评论 0 1
  • 01 最近一直处于沉溺状态。 年底,焦虑几乎成了所有人的代名词。 回首一年,离当初制定的写作目标相差甚远,焦虑之下...
    米粥的江湖阅读 378评论 0 0