js符号(Symbol)

一前言

在js中符号分为很多种,有普通符号,知名符号,共享符号这些都统称为符号,那么什么是符号呢?

符号的英文为Symbol,它其实就是es6新增的一个数据类型。

符号设计的初衷,是为了给对象设置私有属性

二、语法

ini 复制代码
const syb = Symbol(); //Symbol()可以传参数

三、特点

符号具有以下特点

  • 没有字面量,只能通过Symbol()函数调用创建
  • 使用typeof的到的类型是symbol
  • 每次调用Symbol函数得到的符号永远不相等,无论符号名是否相同
  • 符号可以作为对象的属性名存在,这种属性称为符号属性

开发者可以通过精心的设计,让这些属性无法通过常规方式被外界访问

符号属性是不能被枚举的,因此在for-in循环中无法读取符号属性,Object.keys方法也无法读取到符号属性

Object.getOwnPropertyNames尽管可以得到所有无法枚举的属性,但是仍然无法读取到符号属性

es6新增Object.getOwnPropertySymbols方法可以读取符号

  • 符号无法被隐式转换,因此不能被用于数学运算,字符串拼接或者其他隐式转换场景,但是符号可以显示转换为字符串,通过String构造函数可以转换。console.log之所有可以输出符号,因为它内部作了显示转换

四、普通符号

普通符号就是上面使用Symbol()函数创建出来的符号

五、共享符号

普通符号可以通过getOwnPropertySymbols方法得到,那么有没有更简单的得到方式呢?这就是共享符号解决的问题

同时来一个共用符号的背景

ini 复制代码
const symb = Symbol()

const obj1 = {
    a:1
    [symb]:2
}

const obj2 = {
    a:1
    [symb]:2
}

上述例子中,obj1和obj2以及symb都在同一个文件中,因此obj1和obj2是共用的同一个符号,那么如果实在不同的文件中应该怎么办呢?

因此就需要共享符号了

共享符号通过Symbol.for("符号名称")创建

ini 复制代码
const symb1 = Symbol("test")
const symb2 = Symbol("test")

console.log(symb1===symb2)   //true

六、知名(公共、具名)符号

知名符号是一些具有特殊意思的符号,通过Symbol的静态属性得到

es6延续了es5的思想,减少魔法,暴露内部实现!因此es6用知名符号暴露了某些场景的内部实现

  • Symbol.hasInstance

该符号用于定义定义构造器的静态成员,它将影响instanceof的判断

css 复制代码
obj instanceof A
等于 A[Symbol.hasInstance](obj)

使用以下办法就可以更改instanceof的实现

javascript 复制代码
function A () {}

Object.defineProperty(A,Symbol.hasInstance,{
    value:function (){
        return false
    }
})
const obj = new A()
console.log(obj instanceof A) //false
  • Symbol.isConcatSpreadable

该知名符号会影响数组的concat方法

  • Symbol.toPrimitive

该知名符号影响类型转换结果

  • Symbol.toStingTag

该知名符号会影响Object.prototype.toString的返回值

  • 其他知名符号
相关推荐
大家的林语冰24 分钟前
✌️ Deno 2.9 来了,ESM 直接导入 CSS,甚至能开发桌面应用?!
前端·javascript·node.js
不简说1 小时前
JS 代码技巧 vol.1 — 10 个让代码少写 30% 的小套路
前端·javascript·面试
@@@@@@@@541 小时前
JavaScript 的缺点与 TypeScript 的弥补
开发语言·javascript·typescript
Hilaku1 小时前
为什么业务型前端容易遭遇中年危机?
前端·javascript·程序员
এ慕ོ冬℘゜1 小时前
深度解析 JavaScript:赋予 Web 灵魂的“全栈语言”
开发语言·前端·javascript
iCOD3R1 小时前
Skill - 3秒生成精美GitHub主页
前端·程序员·ai编程
爱勇宝1 小时前
《道德经》第5章:生产环境不相信眼泪
前端·后端·架构
掘金者阿豪1 小时前
LEFT JOIN 凭空消失的背后,是优化器偷偷帮你做了决定
前端·后端
HackTwoHub2 小时前
AntiDebug Mcp、AI逆向绕过前端,Hook 加密接口,抓取 Vue 路由漏洞,接入 MCP 让 AI 自动化挖掘前端漏洞
前端·vue.js·人工智能·安全·web安全·网络安全·系统安全
Mr_凌宇2 小时前
AI 应用工程进阶扩展学习笔记 二
前端·面试