在看JS内存机制之前我们先来看一下JS是门什么样的语言,他又有哪些变量类型。

动静态,强弱类型

静态:在使用之前就需要确认其变量数据类型。

动态:在运行过程中需要检查数据类型

强类型:不支持隐式类型转换。

弱类型:支持隐式类型转换。

而JS呢,则是一种动态弱类型的语言。

JS的变量类型

JS的变量类型分为8种,注意️:其中Symbol为ES6新增,BigInt为ES11新增

类型

描述

Number

基于IEE754标准的双精度64位二进制格式的值,范围为2的63次方减一到负的2的63次方减一

String

用于表示文本数据,️JS里面字符串是不可变的

Boolean

布尔值,只有true和false

Undefined

一个没有被赋值的变量值为undefined,变量提升的默认值也是undefined

Null

空的初始值,只有一个值Null

Symbol

符号类型,唯一且不可修改

BigInt

可以用任意精度表示数字,即使超出Number的安全范围也可以正常操作

Object

对象,可以看作一组属性的集合

注意:️

  • typeOf Null 为Object,原因在于在JS最初版本000开头的为对象,而Null全为0,故导致为Object。
  • 前七种称为基本数据类型(原始数据类型),最后一种为复杂数据类型又称为引用数据类型(合成数据类型)。

JS的内存

js的内存空间分为栈(stack)、堆(heap)、池(一般也会归类栈中)。其中栈存放变量,堆存放复杂对象,池存放常量,所以也叫常量池。

栈空间就是我们之前反复提及的调用栈是用来存储执行上下文的。基本数据类型的变量值都被保存在执行上下文中,而执行上下文又被压入到栈中,所以你也可以认为基本数据类型都是存放在栈中的(除了闭包)

复杂数据类型的变量都是存储在堆中的,而复杂数据类型的引用则是存储在栈中的。当访问复杂数据类型的时候相当于多了一道转手的流程。

对比

区别

数据结构

栈结构

堆结构

存储内容

基本数据类型和复杂数据类型的引用

复杂数据类型和闭包

空间

空间比较小

空间很大

经过以上我们可以得出除闭包外,基本数据类型的变量都是存储在栈中,而复杂数据类型都是存储在堆中,而复杂数据类型的引用则存储在栈中。

注意️:原始类型的赋值会完整复制变量值,而引用类型的赋值是复制引用地址。

问题

为什么一定要分堆和栈两个存储空间呢?

原因在于 JavaScript 引擎需要用栈来维护程序执行期间上下文的状态,如果栈空间大了话,所有的数据都存放在栈空间里面,那么会影响到上下文切换的效率,进而又影响到整个程序的执行效率

JS变量有哪几类?

JS里面堆存储和栈存储有什么区别?

Null和Undefined的区别?

原因:

其实最初JS也是只有null,但后来JS的设计者觉得这样不太好,原因有如下两点

  • null像在Java里一样,被当成一个对象。但是,JavaScript的数据类型分成原始类型(primitive)和合成类型(complex)两大类,Brendan Eich觉得表示"无"的值最好不是对象。
  • JS的最初版本没有包括错误处理机制,发生数据类型不匹配时,往往是自动转换类型或者默默地失败。Brendan Eich觉得,如果null自动转为0,很不容易发现错误。

区别:

null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。

null代表没有对象,即此处不应该有值,用法:

  1. 作为函数的参数,表示该函数的参数不是对象。
  2. 作为对象原型链的终点。

undefined表示"缺少值",就是此处应该有一个值,但是还没有定义,使用:

一变量二函数一对象

  1. 变量被声明了,但没有赋值时,就等于undefined。
  2. 调用函数时,应该提供的参数没有提供,该参数等于undefined。
  3. 函数没有返回值时,默认返回undefined。
  4. 对象没有赋值的属性,该属性的值为undefined。

参考

阮一峰Null和undefined区别

浏览器工作原理与实战

JS内存机制的更多相关文章

  1. javascript js 内存泄露

    JavaScript 内存泄露 1.什么是闭包.以及闭包所涉及的作用域链这里就不说了. 2.JavaScript垃圾回收机制 JavaScript不需要手动地释放内存,它使用一种自动垃圾回收机制(ga ...

  2. Chrome JS内存泄漏排查方法(Chrome Profiles)

     原文网址:http://blog.csdn.net/kaitiren/article/details/19974269 JS内存泄漏排查方法(Chrome Profiles)   Google Ch ...

  3. Js内存泄露问题总结

    最近接受了一个Js职位的面试,问了很多Js的高级特性,才发现长时间使用已知的特性进行开发而忽略了对这门语言循序渐进的理解,包括Java我想也是一样,偶尔在Sun官方看到JDK6.0列举出来的new f ...

  4. 从浏览器多进程到JS单线程,JS运行机制的一次系统梳理

    前言 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正. ----------超长文+多图预警,需要花费不少时间.---------- 如果看完本文后,还对进程线程傻傻分不清,不清楚浏 ...

  5. js内存深入学习(一)

    一. 内存空间储存 某些情况下,调用堆栈中函数调用的数量超出了调用堆栈的实际大小,浏览器会抛出一个错误终止运行.这个就涉及到内存问题了. 1. 数据结构类型 栈: 后进先出(LIFO)的数据结构  堆 ...

  6. 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理

    前言 来源:https://dailc.github.io/2018/01/21/js_singlethread_eventloop.html 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会 ...

  7. 【进阶1-4期】JavaScript深入之带你走进内存机制(转)

    这是我在公众号(高级前端进阶)看到的文章,现在做笔记 https://mp.weixin.qq.com/s/yK4DPKhkmkiroasWJMrJcw 阅读笔记 JS内存空间分为栈(stack).堆 ...

  8. js内存空间的那点事

    由于js具有自动垃圾回收机制,导致接触js后一直没去关注js的内存分配及变量回收等原理,只是懵懂的了解用变量标记法(null)可以手动的去清除或是回收:是时候弥补这个大坑了... 垃圾回收两种方法 一 ...

  9. 转---单页面应用下的JS内存管理

    正文从这开始- 内存问题对于后端童鞋而言可能是家常便饭,特别是C++童鞋.我在实习时做过半年的c++游戏客户端开发(也是前端开发哦),也见识了各式各样的内存问题,就说说我的第一个坑,当时做个需求,就是 ...

随机推荐

  1. VulnHub CengBox2靶机渗透

    ​本文首发于微信公众号:VulnHub CengBox2靶机渗透,未经授权,禁止转载. 难度评级:☆☆☆☆官网地址:https://download.vulnhub.com/cengbox/CengB ...

  2. SqlServer2016 startengine错误的解决方式整理

    因为某些需要,最近在安装SqlServer2016,但总是安装失败,按照网上各路大佬的解决方案都没有成功.报错提示为两个:无法获取数据库引擎句柄,无法恢复数据库引擎服务.按照网上做法,使用admini ...

  3. Java工具类—包装类

    Java工具类--包装类 我们都知道,JDK 其实给我们提供了很多很多 Java 开发者已经写好的现成的类,他们其实都可以理解成工具类,比如我们常见的集合类,日期相关的类,数学相关的类等等,有了这些工 ...

  4. Python实用笔记 (21)面向对象编程——获取对象信息

    当我们拿到一个对象的引用时,如何知道这个对象是什么类型.有哪些方法呢? 使用type() 首先,我们来判断对象类型,使用type()函数: 基本类型都可以用type()判断: >>> ...

  5. Python实用笔记 (1)字符串与编码

    历史:Ascll-Unicode-UTF-8 对于单个字符的编码,Python提供了ord()函数获取字符的整数表示,chr()函数把编码转换为对应的字符: >>> ord('A') ...

  6. unable to load script from assets 'index.android bundle'

    在Android手机上运行React-native项目时 报错:unable to load script from assets 'index.android bundle'  ,make sure ...

  7. valueOf()、toString()

    基本上,所有JS数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题. JavaScript 的 valueOf() 方法 valu ...

  8. Python抓取国家医疗费用数据:国家名、人均开销

    前言 整个世界正被大流行困扰着,不同国家拿出了不同的应对策略,也取得了不同效果.这也是本文的脑洞来源,打算研究一下各国在医疗基础设置上的开支,对几个国家的医疗费用进行数据可视化. 由于没有找到最近一年 ...

  9. java语言基础(七)_继承_super_this_抽象类

    继承 1. 继承概述 2. 继承格式 在继承的关系中,"子类就是一个父类".也就是说,子类可以被当做父类看待. 例如父类是员工,子类是讲师,那么"讲师就是一个员工&quo ...

  10. css sprites(精灵图)如何使用?

    CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...