JavaScript 学院 #1:原始值 vs 引用值

2025-05-25

JavaScript 学院 #1:原始值 vs 引用值

欢迎来到这个新学院!在这里,我不会从头开始讲解 JavaScript,而是会讲解一些 JavaScript 概念,帮助你理解 JavaScript 引擎!

primitive value今天我将向你展示&之间的区别reference value

原始值

原始string,,,,numberbooleannullundefinedsymbols

参考值

所有其他事物plain object {},例如array,,,Map等等......

数据如何存储?

对于原始值,值存储在 上stack,换句话说,在current context!

对于参考值,该值存储在 中heap,它是一个很大的存储空间,保存着所有内容objects,每个内容object都有自己的地址!(就像村里的房子一样,每栋房子都有自己的地址)

图片描述

因此,为了获得object通过,Heap您需要使用这个地址object

图片描述

幸运的是,您不需要管理adress自己!

变量声明

对于原始值,变量存储其值。因此,你可以操作actual value存储在该变量中的内容。

let toto = 5
toto = 6
console.log(toto) // 6
Enter fullscreen mode Exit fullscreen mode

图片描述

引用与原始值不同,当你操作一个对象时,你操作的是reference该对象的 !所以你把对象的 存储reference在变量中。

let toto = {}
toto.a = 'hello'
console.log(toto) // { a: 'hello' }
Enter fullscreen mode Exit fullscreen mode

图片描述

复制值

对于原始值,当您分配一个存储它的变量时,primitive value它将被复制value到一个新变量中。

因此,如果修改变量的值,其他变量的值将不会改变。

let a = 55
let b = a

a = 100
console.log(a) // 100
console.log(b) // 55
Enter fullscreen mode Exit fullscreen mode

图片描述

对于引用值,当您分配一个存储reference value它的变量时,会将该对象的引用复制到一个新变量中。

所以,如果你修改一个变量的值,另一个变量的值也会改变!因为两个变量共享同一个值reference

let a = {}
let b = a

a.toto = 'hello'
console.log(b) // { toto: 'hello' }
Enter fullscreen mode Exit fullscreen mode

图片描述

使用函数参数

对于原始值,当您传递包含的变量primitive value作为函数的参数时,它将复制value该变量。

因此,如果您将此值编辑到函数中,它将不会改变原始变量中的值!

let a = 55

const foo = function (arg) {
   arg = 100
   console.log(arg) // 100
}
foo(a)
console.log(a) // 55
Enter fullscreen mode Exit fullscreen mode

对于参考值,当您传递一个包含的变量reference value作为函数的参数时,它将复制reference该变量的。

因此,如果您将此值编辑到函数中,它将改变原始变量中的值!

let a = { toto: 'hello' }

const foo = function (arg) {
   arg.toto = 'changed'
   console.log(arg) // { toto: 'changed' }
}
foo(a)
console.log(a) // { toto: 'changed' }
Enter fullscreen mode Exit fullscreen mode

正如您所看到的,当您使用时,reference value您可以编辑共享此变量的其他变量reference value


我希望你喜欢这篇文章!

🎁 如果您在Twitter上关注我并给我发送消息,您可以Underrated skills in javascript, make the difference免费获得我的新书😁 并节省 19 美元💵💵

或者在这里获取

🇫🇷🥖 对于法国开发者,你可以查看我的YoutubeChannel

🎁我的新闻通讯

☕️ 你可以支持我的作品🙏

🏃‍♂️ 你可以关注我 👇

🕊 推特:https://twitter.com/code__oz

👨‍💻 Github:https://github.com/Code-Oz

你也可以标记🔖这篇文章!

文章来源:https://dev.to/codeoz/javascript-academy-1-primitive-value-vs-reference-value-1phl
PREV
JavaScript 学院 #2:闭包
NEXT
我如何提高 Typescript 技能 #2:映射类型