Symbols 是 ES6 引入了一个新的数据类型 ,它为 JS 带来了一些好处,尤其是对象属性时。 但是,它们能为我们做些字符串不能做的事情呢?
在深入探讨 Symbol 之前,让我们先看看一些 JavaScript 特性,许多开发人员可能不知道这些特性。
背景
js 中的数据类型总体来说分为两种,他们分别是:值类型 和 引用类型
值类型(基本类型):数值型(Number),字符类型(String),布尔值型(Boolean),null 和 underfined
引用类型(类):函数,对象,数组等
值类型理解:变量之间的互相赋值,是指开辟一块新的内存空间,将变量值赋给新变量保存到新开辟的内存里面;之后两个变量的值变动互不影响,例如:
var a = 10; //开辟一块内存空间保存变量a的值“10”; var b = a; //给变量 b 开辟一块新的内存空间,将 a 的值 “10” 赋值一份保存到新的内存里; //a 和 b 的值以后无论如何变化,都不会影响到对方的值;
一些语言,比如 C,有引用传递和值传递的概念。JavaScript 也有类似的概念,它是根据传递的数据类型推断的。如果将值传递给函数,则重新分配该值不会修改调用位置中的值。但是,如果你修改的是引用类型,那么修改后的值也将在调用它的地方被修改。
引用类型理解:变量之间的互相赋值,只是指针的交换,而并非将对象(普通对象,函数对象,数组对象)复制一份给新的变量,对象依然还是只有一个,只是多了一个指引~~;例如:
var a = { x: 1, y: 2 }; //需要开辟内存空间保存对象,变量 a 的值是一个地址,这个地址指向保存对象的空间; var b = a; // 将a 的指引地址赋值给 b,而并非复制一给对象且新开一块内存空间来保存; // 这个时候通过 a 来修改对象的属性,则通过 b 来查看属性时对象属性已经发生改变;
值类型(神秘的 NaN 值除外)将始终与具有相同值的另一个值类型的完全相等,如下:
const first = "abc" + "def"; const second = "ab" + "cd" + "ef"; console.log(first === second); // true
但是完全相同结构的引用类型是不相等的:
const obj1 = { name: "Intrinsic" }; const obj2 = { name: "Intrinsic" }; console.log(obj1 === obj2); // false // 但是,它们的 .name 属性是基本类型: console.log(obj1.name === obj2.name); // true
对象在 JavaScript 语言中扮演重要角色,它们的使用无处不在。对象通常用作键/值对的集合,然而,以这种方式使用它们有一个很大的限制: 在 symbol 出现之前,对象键只能是字符串,如果试图使用非字符串值作为对象的键,那么该值将被强制转换为字符串,如下:
const obj = {}; obj.foo = 'foo'; obj['bar'] = 'bar'; obj[2] = 2; obj[{}] = 'someobj'; console.log(obj); // { '2': 2, foo: 'foo', bar: 'bar', '[object Object]': 'someobj' }
Symbol 是什么
Symbol() 函数会返回 symbol 类型的值,该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象;它的静态方法会暴露全局的 symbol 注册,且类似于内建对象类,但作为构造函数来说它并不完整,因为它不支持语法:“new Symbol()”。所以使用 Symbol 生成的值是不相等:
const s1 = Symbol(); const s2 = Symbol(); console.log(s1 === s2); // false
实例化 symbol 时,有一个可选的第一个参数,你可以选择为其提供字符串。 此值旨在用于调试代码,否则它不会真正影响symbol 本身。
const s1 = Symbol("debug"); const str = "debug"; const s2 = Symbol("xxyy"); console.log(s1 === str); // false console.log(s1 === s2); // false console.log(s1); // Symbol(debug)
symbol 作为对象属性
symbol 还有另一个重要的用途,它们可以用作对象中的键,如下:
const obj = {}; const sym = Symbol(); obj[sym] = "foo"; obj.bar = "bar"; console.log(obj); // { bar: 'bar' } console.log(sym in obj); // true console.log(obj[sym]); // foo console.log(Object.keys(obj)); // ['bar']
乍一看,这看起来就像可以使用 symbol 在对象上创建私有属性,许多其他编程语言在其类中有自己的私有属性,私有属性遗漏一直被视为 JavaScript 的缺点。
不幸的是,与该对象交互的代码仍然可以访问其键为 symbol 的属性。 在调用代码尚不能访问 symbol 本身的情况下,这甚至是可能的。 例如,Reflect.ownKeys() 方法能够获取对象上所有键的列表,包括字符串和 symbol :
function tryToAddPrivate(o) { o[Symbol("Pseudo Private")] = 42; } const obj = { prop: "hello" }; tryToAddPrivate(obj); console.log(Reflect.ownKeys(obj)); // [ 'prop', Symbol(Pseudo Private) ] console.log(obj[Reflect.ownKeys(obj)[1]]); // 42