概述

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、Boolean、String、Number、Object
直接调用Symbol函数即可生成一个Symbol，注意Symbol函数前不能使用new命令，否则会报错。
Symbol函数可以接受一个字符串作为参数，表示对 Symbol 的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分

生成Symbol

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         // symbol是一种新的原始数据类型是一个唯一的值
  12.         // 有参数的情况下
  13.         let s1 = Symbol('f00')
  14.         let s2 = Symbol('f11')
  15.         console.log(s1==s2); // false
  17.         // 无参数
  18.         let s3 = Symbol()
  19.         let s4 = Symbol()
  20.         console.log(s3==s4);  // false
  21.         /* 括号里面的参数是一种描述 */
  22.     </script>
  23. </body>
  24. </html>

Symbol.for

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         // 注意这里会去找同样用for语法注册的，有就复用，没有就重新注册
  11.         let s1 = Symbol.for('pp')
  12.         let s2 = Symbol.for('pp')
  13.         // 上面相当于 s1 = s2  的赋值
  14.         console.log(s1===s2); // true
  15.     </script>
  16. </body>
  17. </html>

使用Symbol最为对象的属性名

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

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <script>
  11.         let mySymbol = Symbol()
  13.         // 第一种写法
  14.         let a ={
  15.             [mySymbol] :'Hello'
  16.         }
  17.         console.log(a);
  20.         // 第二种
  21.         let b={}
  22.         Object.defineProperty(b,mySymbol,{value:'你好哇'})
  23.         console.log(b);
  24.         b.xx='上大学'
  26.         // symbol作为属性名的时候不会被遍历  for..in   fro..on  object.keys() 等
  28.       for (const key in b) {
  29.          console.log(b[key]);
  30.       }
  32.     //   如果想获取的用以下方法
  33.       console.log(Object.getOwnPropertySymbols(b)[0]===mySymbol); // true
  34.     </script>
  35. </body>
  36. </html>

实现私有属性

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <script>
  11.         var Person =(function(){
  12.             var mySymbol = Symbol('name')
  14.             function Person (name) {
  15.                 this[mySymbol] = name
  16.             }
  17.             return Person
  18.         }())
  19.         let obj1 =new Person('zs')
  20.         console.log(obj1);
  21.       // 缺陷：仍然会被Object.getOwnPropertySymbols获取到属性，进而修改该属性对应的值
  22.     </script>
  23. </body>
  24. </html>