理解 Es6 中的 Symbol 类型

前言

在 Es6 中引入了一个新的基础数据类型:Symbol,对于其他基本数据类型(数字number,布尔boolean,null,undefined,字符串string)想必都比较熟悉,但是这个Symbol平时用得很少,甚至在实际开发中觉得没有什么卵用,能够涉及到的应用场景屈指可数.

往往在面试的时候,屡面不爽.下面一起来看看的这个数据类型的

具体解决的问题

在 Es5 的对象属性名中都是字符串,当一对象的属性名出现重复时,后者往往会覆盖前者.

若使用Symbol就能够保证每个属性的名字都是独一无二的,相当于生成一个唯一的标识 ID,这样就从根本上防止属性名的冲突

Symbol 类型

symbol是Es6规范引入的一项新的特性,表示独一无二的值,归纳为JS语言的第 7 种数据类型,它是通过Symbol函数生成

通过Symbol()函数来创建生成一个Symbol实例

let s1 = Symbol();
console.log(typeof s1); //symbol
console.log(Object.prototype.toString.call(s1)); // [object Symbol]

在上面示例代码中,用typeof进行了类型的检测,它返回的是Symbol类型,而不是什么string,object之类的

在 Es5 中原有的对象的属性名是字符串类型中拓展了一个Symbol类型,也就是说,现在对象的属性名有两种类型

  • 字符串类型
  • Symbol 类型

注意

Symbol 函数前不能使用new关键字,否则就会报错,这是因为生成的Symbol是一个原始类型的值,它不是对象

因为不是对象,所以也不能添加属性,它是一种类似于字符串的数据类型,可以理解为是在字符串类型的一种额外的拓展

Symbol函数可以接收一个字符串做为参数,它是对该Symbol实例的一种描述,主要是为了在控制台显示

Symbol 的描述是可选的，仅用于调试目的或转为字符串时,进行区分,不是访问 symbol 本身

可以使用Symbol().description会返回Symbol()的实例描述的具体内容,如果有值,则会返回该描述,若无则会返回undefined

description是Symbol的一个静态属性

当使用字符串定义对象的属性名时,若出现同名属性,则会出现属性覆盖问题,而使用Symbol类型定义的对象属性名,则不会,它是独一无二的,每调用一次Symbol()都会生成一个唯一的标识,即使是使用Symbol() 生成的实例描述相同,但它们依旧不相等,总会返回false
如下代码所示

let s1 = Symbol('itclanCoder'); // 定义了一s1变量,它是Symbol()类型,并接收了一个itclanCoder字符串,作为该Symbol的实例
let s2 = Symbol('itclanCoder'); // 实例化了一个s2,Symbol()类型
console.log(s1.description); // itclanCoder
console.log(s1.description); // itclanCoder
console.log(s1 === s2); // false

从第 5 行代码比较结果看出,s1与s2是两个不同的Symbol值,这里让Symbol接受一个参数,如果不加参数,它们在控制台输出的都是Symbol,即使参数相同,但是它们依旧是两个不同的Symbol

如果您希望使用拥有同一个Symbol值,那该怎么办?在 Es6 中,提供了一个Symbol.for()方法可以实现,它接受一个字符串作为参数
然后搜索有没有以该参数作为名称的Symbol值

如果有,就返回这个Symbol值,否则就新建一个以该字符串为名称的Symbol值,并会将它注册到全局坏境中

let s1 = Symbol.for('itclanCoder');
let s2 = Symbol.for('itclanCoder');
console.log(s1 === s2); // true

在上面的示例代码中,s1 和 s2 都是Symbol实例化出来的值,但是它们都是由Symbol.for方法生成的,指向的是同一个值,地止

  • Symbol 与 Symbol.for 的区别

比较

共同点: 都会生成新的Symbol
不同点: Symbol.for()会被登记在全局坏境中供搜索,而Symbol()不会,Symbol.for()不会每次调用就返回一个新的Symbol类型的值,而是会先检查给定的key是否已经存在,如果不存在才会新建一个Symbol值

如:调用Symbol.for('itclanCoder')100 次,每次都会返回同一个Symbol值,但是调用Symbol('itclanCoder')100 次,会返回 100 个不同的Symbol值

Symbol.for("itclanCoder") === Symbol.for("itclanCoder") // true

Symbol("itclanCoder") === Symbol("itclanCoder") // false

在上面代码中，由于Symbol()写法没有登记机制,所以每次调用都会返回一个不同的值,也就是每次都会在栈内存中重新开辟一块空间

也可以通过Symbol.keyFor()方法返回一个已登记的Symbol类型值的key,通过该方法检测是否有没有全局注册

let s1 = Symbol.for("itclan");
console.log(Symbol.keyFor(s1)) // "itclan"

let s2 = Symbol("itclan");
console.log(Symbol.keyFor(s2)) // undefined

在上面的代码中,变量s2属于未被登记的Symbol值,所以就返回undefined

注意

Symbol.for()是为Symbol值登记的名字,在整个全局作用域范围内都起作用

function foo() {
  return Symbol.for('itclan');
}

const x = foo();
const y = Symbol.for('itclan');
console.log(x === y); // true

在上面代码中，Symbol.for('itclan')是在函数内部运行的，但是生成的 Symbol 值是登记在全局环境的。所以，第二次运行Symbol.for('itclan')可以取到这个 Symbol 值

  • 应用场景:Symbol.for()

这个全局记录特性,可以用在不同的iframe火service worker中取到同一个值

在前端开发中,有时候会用到iframe,但是iframe之间相互隔离的,有时候想要取到不同的iframe中同一份数据,那么这个Symbol.for()就派上用场了的

如下示例代码所示

let iframe = document.createElement('iframe');
iframe.src = String(window.location);
document.body.appendChild(iframe);

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

在上面代码中，iframe窗口生成的Symbol 值，可以在主页面拿得到,在整个全局作用域内都可以取到

Symbol 应用场景

  • 应用场景 1-使用Symbol来作为对象属性名(key)

在 Es6 之前,通常定义或访问对象的属性都是使用字符串,如下代码所示

let web = {
    site: "http://itclan.cn",
    name: "itclanCoder"
}
console.log(web['site']); // http://itclan.cn
console.log(web['name']); // itclanCoder

访问变量对象的属性,除了可以通过对象.属性名的方式外,可以通过对象['属性名']的方式进行访问,如果一个对象中出现了同名属性那么后者会覆盖前者

由于每调用一次Symbol函数,生成的值都是不相等的,这意味着Symbol值可以作为标识符,用于对象的属性名,就能保证不会出现同名的属性

针对一个对象由多个模块构成的情况就变得非常有用了的,使用Symbol能放置某一个键被不小心改写或覆盖

Symbol可以用于对象属性的定义和访问

如下示例代码所示

const PERSON_NAME = Symbol();
const PERSON_AGE = Symbol();

let person = {
    [PERSON_NAME]: "随笔川迹"
}

person[PERSON_AGE] =  20;

console.log(person[PERSON_NAME])  // 随笔川迹
console.log(person[PERSON_AGE])   // 20

在上面的示例代码中,使用Symbol创建了PERSON_NAME,PERSON_AGE两个Symbol类型,但是在实际开发中却带来了一些问题

当您使用了Symbol作为对象的属性key后,你若想对该对象进行遍历,于是用到了Object.keys(),for..in,for..of,Object.getOwnPropertyNames()、JSON.stringify()进行枚举对象的属性名

你会发现使用Symbol后会带来一个非常令人难以接受的现实,如下示例代码所示

let person = {
   [Symbol('name')]: '随笔川迹',
   age: 20,
   job: 'Engineer'
}
console.log(Object.keys(person)) // ["age", "job"]
for(var i in person) {
    console.log(i);   // age job
}

Object.getOwnPropertyNames(person) // ["age", "job"]
JSON.stringify(person); // "{"age":20,"job":"Engineer"}"

通过上面的示例代码结果可知,Symbol类型实例化出的key是不能通过Object.keys(),for..in,for..of,来枚举的

它也没有包含子自身属性集合Object.getOwnPropertyName()当中,该方法无法获取到

利用该特性,我们可以把一些不需要对外操作和访问的属性使用Symbol来定义

这样,我们在定义接口的数据对象时,可以决定对象的哪些属性,对内私有操作与对外公有操作变得可控,更加的方便

使用常规的方法,无法获取到以Symbol方式定义对象的属性,在 Es6 中,提供了一个专门针对Symbol的 API

用Object.getOwnPropertySymbols()方法,可以获取指定对象的所有Symbol属性名,该方法会返回一个数组

它的成员是当前对象的所有用作属性名的 Symbol 值

let person = {
   [Symbol('name')]: '随笔川迹',
   age: 20,
   job: 'Engineer'
}

// 使用Object的API
Object.getOwnPropertySymbols(person) // [Symbol(name)]

如下是Object.getOwnPropertySymbols()方法与for..in循环,Object.getOwnPropertyNames方法进行对比的例子

const person = {};
const name = Symbol('name');

person[name] = "随笔川迹"

for(let i  in person) {
  console.log(i); // 无任何输出
}

Object.getOwnPropertyNames(person); // []
Object.getOwnPropertySymbols(person); // [Symbol('name')]

在上面代码中，使用for...in循环和Object.getOwnPropertyNames()方法都得不到 Symbol 键名，需要使用Object.getOwnPropertySymbols()方法。

如果想要获取全部的属性,可以使用一个新的 API，Reflect.ownKeys()方法可以返回所有类型的键名，包括常规键名和 Symbol 键名

let person = {
  [Symbol('name')]: "川川",
  enum: 2,
  nonEnum: 3
};

Reflect.ownKeys(person)  //  ["enum", "nonEnum", Symbol(name)]

正由于以Symbol 值作为键名，不会被常规方法(for..in,for..of)遍历得到。我们可以利用这个特性，为对象定义一些非私有的、但又希望只用于内部的方法,达到保护私有属性的目的

  • 应用场景 2：使用 Symbol 定义类的私有属性/方法

JavaScript 是一弱类型语言,弱并不是指这个语言功能弱,而所指的是,它的类型没有强制性,是没有如java等面向对象语言的访问控制关键字private的，类上所有定义的属性和方法都是公开访问的,当然在TypeScript中新增了一些关键字,解决了此问题的

有时候,类上定义的属性和方法都能公开访问,会造成一些困扰

而有了Symbol类的私有属性和方法成为了实现

如下示例代码

let size = Symbol('size');  // 声明定义了一个size变量,类型是Symbol(),类型描述内容是size

class Collection {          // class关键字定义了一个Collection类
  constructor() {           // 构造器`constructor`函数
    this[size] = 0;         // 在当前类上私有化了一个size属性
  }

  add(item) {              // Collection类下的一个方法
    this[this[size]] = item;
    this[size]++;
  }

  static sizeOf(instance) { // 静态属性
    return instance[size];
  }
}

let x = new Collection(); // 实例化x对象
Collection.sizeOf(x) // 0

x.add('foo');       // 调用方法
Collection.sizeOf(x) // 1

Object.keys(x) // ['0']
Object.getOwnPropertyNames(x) // ['0']
Object.getOwnPropertySymbols(x) // [Symbol(size)]

上面代码中，对象 x 的 size 属性是一个 Symbol 值，所以 Object.keys(x)、Object.getOwnPropertyNames(x)都无法获取它。这就造成了一种非私有的内部方法的效果

  • 应用场景 3-模块化机制

结合Symbol与模块化机制,类的私有属性和方法完美实现,如下代码所示
在文件a.js中

const PASSWORD = Symbol();  // 定义一个PASSWORD变量,类型是Symbol

class Login() {      // class关键字声明一个Login类
  constructor(username, password) {    // 构造器函数内初始化属性
    this.username = username;
    this[PASSWORD] = password;
  }

  checkPassword(pwd) {
    return this[PASSWORD] === pwd;
  }

}
export default Login;

在文件b.js中

import Login from './a'

const login = new Login('itclanCoder', '123456'); // 实例化一个login对象

login.checkPassword('123456'); // true
login.PASSWORD;  // 访问不到
login[PASSWORD]; // 访问不到
login['PASSWORD'] // 访问不到

因为通过Symbol定义的PASSWORD常量定义在a.js模块中,外面的模块是获取不到这个Symbol的,在外部无法引用这个值,也无法改写,也不可能在在创建一个一模一样的Symbol出来

因为Symbol是唯一的

在a.js模块中,这个PASSWORD的Symbol类型只能在当前模块文件(a.js)中内部使用,所以使用它来定义的类属性是没有办法被模块外访问到的

这样就达到了一个私有化的效果

  • 应用场景 4-使用Symbol来替代常量

在使用React中,结合Redux做公共数据状态管理时,当想要改变组件中的某个状态时,reducer是一个纯函数,它会返回一个最新的状态给store,返回的结果是由action和state共同决定的

action是一个对象,有具体的类型type值,如果你写过几行Redux的代码,就会常常看到,进行action的拆分,将事件动作的类型定义成常量

const CHANGE_INPUT_VALUE = 'CHANGE_INPUT_VALUE';  // 监听input框输入值的常量
const ADD_INPUT_CONTENT = 'ADD_INPUT_CONTENT';    // 添加列表
const DELETE_LIST = 'DELETE_LIST';                // 删除列表

function reducer(state, action) {
    const newState =  JSON.parse(JSON.stringify(state));
    switch(action.type) {
        case CHANGE_INPUT_VALUE:
             // ...
        case ADD_INPUT_CONTENT:
             // ...
        case DELETE_LIST;
              // ...
        default:
             return state;
    }

}

以上代码在Redux中很常见,将action对象中的type值,给抽离出来,定义一个常量存储,来代表一种业务逻辑,通常希望这些常量是唯一的,在Redux中定义成常量,是为了便于调试查错

常常因为取type值时,非常苦恼.

现在有了Symbol,改写一下,就可以这样

const CHANGE_INPUT_VALUE = Symbol()
const ADD_INPUT_CONTENT = Symbol();
const DELETE_LIST = Symbol()

function reducer(state, action) {
    const newState =  JSON.parse(JSON.stringify(state));
    switch(action.type) {
        case CHANGE_INPUT_VALUE:
             // ...
        case ADD_INPUT_CONTENT:
             // ...
        case DELETE_LIST;
              // ...
        default:
             return state;
    }

}

通过Symbol定义字符串常量,就保证了三个常量的值唯一性

划重点

  • 常量使用Symbol值最大的好处,就是其他任何值都不可能有相同的值了,可以保证常量的唯一性,因此,可以保证上面的switch语句按照你设计的方式条件去工作

  • 当Symbol值作为属性名时,该属性是公开属性,不是私有属性

  • 应用场景 5-注册和获取全局的`Symbol

在浏览器窗口(window)中,使用Symbol()函数来定义生成的Symbol实例是唯一的

但是若应用涉及到多个window,最常见的就是在各个页面窗口中嵌入iframe了,并在各个iframe页面中取到来自同一份公共的数据源

也就是在各个window中使用的某些Symbol希望是同一个,那么这个时候,使用Symbol()就不行不通了

因为用它在不同window中创建的Symbol实例总是唯一的，而我们需要的是在所有这些window环境下保持一个共享的Symbol值。

在这种情况下，我们就需要使用另一个 API 来创建或获取Symbol，那就是Symbol.for()，它可以注册或获取一个window间全局的Symbol实例，它是Symbol的一个静态方法

这个在前面已经提到过一次,这个还是有那么一点点用处,所以在提一嘴的

如下示例代码所示

let gs1 = Symbol.for('global_symbol_1')  //注册一个全局Symbol
let gs2 = Symbol.for('global_symbol_1')  //获取全局Symbol

console.log(gs1 === gs2 ) // true

经过Symbol.for()实例化出来的Symbol字符串类型,只要描述的内容相同,那么不光是在当前window中是唯一的,在其他全局范围内的window也是唯一的,并且相同

该特性,若是创建跨文件可用的symbol，甚至跨域（每个window都有它自己的全局作用域） , 可以使用 Symbol.for()取到相同的值

也就是说,使用了Symbol.for()在全局范围内,Symbol类型值可以共享

注意事项

  • Symbol 值不能与其他类型的值进行运算-会报错
let symItclan = Symbol('itclan');

console.log("主站" + symItclan)
console.log(`主站 ${symItclan}`) // Uncaught TypeError: Cannot convert a Symbol value to a string
  • Symbol可以显示转为字符串
let SyItclanCoder = Symbol('https://coder.itclan.cn');

console.log(String(SyItclanCoder)) // Symbol(https://coder.itclan.cn)
console.log(SyItclanCoder.toString()) // Symbol(https://coder.itclan.cn)
  • Symbol值可以转为布尔值,但是不能转为数值
let sym = Symbol();
console.log(Boolean(sym)) // true
console.log(!sym)  // false

if (sym) {
  // ...
}

Number(sym) // TypeError  Cannot convert a Symbol value to a number
sym + 2 // TypeError

由上面的错误提示可以看出,Symbol不能转换为数字,无法做相应的运算

  • Symbol函数不能使用new命令

Symbol函数前不能使用new命令,否则就会报错,Symbol是一个原始类型的值,不是对象,它是类似字符串的数据类型

  • Symbol值作为对象属性名时，不能用点运算符

当Symbol值作为对象的属性名时,访问它时,不能用点运算符

const username = Symbol();
const person = {};
person.username = '随笔川迹';
person[username]; // undefined
person['username']; // 随笔川迹

第 4 行代码值为undefined,因为点运算符后面总是字符串,所以不会读取username作为标识符名所指代的那个值

导致person对象的属性名实际上是一个字符串,而不是一个Symbol值

由此可见:在对象内部,使用Symbol类型定义属性名时,Symbol值必须放在中括号之中

let s = Symbol();
let obj = {
  [s]: function(arg) {
    return arg;
  }
}

obj[s]("itclanCoder")

在上面的代码中,如果变量s不放在中括号中,该属性的键名就是字符串s,而不是定义Symbol类型值

总结

本文主要介绍了Es6中Symbol的常见使用,Symbol是一种新的基础类型,它形式字符串的数据类型,是字符串类型的一种额外拓展

常用于作为对象属性的键名,每个从Symbol()返回的symbol值都是唯一的,可保证对象的每个属性名的唯一性,可解决属性名的冲突问题

Symbol()函数会返回symbol类型的值，该类型具有静态属性(如Symbol().description,)和静态方法(Symbol.for(),Symbol.keyFor())

当然也介绍了Symbol的一些常见应用场景,作为对象的属性名(key),定义类的私有属性和方法,替代常量,以及注册全局Symbol等,以及一些注意事项

关于Symbol暂且就这么多,还是得多多使用

原文出处-https://coder.itclan.cn-理解 Es6 中的 Symbol 类型

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,602评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,442评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,878评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,306评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,330评论 5赞 373
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,071评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,382评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,006评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,512评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,965评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,094评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,732评论 4赞 323
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,283评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,286评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,512评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,536评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,828评论 2赞 345