js Symbol数据类型

用户4793865

发布于 2023-01-12 05:38:55

1.8K00

代码可运行

文章被收录于专栏：前端小菜鸡yym前端小菜鸡yym

运行总次数：0

代码可运行

基本数据类型 string boolean number null undefined
引用数据类型 object 而 Es6又新增了一个 Symbol数据类型。当然，其实我们工作中很少使用。

初步了解

声明变量

声明一个 Symbol变量，值由函数调用产生。我们进行一下值的打印，以及类型的打印。

  var s1 = Symbol()
  console.log(s1)
  console.log(typeof s1)

可以看到，值就是一个Symbol()，类型则是 symbol类型

symbol类型的变量都不相等

上面的例子中我们并没有给方法传参数，那么我们试一下传参数。

   var s3 = Symbol('mv')
   var s4 = Symbol('mv')

如上，我们给s3 和 s4变量的 Symbol方法中都传入了相同的参数。那么我们看一下二者是否相等。

console.log(s3,s4)
console.log(s3==s4)

可以看到，虽然二者都是相同的值，但是并不相等。

也就是说，没有任何两个symbol类型的变量时相等的，即使传参是一样的。那么这个类型到底有什么用呢？属性私有化(只有内部能访问) --- 数据保护

没有symbol之前的私有化

首先，有如下的一个构造函数(构造函数也就是类)

 function Person(name, gender) {
     this.name = name
     this.gender = gender
   }
 var p1 = new Person('zhang san', 'male')
 console.log(p1)

这个Person构造函数有两个属性一个是名字另一个是性别。如果我不想让性别被外部操作。作为一个私有数据被保护

立即执行函数

首先我们会将其放入立即执行函数中

 var Person = (function () {
        function P(name, gender) {
            this.name = name
            this.gender = gender
        }
        // 这里将 P 暴露出去
        return P
     })()

这时外部还是能对gender进行操作的。

gender私有

那么怎么保护这个内部的私有属性 gender呢？在函数内部先定义一个变量 _gender，然后将实例化时的参数gender赋值给 _gender

var Person = (function () {
            var _gender = ''
            function P(name, gender) {
                this.name = name
                // 传进去的这个 male 被赋值给 当前函数内部的私有变量
                _gender = gender
            }
            return P
        })()
        var p1 = new Person('zhang san', 'male')
        console.log(p1)  // 此时，对象上是没有性别属性的

如图，此时 gender已经被私有保护了。但是此时看不到 gender了。

暴露gender的值

我们需要将getGender方法(其将_gender的值暴露)添加到原型上，然后通过调用getGender方法来获取值。

 var Person = (function () {
            var _gender = ''
            function P(name, gender) {
                this.name = name
                // 传进去的这个 male 被赋值给 当前函数内部的私有变量
                _gender = gender

            }
            P.prototype.getGender = function () {
                return _gender;
            }
            return P
        })()
        var p1 = new Person('zhang san', 'male')
        console.log(p1)
        console.log(p1.getGender())  // 此时，对象上是没有性别属性的

使用Symbol实现私有化

声明 _gender为一个Symbol变量。

  var Person = (function () {
            var _gender = Symbol('gender')
            function P(name, gender) {
                this.name = name
                // 传进去的这个 male 被赋值给 当前函数内部的私有变量
                this[_gender] = gender
            }
            return P
        })()
        var p1 = new Person('zhang san', 'male')
        console.log(p1)  // 但是我们想访问_gender是访问不到的
        console.log(p1[Symbol('gender')])   // 取不到 因为 即使是一模一样的也不是相同的值

如下，我们可以看到gender的值。但是如果我们想得到他的值是没法得到的。我们试一试

表面上看他的键是 Symbol(gender)

  console.log(p1[Symbol('gender')])    // undefined

我们刚才也说过了，没有任何两个Symbol是相等的。因此没有办法根据键去得到值。所以现在gender就是一个私有的、只读的变量。没法对其进行操作。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-04-28，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

登录后参与评论

0 条评论

热度