我对于 JavaScript 的内存模型一直都比较困惑,很想了解在操作变量的时候,JS 是如何工作的。如果你和我有同样的困惑,希望这篇文章能给你一些启发。

译文,喜欢原文的可以直接拉到底部

当我们声明变量、初始化变量、更改变量值的时候,到底会发生什么?JavaScript 是如何实现这些基本的功能?最重要的是,我们如何才能理解这些基础知识?

本文将覆盖以下 4 个方面:

  1. JavaScript 原始数据类型的变量声明和赋值
  2. JavaScript 内存模型:调用栈和堆
  3. JavaScript 引用类型的变量声明和赋值
  4. Let VS. const

JavaScript 原始数据类型的变量声明和赋值

从一个简单的栗子开始。首先我们声明一个叫myNumber的变量,赋值为 23。

let myNumber = 23

执行这段代码的时候,JavaScript 会...

  1. 为你的变量(myNumber)创建一个唯一标识符。
  2. 为变量分配一个内存地址(运行时)。
  3. 在分配的地址中存储一个值(23)。

通常我们会说:“myNumber 等于 23”,但从技术上讲,myNumber 等于一个内存地址,那儿保存着一个大小为 23 的值。理解这段话十分关键。

如果我们创建一个 newVar 的新变量,然后把 myNumber 赋值给它:

let newVar = myNumber

因为 myNumber 实际上等于“0012CCGWH80”,那么newVar也等于“0012CCGWH80”,这个内存地址保存的值为 23。最终实现了“newVal 等于 23”的效果。

如果我们这样做又会发生什么呢?

myNumber = myNumber + 1

显然,myNumber的值为 24,那么对于指向相同内存地址的newVar,它是否也等于 24?

答案当然是否定的!因为 JavaScript 的基本数据类型是不可变的,myNumber + 1的结果是 24,JavaScript 会分配一个新的内存地址来存储这个值,然后将myNumber指向这个新地址。



图3

再举一个例子:

let myString = 'abc'
myString = myString + 'd'

JS 新手可能认为,字符串abc已经存在于内存里,所以字母d只是追加到它的后面。从技术上讲,这是错误的。由于原始数据类型的不变性,当abcd结合时,JS 会分配一个新的内存地址来保存这个值(abcd),接着myString指向新的地址。



图4

JavaScript 的内存模型:调用栈和堆

JS 的内存模型可以简单的理解为两个不同的区域:调用栈和堆。



图5

栈用来保存原始数据以及函数调用,可以粗略的用下图表示。



图6

上图中,我抽象的在调用栈中显示每个变量的值。但请记住,变量实际指向的是内存地址,那里保存着对应的值。这是理解let vs. cont的关键。

关于堆内存。

堆保存着所有非原始类型的数据。它和栈最大的区别是,堆可以保存无序、能够动态增删的数据——对于对象和数组来说,这是完美的存储空间。

JavaScript 非原始数据类型的变量声明和赋值

还是从一个简单的栗子开始。下面,我们声明一个叫myArray的变量,并初始化一个空数组。

let myArray = []

当 JS 引擎执行上面的代码,内存会发生如下变化:

  1. 为变量(myArray)创建一个唯一标识符。
  2. 在栈中给变量分配一个地址a(运行时)。
  3. 在堆中分配一个地址b,用来存储值 [](运行时)。
  4. 地址a所存储的值为地址b



    图7



图8

现在,我们可以对数组做任何操作了。

myArray.push('first')
myArray.push('second')
myArray.push('third')
myArray.pop()



图9

Let vs. const

我们应该优先使用const而不是let,除非变量会被改变。

我们必须清楚的知道——“改变”到底是什么意思。

值发生了变化,这是对“改变”的一种错误理解。一些 JS 程序员会写下这样的代码:

let sum = 0
sum = 1 + 2 let numbers = []
numbers.push(1)
numbers.push(2)

这段代码正确的使用let声明变量sum,因为值被改变了。然而却错误的使用let来声明变量numbers,因为他们认为给数组 push 一些数据后,数组的值被改变了。

“改变”的正确解释是——内存地址变了。let允许你改变内存地址,const则不允许。

const importantId = 489
importantId = 100 // TypeError: Assignment to constant variable

一起看看这到底发生了什么。

当声明importantId时,JS 引擎为其分配一个内存地址,并存储一个大小为 489 的值。切记,变量importantId等于这个内存地址。



图10

当把 100 赋值给importantId时,因为 100 是原始类型,此时会分配一个用来存储 100 的内存地址。然后 JS 尝试将新的内存地址赋值给importantId,此时就会发生错误。这是我们想要的结果,因为我们不想改变一个非常重要的 ID。



图11

对于新手来说,由于不清楚“改变”的真是含义,在使用 const 声明变量可能会有些困惑,所以他们默认使用 let 来避免麻烦。

然而,这并不是推荐的做法。Google 在他们的 JavaScript 风格指南中写道:“使用 const 或 let 声明所有变量。除非变量会被重新赋值,否则优先使用 const。一定不要使用 var”。

他们没有明确说明为什么要这样做,但我认为这样做有以下好处:

  1. 减少未来的bug。
  2. 使用 const 声明变量时必须初始化,这会强迫程序员更加小心的处理变量作用域,带来更好的内存管理和性能。
  3. 更好的可读性,哪些变量是不变的,哪些会被重新赋值,一目了然。

bye...

原文链接

javascript 内存模型的更多相关文章

  1. (转)JavaScript内存模型

    JavaScript对象内存模型 转自:http://blog.csdn.net/u010425776/article/details/53617292  推荐-JavaScript作用域链内存模型: ...

  2. JavaScript 是如何工作的:JavaScript 的内存模型

    摘要: 从内存角度理解 let 和 const 的意义. 原文:JavaScript 是如何工作的:JavaScript 的内存模型 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这 ...

  3. JavaScript学习系列之内存模型篇

    一个热爱技术的菜鸟...用点滴的积累铸就明日的达人 正文 如果真的想学好一门语言,那么一定要了解它内存模型,本篇文章就带你走进JavaScript的内存模型,由于本人才疏学浅,若有什么表述有误的地方, ...

  4. JavaScript的内存模型

    引言 在我们的前端日常工作中,无时无刻不在进行着变量的声明和赋值,你是否也曾碰到过变量声明报错或变量被污染的问题,如果你跟笔者一样碰到过,那么我们应该暂时停下来好好思考问题发生的原因以及如何采取相应的 ...

  5. 浅谈JavaScript原型图与内存模型

    js原型详解 1.内存模型: 1.原型是js中非常特殊一个对象,当一个函数(Person)创建之后,会随之就产生一个原型对象 2. 当通过这个函数的构造函数创建了一个具体的对象(p1)之后,在这个具体 ...

  6. JavaScript闭包模型

      JavaScript闭包模型 -----  [原创翻译]2016-09-01  09:32:22 < 一>  闭包并不神秘 本文利用JavaScript代码来阐述闭包,目的是为了使普通 ...

  7. JavaScript事件模型及事件代理

    事件模型 JavaScript事件使得网页具备互动和交互性,我们应该对其深入了解以便开发工作,在各式各样的浏览器中,JavaScript事件模型主要分为3种:原始事件模型.DOM2事件模型.IE事件模 ...

  8. JavaScript 内存机制

    简介 每种编程语言都有它的内存管理机制,比如简单的C有低级的内存管理基元,像malloc(),free().同样我们在学习JavaScript的时候,很有必要了解JavaScript的内存管理机制. ...

  9. [书籍翻译] 《JavaScript并发编程》 第二章 JavaScript运行模型

    本文是我翻译<JavaScript Concurrency>书籍的第二章 JavaScript运行模型,该书主要以Promises.Generator.Web workers等技术来讲解J ...

随机推荐

  1. K8s部署使用CFSSL创建证书

    证书的编码格式 PEM(Privacy Enhanced Mail),通常用于数字证书认证机构(Certificate Authorities,CA),扩展名为.pem, .crt, .cer, 和  ...

  2. 记一次vcsa6修复过程

    一. 某天发现一台vmware  vCenter Server Appliance services 6偶尔能登陆了,但极不稳定,连shell都偶尔能进...... 然后利用各种手段想方设法进到she ...

  3. springMVC自定义全局异常

    SpringMVC通过HandlerExceptionResolver处理程序异常,包括Handler映射,数据绑定以及目标方法执行时所发生的异常. SpringMVC中默认是没有加装载Handler ...

  4. 我的hadoop学习之路

    Hadoop实现了一个分布式文件系统(Hadoop Distributed File System),简称HDFS.HDFS有高容错性的特点,并且设计用来部署在低廉的(low-cost)硬件上. Ha ...

  5. mongodb安装及配置

    下载安装篇 MongoDB 提供了 linux 各发行版本 64 位的安装包,你可以在官网下载安装包. 下载地址:https://www.mongodb.com/download-center#com ...

  6. Python设计模式 - UML - 部署图(Deployment Diagram)

    简介 部署图也称配置图,用来显示系统中硬件和软件的物理架构.从中可以了解到软件和硬件组件之间的物理拓扑.连接关系以及处理节点的分布情况. 部署图建模步骤 - 找出需要进行部署的各类节点,如网络硬件设备 ...

  7. xcode项目打不开:incompatible project version问题

    低版本xcode打开高版本xcode项目或库工程的时候就会出现,打不开的问题 解决 1可以重建创建工程,将文件拷贝到新工程 2 相对一,较简单 找到.xcodeproj文件 右键 显示包内容,找到pr ...

  8. Android抓取log日志过滤

    前提:Android SDK已安装并配置环境变量 1.手机USB调试模式打开,连接PC 2.cmd窗口,执行adb logcat >log.log   // 输出日志到一个log文件 或者执行a ...

  9. WEB框架本质和第一个Django实例

    Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 总的来说:Web框架的本质就是浏览 ...

  10. 安装配置python环境,并跑一个推荐系统的例子

    1.官网下载python2.7,安装完后,在环境变量Path中加上这个路径 在控制台输入python,出现版本信息,就成功了. 2.我使用的是 pycharm,注册后,在 把自己的python.exe ...