JS内存机制
在看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代表没有对象,即此处不应该有值,用法:
- 作为函数的参数,表示该函数的参数不是对象。
- 作为对象原型链的终点。
undefined表示"缺少值",就是此处应该有一个值,但是还没有定义,使用:
一变量二函数一对象
- 变量被声明了,但没有赋值时,就等于undefined。
- 调用函数时,应该提供的参数没有提供,该参数等于undefined。
- 函数没有返回值时,默认返回undefined。
- 对象没有赋值的属性,该属性的值为undefined。
参考
阮一峰Null和undefined区别
浏览器工作原理与实战
JS内存机制的更多相关文章
- javascript js 内存泄露
JavaScript 内存泄露 1.什么是闭包.以及闭包所涉及的作用域链这里就不说了. 2.JavaScript垃圾回收机制 JavaScript不需要手动地释放内存,它使用一种自动垃圾回收机制(ga ...
- Chrome JS内存泄漏排查方法(Chrome Profiles)
原文网址:http://blog.csdn.net/kaitiren/article/details/19974269 JS内存泄漏排查方法(Chrome Profiles) Google Ch ...
- Js内存泄露问题总结
最近接受了一个Js职位的面试,问了很多Js的高级特性,才发现长时间使用已知的特性进行开发而忽略了对这门语言循序渐进的理解,包括Java我想也是一样,偶尔在Sun官方看到JDK6.0列举出来的new f ...
- 从浏览器多进程到JS单线程,JS运行机制的一次系统梳理
前言 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正. ----------超长文+多图预警,需要花费不少时间.---------- 如果看完本文后,还对进程线程傻傻分不清,不清楚浏 ...
- js内存深入学习(一)
一. 内存空间储存 某些情况下,调用堆栈中函数调用的数量超出了调用堆栈的实际大小,浏览器会抛出一个错误终止运行.这个就涉及到内存问题了. 1. 数据结构类型 栈: 后进先出(LIFO)的数据结构 堆 ...
- 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理
前言 来源:https://dailc.github.io/2018/01/21/js_singlethread_eventloop.html 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会 ...
- 【进阶1-4期】JavaScript深入之带你走进内存机制(转)
这是我在公众号(高级前端进阶)看到的文章,现在做笔记 https://mp.weixin.qq.com/s/yK4DPKhkmkiroasWJMrJcw 阅读笔记 JS内存空间分为栈(stack).堆 ...
- js内存空间的那点事
由于js具有自动垃圾回收机制,导致接触js后一直没去关注js的内存分配及变量回收等原理,只是懵懂的了解用变量标记法(null)可以手动的去清除或是回收:是时候弥补这个大坑了... 垃圾回收两种方法 一 ...
- 转---单页面应用下的JS内存管理
正文从这开始- 内存问题对于后端童鞋而言可能是家常便饭,特别是C++童鞋.我在实习时做过半年的c++游戏客户端开发(也是前端开发哦),也见识了各式各样的内存问题,就说说我的第一个坑,当时做个需求,就是 ...
随机推荐
- 上位机面试必备——TCP通信灵魂二十问【上】
关注公众号获取更多干货 TCP通信协议应该是上位机开发中应用最广泛的协议,无论是西门子S7协议.三菱MC协议或者是欧姆龙的Fins-TCP协议等,都是TCP通信协议的典型应用.很多人在上位机面试时,都 ...
- Java多线程之volatile详解
本文目录 从多线程交替打印A和B开始 Java 内存模型中的可见性.原子性和有序性 Volatile原理 volatile的特性 volatile happens-before规则 volatile ...
- 一对多分页的SQL到底应该怎么写?
1. 前言 MySQL一对多的数据分页是非常常见的需求,比如我们要查询商品和商品的图片信息.但是很多人会在这里遇到分页的误区,得到不正确的结果.今天就来分析并解决这个问题. 2. 问题分析 我们先创建 ...
- SpringCloud 入门(一)
本人也是刚接触springcloud,现在先将创建项目的过程记录下来,springcloud的理解日后再慢慢补齐,最好还是自己参考官方文档的介绍 使用工具:IDEA IDEA创建springcloud ...
- JavaScript图形实例:窗花图案
1.窗花基本框线 设定曲线的坐标方程为: n=25; r=100; x=r/n*cos(5*θ)+r*cos(θ); y=r/n*sin(5*θ)+r*sin(θ); (0≤θ≤2π ...
- dubbo源码解析之负载均衡
在分布式系统中,负载均衡是必不可少的一个模块,dubbo 中提供了五种负载均衡的实现,在阅读这块源码之前,建议先学习负载均衡的基础知识.把看源码当做一个印证自己心中所想的过程,这样会得到事半功倍的效果 ...
- JavaScript基础对象创建模式之声明依赖模式(023)
运用了命名空间(Namespace)模式后, 就可以使用一些JavaScript库了,比如YAHOO作用YUI2库的全局对象,可以通过 YAHOO.util.Dom 和 YAHOO.util.Even ...
- 自描述C++部分面试题集
1.谈谈啥叫对象成员以及对象成员的构造函数调用调用方式. 在类中定义的数据成员一般都是基本的数据类型.但是类中的成员也可以是对象,叫做对象成员. C++中对对象的初始化时非常重要的操作,当创建一个对象 ...
- 让 JavaScript 与 CSS 和 Sass 对话
JavaScript 和 CSS 已经并存超过了 20 年.但是在它们之间共享数据非常困难.当然也有大量的尝试.但是我所想到的是一些简单而直观的内容——不涉及结构更改,而是使用 CSS 自定义属性甚至 ...
- 关于渐进式 Web 应用,你应该知道的一切
渐进式 Web 应用是利用现代浏览器的特性,可以添加到主屏幕上,表现得像原生应用程序一样的 Web 应用程序. 什么是渐进式 Web 应用 渐进式 Web 应用(PWA)本质上与普通的网站没有什么不同 ...