文章目录
前言
ES5 的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突。如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突。这就是 ES6引入Symbol 的原因。
JavaScript的⼏种数据类型:
- 栈:原始数据类型( Undefined , Null , Boolean , Number 、 String )
- 堆:引⽤数据类型(对象、数组和函数)
两种类型的区别是:存储位置不同;
- 原始数据类型直接存储在栈( stack )中的简单数据段,占据空间⼩、⼤⼩固定,属于被频 繁使⽤数据,所以放⼊栈中存储;
- 引⽤数据类型存储在堆( heap )中的对象,占据空间⼤、⼤⼩不固定,如果存储在栈中,将会影响程序运⾏的性能;引⽤数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引⽤值时,会⾸先检索其 在栈中的地址,取得地址后从堆中获得实体。
一、Symbol是什么?
ES6 引入了一种新的原始数据类型 Symbol ,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是: undefined 、 null 、布尔值 (Boolean)、字符串(String)、数值(Number)、对象(Object)。
二、声明方式
1. Symbol 值通过 Symbol 函数生成。
这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。
let s1 = Symbol()
let s2 = Symbol()
console.log(s1)
console.log(s2)
console.log(s1 === s2) // false
注意, Symbol 函数前不能使用 new 命令,否则会报错。这是因为生成的 Symbol 是一个原始类型的值,不是对象。也就是说,由于 Symbol 值不是对 象,所以不能添加属性。基本上,它是一种类似于字符串的数据类型。
2. 接受一个字符串作为参数
Symbol 函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分。
//可接受一个字符串作为描述
let s1 = Symbol('foo')
let s2 = Symbol('foo')
console.log(s1)
console.log(s2)
console.log(s1 === s2)// false
可通过s.description输出描述字符串:
let s = Symbol('foo')
s.name = 'kakaDorothy'
// 赋值不成功
console.log(s)
// Symbol(foo)
// 输出当前的描述
console.log(s.description)
// foo
3. 以对象作为参数
若参数是一个对象,则会自动调用该对象的toString方法,将对象转换为字符串,然后生成一个Symbol的值
const obj = {
name: 'kakaDorothy',
toString() {
// 重写toString方法
return this.name
}
}
let s = Symbol(obj)
console.log(s)
// Symbol(kakaDorothy)
4. Symbol.for
使用Symbol.for声明时,若描述一致时,则代表同一个值,因为Symbol.for总是会在全局环境去寻找是否有这样相同描述的值,若有的话就将新的指向它,否则重新定义(定义到全局)。
let s1 = Symbol.for('foo')
let s2 = Symbol.for('foo')
console.log(s1 === s2) // true
// 就算放在局部作用域也不例外,Symbol.for仍会在全局环境去寻找
function foo() {
return Symbol.for('foo')
}
const x = foo()
const y = Symbol.for('foo')
console.log(x === y) // true
5. Symbol.keyFor
返回一个全局已经登记过的Symbol的key
const s1 = Symbol('foo')
console.log(Symbol.keyFor(s1)) // undefined
const s2 = Symbol.for('foo')
console.log(Symbol.keyFor(s2)) // foo
三、应用场景
1. 当有重名的情况
const grade = {
张三: {address: 'xxx', tel: '111'},
李四: {address: 'yyy', tel: '222'},
李四: {address: 'zzz', tel: '333'},
}
console.log(grade)
// 张三: {address: "xxx", tel: "111"}
// 李四: {address: "zzz", tel: "333"}
// 最后一个李四会覆盖掉第二个李四
const stu1 = '李四'
const stu2 = '李四'
const grade = {
[stu1]: {address: 'yyy', tel: '222'},
[stu2]: {address: 'zzz', tel: '333'},
}
console.log(grade)
//李四: {address: "zzz", tel: "333"}
//key是相同的,仍然会被覆盖掉
使用Symbol,Symbol声明的值是独一无二的,在内存中处于不同的地址 :
const stu1 = Symbol('李四')
const stu2 = Symbol('李四')
const grade = {
[stu1]: {address: 'yyy', tel: '222'},
[stu2]: {address: 'zzz', tel: '333'},
}
console.log(grade)
//李四: {address: "yyy", tel: "222"}
//李四: {address: "zzz", tel: "333"}
// 获取具体某一个重名的人的信息
console.log(grade[stu1])
console.log(grade[stu2])
2. 将属性保护起来
const sym = Symbol('KD')
class User {
constructor(name) {
this.name = name
this[sym] = 'KDKD'
}
getName() {
return this.name + this[sym]
}
}
const user = new User('Dorothy')
console.log(user.getName())
// DorothyKDKD
// for...in无法获取到Symbol属性值
for(let key in user){
console.log(key)
// name
}
// for...of配合Object.keys无法获取到Symbol属性值
for(let key of Object.keys(user)){
console.log(key)
}
// Object.getOwnPropertySymbols仅能获取到Symbol属性值,无法获取到其他属性
for(let key of Object.getOwnPropertySymbols(user)){
console.log(key)
//Symbol(KD)
}
//Reflect.ownKeys可以获取全部属性值
for(let key of Reflect.ownKeys(user)){
console.log(key)
// name Symbol(KD)
}
3. 消除魔术字符串
当代码多次出现某个字符串时,会形成强耦合,称为魔术字符串。
function getArea(shape) {
let area = 0
switch (shape) {
case 'Triangle':
area = 1
break
case 'Circle':
area = 2
break
}
return area
}
console.log(getArea('Triangle'))
使用Symbol消除:
const shapeType = {
// 属性的具体值并不重要
triangle: Symbol(),
circle: Symbol()
}
function getArea(shape) {
let area = 0
switch (shape) {
case shapeType.triangle:
area = 1
break
case shapeType.circle:
area = 2
break
}
return area
}
console.log(getArea(shapeType.triangle))