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

写在前面

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

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

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

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

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


下一章: 敬请期待

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

相关推荐
weixin_429630264 分钟前
3.49 HVLF:一种跨场景的整体视觉定位框架
深度学习·机器学习·计算机视觉
广州灵眸科技有限公司4 分钟前
瑞芯微RV1126B开发板(EASY-EAI-PI2) Easy-Eai编译环境准备与更新
服务器·前端·人工智能·python·深度学习
深度学习lover7 分钟前
<数据集>yolo樱桃识别<目标检测>
人工智能·深度学习·yolo·目标检测·计算机视觉·数据集·樱桃识别
科研小刘带你玩学术1 小时前
【科研快报】Nature子刊重磅|HESpotEx:深度学习首次实现从病理图像直接预测基因表达
深度学习·神经网络·科学计算·插值算法·工程仿真·热环境建模·稀疏网格
JAVA9653 小时前
JAVA面试-并发篇 05-并发包AQS队列实现原理是什么
java·开发语言·面试
kyriewen3 小时前
浏览器缓存最强攻略:强缓存、协商缓存、CDN、更新策略,一篇搞定
前端·面试·浏览器
LIUAWEIO4 小时前
vue里面下载配置使用zepto vue中怎样使用zepto
javascript·vue.js·es6·zepto
lantian5 小时前
TypeScript 三斜线指令完全指南:从入门到理解为什么不再需要它
前端·javascript·vue.js
用户938515635075 小时前
从"用栈实现队列"说起:深入理解 JavaScript 原型式面向对象
javascript
ZengLiangYi5 小时前
AI 编程工具的数据格式为什么不能统一
javascript·后端·架构