JS原始值创建背后发生的故事

简介: Js初学者又或者是使用者都会产生这么一个疑惑: “我们声明的字符串变量为什么可以以类似对象的形式来调用方法,比如str.toString()” ,当然不只是字符串类型,还有布尔,数值类型,他们都属于原始值类型,本文将带你了解这三种原始值的创建,背后发生了什么,为什么可以以对象形式来调用方法,又或者是属性。

引出问题🍵

Js初学者又或者是使用者都会产生这么一个疑惑: “我们声明的字符串变量为什么可以以类似对象的形式来调用方法,比如str.toString() ,当然不只是字符串类型,还有布尔数值类型,他们都属于原始值类型,本文将带你了解这三种原始值的创建,背后发生了什么,为什么可以以对象形式来调用方法,又或者是属性。

背后的类型😶‍🌫️

字符串布尔数值三者背后分别对应着三个原始值包装类型分别为**String()Boolean()Number()** ,其本质为引用类型,而正是这三种引用类型在后面帮助我们的三种原始值,我们以字符串举例,来看看当我们创建一个原始值,后台都发生了什么事情。

let str_1 = "猪痞恶霸"; 
let str_2 = str_1.substring(1); // 痞恶霸
复制代码

如上我们声明了一个str_1并为其赋值,其类型为字符串类型,然后再声明一个str_2变量并调用str_1substring方法为其赋值,那么在其背后发生了什么

let str_1 = new String("猪痞恶霸"); 
let str_2 = str_1.substring(1);
str_1 = null
复制代码

上面是其本质,解析一下这三行都做了什么

  • 使用String()构造一个字符串实例
  • 调用字符串实例方法为其赋值
  • 完成使用后将str_1释放(未回收)

如你所见,创建一个原始值是通过特定的引用类型构造一个实例,所以其能调用方法或者访问其属性(譬如str_1.length),那么我们可以为原始类型添加方法或者属性吗?

let str_1 = "猪痞恶霸"; 
str_1.name = "hogskin"
console.log(str_1.name) // undefined
复制代码

到这里有人就疑问了,为啥捏。其实上面是隐式创建原始值,而当我们显式创建原始值的时候结果还是不同的。

let str_2 = new String("猪痞恶霸")
str_2.name = "hogskin"
console.log(str_2.name) // hogskin
复制代码

使用new String()是显式创建方法,我们可以为其添加属性或者方法,短短的代码,大大的疑惑,我来解释一下为什么上面两个代码块产生不同的效果。

其实上面会出现这种情况完全由显示创建和隐式创建给实例带来不同的生命周期造成的

  • 显式创建:通过new引用类型构造实例,它的会存在与当前作用域之内,离开即销毁。
  • 隐式创建:通过直接创建引用类型,它存在于涉及到它的代码执行调用阶段。

显而易见,隐式创建的生命周期导致了无法为其添加属性或者方法。

隐式还是显式创建❔

又有掘友可能会问:我们推荐使用显式创建还是隐式创建呢?

这个问题问得好!我们下面拿布尔类型举例来看看显示创建和隐式创建的会带来什么结果

let f_1 = new Boolean(false); 
console.log(f_1 && true); // true 
let f_2 = false; 
console.log(f_2 && true); // false
复制代码

为什么会产生这种现象呢,因为f_1是显式创建,创建的实例,默认处理为true,就会导致最后意想不到的结果,所以我们更推荐也是更常用的是隐式创建,其他两种类型也会因为创建方式而收到影响,最显著的影响就是类型不同

let num = 21
let num_2 = new Number(21)
console.log(typeof num_2) // object
console.log(typeof num) // number
复制代码

最后

我们已经了解了三种原始类型的创建在背后会发生什么,也掌握了其不同创建方式会带来的影响,其实我们身为前端工程师更应该了解Js背后的事情,能让我更好地去理解,应用。


相关文章
|
6天前
|
云安全 人工智能 算法
以“AI对抗AI”,阿里云验证码进入2.0时代
三层立体防护,用大模型打赢人机攻防战
1359 7
|
3天前
|
存储 弹性计算 应用服务中间件
2026年阿里云服务器新手租用全流程完整步骤教程(最新版)
2026年阿里云服务器新手租用全流程完整步骤教程,阿里云服务器提供自定义租用、一键租用、云市场租用和活动租用四种核心方式,适配不同配置需求、技术能力和预算场景。无论是需要精准配置的专业用户,还是追求快速部署的新手,都能找到合适的租用方案。以下是详细的适用场景和操作流程,助力高效上云。
288 148
|
7天前
|
人工智能 Rust 运维
这个神器让你白嫖ClaudeOpus 4.5,Gemini 3!还能接Claude Code等任意平台
加我进AI讨论学习群,公众号右下角“联系方式”文末有老金的 开源知识库地址·全免费
|
3天前
|
人工智能 弹性计算 运维
2026年阿里云建站费用解读:三种方案价格明细、功能特性及选型建议
阿里云建站费用多少?2026年阿里云建站费用解读:三种方案价格明细、功能特性及选型建议。在数字化需求日益增长的当下,搭建网站成为个人展示、企业推广的重要途径。阿里云作为主流云服务提供商,针对不同技术基础与业务规模,推出 “自购服务器建站”“万小智 AI 模板建站”“云企业官网定制建站” 三种核心方案,价格从 38 元 / 年到数万元 / 年不等,覆盖从个人到中大型企业的全场景需求。本文基于今年最新官方定价与实测数据,从方案细节、价格体系、功能对比、场景适配等维度展开解析,为用户提供客观选型参考。
258 154
|
6天前
|
机器学习/深度学习 安全 API
MAI-UI 开源:通用 GUI 智能体基座登顶 SOTA!
MAI-UI是通义实验室推出的全尺寸GUI智能体基座模型,原生集成用户交互、MCP工具调用与端云协同能力。支持跨App操作、模糊语义理解与主动提问澄清,通过大规模在线强化学习实现复杂任务自动化,在出行、办公等高频场景中表现卓越,已登顶ScreenSpot-Pro、MobileWorld等多项SOTA评测。
832 4
|
13天前
|
编解码 人工智能 自然语言处理
⚽阿里云百炼通义万相 2.6 视频生成玩法手册
通义万相Wan 2.6是全球首个支持角色扮演的AI视频生成模型,可基于参考视频形象与音色生成多角色合拍、多镜头叙事的15秒长视频,实现声画同步、智能分镜,适用于影视创作、营销展示等场景。
846 14
|
1天前
|
机器学习/深度学习 人工智能 算法
炎鹊「Nexus Agent V1.0」:垂直领域AI应用的原生能力引擎
炎鹊AI「Nexus Agent V1.0」是垂直行业专属AI原生引擎,融合大模型、AIGA决策大脑、行业知识图谱与专属模型,打造“感知-决策-执行”闭环。支持21个行业低代码构建工具型、员工型、决策型AI应用,实现技术到业务价值的高效转化,推动AI从实验走向规模化落地。(239字)
192 1