Symbol() 教程

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

Symbol这个词在IT软件领域实际上是个常见角色，在传统前端技术领域，这个词出现频率有限，但是，随着现代web技术的发展，Symbol这个词开始在不同前端语言中出现。

symbol的中文意思是：符号；象征；标志；记号等。

我最早知道是在Adobe Illustrator软件中，作为一个矢量符号存在。在SVG中，就有专门的<symbol>标签，用来指代SVG小图标。

在这里，Symbol又有了另外的角色，作为一个JavaScript的原生数据类型（primitive data type）存在。

说到JavaScript原生数据类型，我们通常想到的有这6种：undefined、null、boolean、string、number、object。而symbol是ES6新增的一个原生数据类型。ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。

Symbol函数前不能使用new命令，否则会报错。这是因为生成的Symbol是一个原始类型的值，不是对象。会报下面的错误：

Uncaught TypeError: Symbol is not a constructor

Symbol函数可以接受一个字符串作为参数，表示对Symbol实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。

而Symbol本身又是一个方法。

例如下面JS：

typeof Symbol();

可以看到Symbol()作为一个方法执行了，同时typeof其类型，也是'symbol'，如下截图：

Symbol的作用非常的专一，换句话说其设计出来就只有一个目的——作为对象属性的唯一标识符，防止对象属性冲突发生。

举个例子，你看上了公司前来的前台妹纸，想了解关于她的更多信息，于是就询问Hr同事，扫地阿姨，于是得到类似这样信息：

let info1 = {
    name: '业余草',
    age: 24,
    job: 'www.xttblog.com',
    description: '平时喜欢做做瑜伽，人家有男朋友，你别指望了'
}
let info2 = {
    description: '这小姑娘挺好的，挺热情的，嘿嘿嘿……'
}

显然，你需要对这两个数据进行汇总，结果，就会发现，描述都用了同一个对象属性description，于是整合的时候，就容器冲突，覆盖，导致“人家有男朋友”这么重要的信息都没注意到。

但是，如果要是Symbol，则完全就不要担心这个问题了：

let info1 = {
    name: '婷婷',
    age: 24,
    job: '公司前台',
    [Symbol('description')]: '平时喜欢做做瑜伽，人家有男朋友，你别指望了'
}
let info2 = {
    [Symbol('description')]: '这小姑娘挺好的，挺热情的，嘿嘿嘿……'
}

此时，我们对info1, info2对象进行复制，如下：

let target = {};
Object.assign(target, info1, info2);

此时target对象如下截图所示：

妹纸所有的描述信息都被完完整整地保留了下来了。

因为Symbol()返回值是唯一的，也就是：

Symbol('description') === Symbol('description');    // 返回值是false

Symbol值不能与其他类型的值进行运算

// 没有参数的情况
var s1 = Symbol();
var s2 = Symbol();

s1 === s2 // false

// 有参数的情况
var s1 = Symbol("foo");
var s2 = Symbol("foo");

s1 === s2 // false

Symbol作为属性使用。

var mySymbol = Symbol();

// 第一种写法
var a = {};
a[mySymbol] = 'Hello!';

// 第二种写法
var a = {
  [mySymbol]: 'Hello!'
};

// 第三种写法
var a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });

// 以上写法都得到同样结果
a[mySymbol] // "Hello!"

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

var a = {};
var name = Symbol();
a.name = 'lili';
a[name] = 'lucy';
console.log(a.name,a[name]);             //lili,lucy

Symbol值作为属性名时，该属性还是公开属性，不是私有属性。

这个有点类似于java中的protected属性（protected和private的区别：在类的外部都是不可以访问的，在类内的子类可以继承protected不可以继承private）

但是这里的Symbol在类外部也是可以访问的，只是不会出现在for…in、for…of循环中，也不会被Object.keys()、Object.getOwnPropertyNames()返回。但有一个Object.getOwnPropertySymbols方法，可以获取指定对象的所有Symbol属性名。

最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

本文原文出处：业余草： » Symbol() 教程