【专栏】包装类:赋予原始类型新的可能性(一)

写在前面

欢迎来到我的专栏,《包装类:赋予原始类型新的可能性》!在这个专栏中,我们将通过数据类型、对象、构造函数、包装类四个层面进行讲解,层层深入,希望你能坚持看下去!

在JavaScript中,我们常常处理各种不同的数据类型,其中原始类型和引用类型是两个基本的数据类别。原始类型的值,比如数字、字符串和布尔值,是直接存储在调用栈中的。而引用类型的值,比如对象,是存在堆内存中的,并且我们在栈中存储了指向堆内存中实际对象的引用地址。

原始类型的值是简单的,它们不具备拥有属性和方法的能力。但是,在JavaScript中,我们希望对这些原始类型的值进行一些操作,比如调用方法或访问属性。这时候,就引入了包装类的概念。

什么是包装类?

包装类是指JavaScript中的三个特殊对象:NumberStringBoolean。这些对象允许我们在原始类型的值上调用方法和访问属性。当我们尝试在原始类型上调用方法或访问属性时,JavaScript会自动将原始类型的值转换为对应的包装类对象,然后调用相应的方法或访问属性。

光秃秃地灌输概念你肯定不能理解,那我将从几个方面来展开讲解。

数据类型

数据类型分为两大类:原始数据类型引用类型

原始数据类型

原始数据类型也称为基本数据类型,是一种用来描述数据类型的基本元素。

js 复制代码
let a = 'hello';//字符串

let b = 123;//数字

let c = true;//布尔

let u = undefined;

let n = null;

在JavaScript中,原始数据类型有StringNumberBoolean,除了这些,还有 nullundefined 两个特殊的原始值,它们用于表示空或未定义的值。

引用类型

在 JavaScript 中,除了原始数据类型外,还有引用类型。引用类型是一种复杂的数据类型,用于存储多个值或对象,它们是通过引用地址来访问的。

js 复制代码
let obj = {//对象
    name: '掘金'
}

var colors = ["red", "green", "blue"];//数组

function a(name) {//函数
    return "Hello, " + name + "!"; 
}
    
var currentDate = new Date();//日期

var pattern = /\d+/;//正则表达式

二者的区别

那么原始数据类型跟引用类型区别在哪里呢?

js 复制代码
let a = 1;
let b = a;
a = 2;
console.log(b);

1

在这段代码中,首先我们声明了一个原始数据类型变量 a 并赋值为 1。然后,我们声明了另一个变量 b 并将 a 的值赋给了 b,所以 b 的值也变成了 1。接着,我们将 a 的值修改为 2,但这不会影响到 b 的值,因为在赋值时,b 已经获取了 a 的值,而后续 a 的变化不会影响 b

那么引用数据类型呢?

js 复制代码
let obj1 = {
    name: '掘金文章'
}
let obj2 =obj1;
obj1.name = '掘金沸点'
console.log(obj2.name);

掘金沸点

在这段代码中,首先我们创建了一个对象 obj1,它包含一个属性 name,其值为 '掘金文章'。然后,我们将 obj1 的引用赋给了 obj2,区别就在这个时候体现了,引用类型传的是址,而不是值。这就意味着我们修改 obj1name 属性的值为 '掘金沸点'的时候,是修改当前obj1对象在这个地址上的值,因为 obj1obj2 都在这个地址上,所以这个修改二者都会受影响。

在JavaScript中,引用类型是通过引用地址来操作的。这意味着,当你创建一个对象时,实际上是在内存中分配了一块堆空间,用来存储该对象的属性和方法。这块内存空间有一个唯一的引用地址,通过这个地址,我们可以访问和操作对象的内容。当你将一个对象赋值给另一个变量时,实际上是将对象的引用地址传递给了新变量,而不是将整个对象复制一份。当你修改这个地址上任意一个变量值时,所有在这个地址上的变量值都会修改。

那我们到调用栈里来看看,我们知道引用类型可以存放非常多的数据,如果这么多数据直接存放在栈当中,会占用非常大的空间,从而导致内存泄漏,所以它不存放在栈中,而是开辟出一个,堆的容量非常大,可以满足引用类型的存储,并用一个地址来记录里面的内容,只将地址存放在调用栈当中,这样就能避免内存泄露。

所以区别在于,引用类型的值是保存在内存中的对象,它们的引用地址存储在变量中,而不是直接保存变量的值。这样,多个变量可以引用同一个对象,从而实现数据的共享和复用。当多个变量引用同一个对象时,其中一个变量修改了对象,其他引用该对象的变量也会受到影响。

至此,数据类型的讲解已经结束,欢迎步入下一章的学习。


下一章: 敬请期待

技术小白记录学习过程,有错误或不解的地方还请评论区留言,如果这篇文章对你有所帮助请 "点赞 收藏+关注" ,感谢支持!!

相关推荐
苏打水com7 小时前
第九篇:Day25-27 Vue进阶——组件复用与状态管理(对标职场“复杂项目”需求)
前端·javascript·vue.js
java1234_小锋7 小时前
Transformer 大语言模型(LLM)基石 - Transformer架构介绍
深度学习·语言模型·llm·transformer
yLDeveloper7 小时前
一只菜鸟学深度学习的日记:填充 & 步幅 & 下采样
深度学习·dive into deep learning
梦里不知身是客117 小时前
flink对于迟到数据的处理
前端·javascript·flink
为爱停留7 小时前
Spring AI实现RAG(检索增强生成)详解与实践
人工智能·深度学习·spring
一 乐7 小时前
人事管理系统|基于Springboot+vue的企业人力资源管理系统设计与实现(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·spring boot·后端
噜~噜~噜~8 小时前
显式与隐式欧拉法(Explicit Euler and Implicit Euler)的个人理解
深度学习·显式欧拉法·隐式欧拉法·动力学系统
愤怒的代码8 小时前
Java 面试 100 题深度解析 · 专栏总览与大纲
java·面试
秋氘渔8 小时前
Vue 3 组合式API中的生命周期钩子函数介绍
前端·javascript·vue.js