Symbol

什么是Symbol类型

Symbol是一种新的原始数据类型, 表示独一无二的值

解决痛点: 你使用了他人的一个对象, 但又想给这个对象添加新的方法(mixin模式), 新的方法的名字就有可能与现有的方法产生冲突. 如果有一种机制, 保证每个属性的名字都是独一无二的就好了, 这样就能从根本上防止属性名的冲突

使用方式

Symbol值通过Symbol函数生成. 这就是说, 对象的属性名现在可以有两种类型, 一种是原来的字符串, 另一种是现在新增的Symbol类型.凡是属性名属于Symbol类型都是独一无二的, 可以保证不会与其他属性的名称产生冲突.

let s = Symbol();

typeof s
  • Note:
    1. Symbol函数前不能使用new命令, 否则会报错.这是因为生成的Symbol是一种原始类型的值, 而不是一个对象.也就是说, 由于Symbol值不是对象, 所以不能添加属性.
    2. Symbol值不能与其他类型的值进行运算, 否则会报错
    3. Symbol值可以转换为boolstring类型, 但是不能转换为number类型
    4. Symbol值作为属性的时候, 存取都必须放在方括号内, 否则会出问题.
    5. Symbol值作为属性名的时候, 该属性还是公开属性, 比如定义一些常量
    6. Symbol作为属性名, 该属性不会出现在for...in, for...of循环中, 也不会被Object.keys(), Object.getOwnPropertyNames()返回, 但是, 他也不是一个私有的属性, 有一个Object.getOwnPropertySymbols方法, 可以获取指定对象的所有Symbol属性名
    7. Reflect.ownKeys方法可以返回所有类型的键名, 包括常规键名和Symbol键名

作为属性名的Symbol

  1. Symbol值作为属性的时候, 不会被常规的方法遍历到, 所以为对象定义一些非私有的, 但又😟喜欢只用于内部的方法
  2. Symbol.forSymbol值登记的名字, 是全局环境的, 可以在不同的iframe或者service worker中取到同一个值
iframe = document.createElement('iframe');
iframe.src = String(window.location);
document.body.appendChild(iframe);

iframe.contentWindow.Symbol.for('foo') === Symbol.for('foo')

由于每一个Symbol值是不相等的, 这意味着Symbol值可以作为标识符(在编程语言中标识符是用户编程时使用的名字, 对于变量. 常量, 函数, 语句块也有名字, 我们统统称之为标识符), 用于对象的属性名, 就能保证不会出现同名的属性, 这对于一个对象由多个模块构成的情况非常有用, 能防止某一个键被不小心改写或者覆盖..

消除魔术字符串

魔术字符串指的是, 在代码之中多次出现, 与代码形成强耦合的某一个具体的字符串或者数值. 风格良好的代码, 应该尽量消除魔术字符串, 该由语义清晰的变量代替.

  • 改变的方式是, 将代码中的字符串, 改变为一个变量

属性名的遍历

Symbol 作为属性名, 该属性不会出现在for...in, for...of循环中, 也不会被Object.keys(), Object.getOwnPropertyNames()返回. 但是, 它也不是私有属性, 有一个Object.getOwnPropertySymbol方法, 可以获取指定对象的所有的Symbol属性名

Symbol.for(), Symbol.keyFor()

有时候, 我们希望使用同一个Symbol的值, Symbol.for方法可以做到这一点.它接受一个字符串作为参数, 然后搜索有没有以该参数作为名称的Symbol值. 如果有, 就返回这个Symbol值, 否则就新建并返回一个以该字符串为名称的Symbol

var s1 = Symbol.for('foo');
var s2 = Symbol.for('foo');

s1 === s2 // true
  • Symbol.for() 和 Symbol() 两种写法, 都会生成Symbol, 他们的区别是
    1. 前者会被登记到全局环境中提供搜索, 后者不会
    2. Symbol.for()不会每次调用都返回新的Symbol()值, 而是会先检查给定的key是否已经存在, 如果不存在才会创建一个值. 比如你调用Symbo.for('dog')30次, 每次都会返回同一个Symbol值, 但是调用Symbol('dog')30次, 会返回30个不同的Symbol值.

Symbol.keyFor()

返回一个已经登记的Symbol类型值得key

var s1 = Symbol.for("foo");
Symbol.keyFor(s1) // "foo"

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

推荐阅读更多精彩内容

  • 1.概述 ES5的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象...
    赵然228阅读 800评论 2 10
  • 1. 概述 ES6引入了一种新的原始数据类型Symbol,表示独一无二的值。它是JavaScript语言的第七种数...
    ForeverYoung20阅读 743评论 1 0
  • 前端技术日新月异,不断有新技术出现,我们就需要不断地学习新知识,虽然ES6已经提出很久了,但是最近我才有时间静下心...
    艰苦奋斗的侯小憨阅读 4,153评论 3 5
  • Vue.js是什么? Vue是一个轻量级渐进式的Javascript框架,具有简单易学、小巧灵活、性能优越的特点。...
    coolheadedY阅读 387评论 2 2
  • 聊天将就技巧,不要给客户发qq和微信里的微笑,不要发呵呵,不要发你好,在吗。 每个人的观点都不一样,你发愉快客户看...
    馆春阅读 215评论 0 0