理解 JavaScript 内存模型,就靠这几张图了!


来历:medium.com/@ethannam/j…

作者:Ethan Nam
编译:大道至简

// declare some variables and initialize them
var a = 5
let b = 'xy'
const c = true
// assign new values
a = 6
b = b + 'z'
c = false // TypeErroX 1 rr: Assignment to constant variable

作为程序员,声明G g H ) = { c i变量、初始化变量W A o、给变量从头赋值,这些是咱们的日常工作。

可是,这么做的时分实践上发作了什么?JavaS~ J Acript 是怎么在内部处理这些基本功能的?更重要的是,作为程序F ^ t k b员,了解 JavaScript 的m * } r V底层细节对咱们有什么优点?

本文内容? W s 3 c z |如下:

  1. JSC y [ b Q . 原始类型变量声明和赋值
  2. JavaScript 内存模型:栈和堆
  3. JS 非原始类{ ( m 7型变量声明和赋值
  4. Let 和 const

JS 原始类型变量声明和赋值

咱们用一个简略的例子开端。下面声明晰一个叫myNumber的变量,初始值为# l C 23

let myNumber = 23

履行这段代码的时分,JS 会进行如下过程:

  1. 为变量创立一个仅有的标识符(myN= J J 6 u k s u {umber
  2. 在内存中分配一个地址(运行t u J j * W , Y时动态赋值)
  3. 在分配好的地址上存储它的值(23)。
理解 JavaScript 内存模型,就靠这几张图了!

咱们一般说“myNumber 等于 23”,从技术上来讲,其实是w o B X # S myNumberW Y N * O . p 5 2 等于存储着 23 这个值的内存+ ? ^ x v K b M地址。 这是一个需求了解的重要区# { X r G ~ e G别。

假如咱们创立一个叫做newq 5 d D Z }Var的新变量,并把myNumber赋给它:

let newVar = myNumber

由于 myNumber 实践上等于0012CCGWH80,因而 newVar 也等于0012CCGWH80,即存储着23这个值的内存地址。最终成果便是咱们所谓的neh D _ K T * 9wVar 等于 23

理解 JavaScript 内存模型,就靠这几张图了!

由于 myNumber 等于内存地址 0012CCGWH8f Q s W $ m * T0,把它赋值给 newVar 等同于把 0012CCGWH80 赋值给 newVar/ P 3。现在,假如这样做会发作什么:

myNumg D M H ;ber = myNumber + 1

myNumber 的值当然会变成 24。可是,已然指向同一个内存地_ , c v址,newVar 的值也会变成 24 吗?

答案是不会。由于 JS 里的原始数据类型是不可变的,当 myNumber + 1 的值是24的时分,JS 会在内存中拓荒新的地址,把 24作为值存起来,一起 myNumbea s [ kr会指向这个新地址。

理解 JavaScript 内存模型,就靠这几张图了!

还有个例子:

let myS } W Jtring = 'abcZ H F m 1 ] d , 9'
myString = myString+ I G h v 2 m 2 3 + 'd'

新手 JS 程序员或许会说,只要把字母 d 追加到内存里已有的字符串abcS 3 W p G _ O面就行了呀,技术上来说并不是这/ Y v ] x g H X样。JS 的字符串也是原始数据类型,当abcd拼接的时分,会z [ z分配新的内存地址,用来存储abcd,一起 myStr1 ( M Q I T Oing 指向这个新内存地址。

理解 JavaScript 内存模型,就靠这几张图了!

下一步就来了解原始类型数据的内存N S n 6 c e分配是怎A e g么发作的。


JavaScript 内存模型:调用栈和堆

出于本文的意图,能够将 JS 内存模型了解为两个1 4 z m W * –不同的区域:调用栈和堆。

理解 JavaScript 内存模型,就靠这几张图了!

调用栈是原始类型值存储7 y p 3 y i 7 W f的位置(还包含函数调用)。前面所说的变量声明在调用栈里的粗略表明如下图:

理解 JavaScript 内存模型,就靠这几张图了!

在接下来的示例中,我抽象出了内存地址用来显示每个变量的值。可是别忘了,实践上是变量指向内存地址,地 k 3 /址里存储了这个值。这是了d n [ fl# 6 J R K 0 Yetconst 那一节的要害所在。

接下来说堆。

堆是存储非原始类型数据的地方。要害的区别在于,堆能够存储无序数据,这些数据能动态增加,特别适合数组和目标。


JS 非原始类型变量声明# T F J F 2和赋值

跟原始数据类型比较,非原始数据类型的行为表现! j U R 6不同。

咱们用一个简略的例子阐明。下面声明晰一个叫myArray的变量= % s ! V,并初始化为空数组。

let myArray = []

当你声明myArray变量A a z q l并赋值为非原始数据类型比如[]时,内存里会履行如下的过程:

  1. 为变量创立一个仅有o e $ n的标识符(myArray
  2. 在内存中分配一个地址(运行时动态赋值)
  3. 保存堆上分配的内存地址值(运行时赋值)
  4. 堆中的内存地址保存了赋给它的值(空数组[]
理解 JavaScript 内存模型,就靠这几张图了!
理解 JavaScript 内存模型,就靠这几张图了!

此后] b H Z w ] p iD E | O 8咱们能够对数组做puF ? m s $shpop或者其他任何操作。

myArray.pushi 8 H -("first")
myArray.push("second")
m7 _ S b w $ 0 @ VyArray.push("third")
mD 4 D G b qyArray.push("fourth")
myArray.pop()
理解 JavaScript 内存模型,就靠这几张图了!

let 与 cons` 1 }t

一般,咱们应该尽或许地用const,只有在变量会改动的情况下才用let

这里要明确咱们所说的“改动”是什么意思。

把“改动”了解为8 G 6 S ] h T l值的变化是个误区。用这种方式了解“改动”的 JS 程序员,会做这^ – X v ;样的工作:

let sum = 0
sum = 1 + 2 + 3 + 4 + 5
let numbers = []
numbeS n 7 , drs.push(1)
numbers.push(2)
numw Z Y Obers.push(3)
numbers.push(4)
numbers.push(5)

他正确地运用let声明晰sum,由于他J S ]j R A ,道这个值会改动。可是,他过错地用let声明晰numbers,由于他以为g } s l ~ #往数组里增加元素便是改动了它的值。

解说“改动”的正确方法是:改动内存地址let答应改动内存地址,而 const不答应改动内存地址。

const importantID = 489
importantID = 100 // Tyb ~ d 7 s !peError: Assignment to constant variable

Let’s visualize what’s happening h~ [ z & 2 s oere.
无图无本相。

当声明importantID时,分配了内存地址,并将值 489 存起来X a 4 g。记得把变量importantID了解为等于内存地址。

理解 JavaScript 内存模型,就靠这几张图了!

当把 100 赋值给 importantID时,由于100是原始类型数据,因而会分配新的内存地址,并把1009 q –储进去。JS 尝试把新的内存地址赋值给importantID,这里就会报错。这是咱们想要的成果,由于咱们不想改动这个变量的a K _ 7 5 ]值。

理解 JavaScript 内存模型,就靠这几张图了!

之所以被制止从头赋值,是由于importantID是用const声明的。

前面提到的 JS 新手程序员,过错# ] z @ a h R地用let声明晰数组,相反,他应该用cos) 6 C , `nt。看起来很迷惑人,我供认这有点反直觉。初学者或许会以为,数组要能改M m / , r 9 O动才有用啊,const的效果不是制止改动吗,为什么要B 8 e Q e 6 ) I ,用它?可是,要记住:“2 p 3 Q h S改动”是指改动内存地址。让咱们更深化地研究一下,为什么完全能够运用 const 来声明数组。

const myArray = []

当声明 myArray时,在调用栈上分配了一个内存地址,它的值又是在堆上分配的内存地址。堆上存储的才是实践的空数Y Z a | A组。用图来表明是这样的:

理解 JavaScript 内存模型,就靠这几张图了!
理解 JavaScript 内存模型,就靠这几张图了!

z = / : 0 V = ;如履行这些操作:

myArray.push(1)
m^ W CyArray.push(2)
myArray.push(3)
myArray.push(4)
myArray.push(5)
理解 JavaScript 内存模型,就靠这几张图了!

这是往堆上已经存在的数组里增加数字。可是,myArray的内存地址并没有改动。这便是为什么尽管myArray是用const声明的,也没有报错的原因。myArray依然等于0458AFCZX91,它的值是另一个内存地址m e 7 4 F ; Y +22VVCX011,这个地址的值便是堆上的数组。

假如这样做就会报错:

myArray = 3

由于 3是原始数据类型,调用栈上会分配内存地址,并存储3这个值,然后咱们试图把这个新的内存地址赋值给 my3 d h sArray。可是myArray是用const声明的,它不答应这样操作。

理解 JavaScript 内存模型,就靠这几张图了!

这样也会报错:2 G 5 L

myArr? 0 % u Q Y N 8 1ay = ['a']

由于[‘a’]是一个新的非原始类型的数组,在调用栈上会分配: [ u u新的内存地址,在堆上会存储内存地址的值,堆内存地址里存的值便是['a']。然后假如咱们尝试把调用栈上的内存地址赋值给myArray,就会报错。

理解 JavaScript 内存模型,就靠这几张图了!

const声明的目标) 6 ; } R F v &,跟数组一样,也是非原始类型数据,你能够增加特点、更新特点值等等。

const myObj = {}
myObj['newKey'] = 'someValue' /Q + ^/ 不会报错

了解这些有什么用

根据 GitHub 和 Stack Overflow’s Annual De; O M tveloper Survey),JavaSC t q K 8 u # Xcript 是全球排名榜首的编程语言。咱们都期望熟练掌握它,并成为“JS 忍者S Q &”。任何像样的的 JS 课程和书籍都会发起运用constleC @ d e st,少用var,可是3 ^ { ]很少阐明原因。为什么有些const变量“改动”值时会报错,有些又不会?这初学者来说不太直观。为了避免费事,这些人爽性在一切地方都用let,我觉得也有( M P [ z ) . d c一定道理。

可是,不推荐这么做。 Google JavaScript 风格指南里提到:

一切局部变量都应该用constlet声明。默认用const,除非变量需求被从头赋值。不能运用var 要害字。(来历)

尽管没有明确阐明为什么,据我所知,应该有以下几个原因:

  1. 将 bug 摧残在摇篮里
  2. 运用 consj ! R e L , 4 / Gt 声明的变量必须在声明时进行初始化,这就迫使程序员在声明变量时多考虑效果域c W y r 6 g的问题,最终有利于内存办理和性能。
  3. 跟接触代码的其他O 4 5 z人沟通时,可用代码说话:哪些变量是不可变的(就 JS 而言),哪些变量是能够从头赋 z b 4 [ e 值的。

0 ^ e k望以上的解说能帮助你了^ q y / Y R x E解代码里什么时分该用const,什么时分该用let,以及为什么。

参考:

  1. Google JS Style Guide
  2. Learning JavaScript: Call ByS 5 _ C ( 8 p s Sharing, Parameter Passing
  3. How JavaScripo @ e | [t worA Z u u P R j l &ks: memory management + how to handle 4 common memoT l [ = ^ry leaks

看到这个颇有气质的 logo,不来重视下吗?

理解 JavaScript 内存模型,就靠这几张图了!

发表评论

提供最优质的资源集合

立即查看 了解详情