Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >js Symbol数据类型

js Symbol数据类型

作者头像
用户4793865
发布于 2023-01-12 05:38:55
发布于 2023-01-12 05:38:55
2K00
代码可运行
举报
文章被收录于专栏:前端小菜鸡yym前端小菜鸡yym
运行总次数:0
代码可运行
  • 基本数据类型 string boolean number null undefined
  • 引用数据类型 object 而 Es6又新增了一个 Symbol数据类型。当然,其实我们工作中很少使用。

初步了解

声明变量

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  var s1 = Symbol()
  console.log(s1)
  console.log(typeof s1)

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

symbol类型的变量都不相等

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   var s3 = Symbol('mv')
   var s4 = Symbol('mv')

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
console.log(s3,s4)
console.log(s3==s4)

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

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

没有symbol之前的私有化

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 function Person(name, gender) {
     this.name = name
     this.gender = gender
   }
 var p1 = new Person('zhang san', 'male')
 console.log(p1)

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

立即执行函数

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 var Person = (function () {
        function P(name, gender) {
            this.name = name
            this.gender = gender
        }
        // 这里将 P 暴露出去
        return P
     })()

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

gender私有

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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方法来获取值。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 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变量。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  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)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  console.log(p1[Symbol('gender')])    // undefined

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-04-28,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
前端day17-JS高级(原型对象)学习笔记
01-面向对象编程 1.1-面向对象编程介绍 1.理解什么是面向对象编程 面向对象不是一门技术,而是一种解决问题的思维方式 面向对象的本质是对面向过程的一种封装 2.理解什么是对象 对象的本质是程序代码与现实世界沟通的一座桥梁。它有两种函数 对象:是一种数据类型(存储数据的容器),以键值对的形式存储数据 对象:对现实世界实物的一种抽象。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</t
帅的一麻皮
2020/05/07
5270
前端day17-JS高级(原型对象)学习笔记
【Vue3+TypeScript】CRM系统项目搭建之 — 关于拥抱 TypeScript 这件事【上】
string 、 number 、 boolean 、 null 、 undefined 、 bigint 、 symbol 、 object
HelloWorldZ
2024/03/20
2470
【Vue3+TypeScript】CRM系统项目搭建之 — 关于拥抱 TypeScript 这件事【上】
没对象?new一个呗😝
在JavaScript中,new是一个非常重要的关键字,它用于创建对象实例。虽然new看起来很简单,但它背后隐藏着一些复杂的原理和机制。本文将深入解析JavaScript中的new关键字,介绍其作用、原理,并提供一些代码示例来帮助读者更好地理解。
can4hou6joeng4
2023/11/16
3260
day013: JS数据类型之问——概念篇
解释: 虽然 typeof null 会输出 object,但是这只是 JS 存在的一个悠久 Bug。在 JS 的最初版本中使用的是 32 位系统,为了性能考虑使用低位存储变量的类型信息,000 开头代表是对象然而 null 表示为全零,所以将它错误的判断为 object 。
用户3806669
2021/03/11
3640
七、this
我们在学习JavaScript的过程中,由于对一些概念理解得不是很清楚,但是又想要通过一些方式把它记下来,于是就很容易草率的给这些概念定下一些方便自己记忆的有偏差的结论。
用户6901603
2020/07/27
3360
七、this
前端基础进阶(十六):ES6常用基础合集
与 var 不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升。通过 2 个简单的例子来说明这两点。
唐志远
2022/10/27
2360
前端基础进阶(十六):ES6常用基础合集
TypeScript-类属性修饰符
TypeScript 的类属性修饰符是一种重要的语言特性,用于控制类成员的可访问性和行为。主要有三种修饰符:public、private 和 protected。
杨不易呀
2023/09/28
3780
TypeScript-类属性修饰符
TypeScript入门
JavaScript 中可以用 Number 表示的最大整数为 2^53 - 1,可以写为 Number.MAX_SAFE_INTEGER。如果超过了这个界限,可以用 BigInt来表示,它可以表示任意大的整数。
江拥羡橙
2024/10/06
1010
TypeScript入门
(建议收藏)原生JS灵魂之问, 请问你能接得住几个?(上)
笔者最近在对原生JS的知识做系统梳理,因为我觉得JS作为前端工程师的根本技术,学再多遍都不为过。打算来做一个系列,一共分三次发,以一系列的问题为驱动,当然也会有追问和扩展,内容系统且完整,对初中级选手会有很好的提升,高级选手也会得到复习和巩固。敬请大家关注!
桃翁
2019/11/05
1.6K0
(建议收藏)原生JS灵魂之问, 请问你能接得住几个?(上)
JavaScript面向对象精要(二)
构造函数就是用new创建对象时调用的函数。使用构造函数的好处在于所有用同一个构造函数创建的对象都具有同样的属性和方法。
奋飛
2019/08/15
4630
ES6 基础[深基础]
与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升。通过2个简单的例子来说明这两点。而这个简单的例子,会被编译为:变量提升demo示
Java架构师必看
2022/03/12
3800
ES6 基础[深基础]
前端学习(38)~js学习(十五):原型对象
上方代码中,我们的sayName方法是写在构造函数 Person 内部的,然后在两个实例中进行了调用。造成的结果是,构造函数每执行一次,就会给每个实例创建一个新的 sayName 方法。也就是说,每个实例的sayName都是唯一的。因此,最后一行代码的打印结果为false。
Vincent-yuan
2020/03/18
5330
设计模式(八)过滤器模式
然后来编写过滤器。这里编写了两个过滤器,过滤年龄和性别的。还编写了一个与过滤器,用于同时应用两个过滤器。
乐百川
2022/05/05
3560
JS进阶(1) —— 人人都能懂的构造函数
大家都知道原型和原型链是 JavaScript 中最经典的问题之一,而构造函数又是原型和原型链的基础,所以先了解清楚构造函数以及它的执行过程可以更好地帮助我们学习原型和原型链的知识。
全栈程序员站长
2022/07/20
1.1K0
JS进阶(1) —— 人人都能懂的构造函数
typescript 多继承_说明类的继承和多态有什么作用
对于传统的 JavaScript 程序我们会使用函数和基于原型的继承来创建可重用的组件,但对于熟悉使用面向对象方式的程序员使用这些语法就有些棘手,因为他们用的是基于类的继承并且对象是由类构建出来的。 从 ECMAScript 2015,也就是 ES6 开始, JavaScript 程序员将能够使用基于类的面向对象的方式。 使用 TypeScript,我们允许开发者现在就使用这些特性,并且编译后的 JavaScript 可以在所有主流浏览器和平台上运行,而不需要等到下个 JavaScript 版本。
全栈程序员站长
2022/09/16
1.3K0
typescript 多继承_说明类的继承和多态有什么作用
02. 从TypeScript入手,驾驭HarmonyOS开发的技术风潮!-----------(中篇)
TypeScript 的核心原则之一是对值所具有的结构进行类型检查。我们使用接口(Interfaces)来定义对象的类型。 接口是对象的状态(属性)和行为(方法)的抽象(描述)
全栈若城
2024/03/10
2020
02. 从TypeScript入手,驾驭HarmonyOS开发的技术风潮!-----------(中篇)
JS进阶系列02-JS面向对象的三大特征之封装
JS 作为面向对象的一门语言,拥有和其他面向对象语言一样的三大特征,即封装(encapsulation)、继承(inheritance )和多态(polymorphism )。关于继承的概念和实现,在本系列不在赘述,有兴趣的同学可以看看JS入门难点解析12-原型链与继承。
love丁酥酥
2018/08/27
8170
理解 Es6 中的 Symbol 类型
在 Es6 中引入了一个新的基础数据类型:Symbol,对于其他基本数据类型(数字number,布尔boolean,null,undefined,字符串string)想必都比较熟悉,但是这个Symbol平时用得很少,甚至在实际开发中觉得没有什么卵用,能够涉及到的应用场景屈指可数.
itclanCoder
2020/10/28
4660
理解 Es6 中的 Symbol 类型
JS学习笔记
内部函数被返回到外部,函数本身保留了父函数的AO,即使父元素执行完了,取消对AO的引用,但依旧被子函数保留下来了,就形成了闭包。
小丞同学
2021/08/16
4370
JavaScript 高级程序设计(第 4 版)- 对象、类与面向对象编程
通过字面量来重写原型时,Person.prototype被设置为等于一个通过对象字面量创建的新对象,此时Person.prototype的constructor属性就不指向Person了
Cellinlab
2023/05/17
6840
JavaScript 高级程序设计(第 4 版)- 对象、类与面向对象编程
相关推荐
前端day17-JS高级(原型对象)学习笔记
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档