JS学习系列08 - 内存分配

本文会同步到我的个人网站中。

在ECMAScript中，变量可以存放两种类型的值

原始值
引用类型值

原始值指的是代表原始数据类型的值，例如：undefined null number string boolean

引用类型指的是复合类型值，例如：object function array 自定义对象

堆和栈

栈是一种LIFO的数据结构，即后进先出，队列是一种FIFO的数据结构，即先进先出
堆是基于散列算法存放数据的一种数据结构
原始值是存放在栈中的简单数据段，它们的值直接存储在变量访问的位置，例如：


var num = 10;      //变量名num和初始化值10都存放在栈中复制代码

引用值是存放在堆中的对象，引用值的变量名是一个存放在栈中指针，指向堆中的引用值对象，例如：


var obj = new object();    //变量名obj存放在栈中，而它指向的object()对象是存放在堆中的复制代码

为什么原始值要放在栈中，引用值要放在堆中？

先看一段代码


function Person(id,name,age){this.id = id;this.name = name;this.age = age;}var num = 10;var bol = true;var str = "abc";var obj = new Object();var arr = ['a','b','c'];var person = new Person(100,"笨蛋的座右铭",25);复制代码

内存分析

原始类型变量num bol str的变量名和内容都存放在栈中
引用类型变量obj arr person的变量名作为指针存放在栈中，指向堆中的变量内容

由上图可以看出，我们不能直接操作堆中的数据，也就是说不能直接操作对象，但我们可以通过栈中存放的变量指针来进行操作

为什么要分堆和栈

堆比栈大，栈比堆的运算速度快,对象是一个复杂的结构，并且可以自由扩展，如：数组可以无限扩充，对象可以自由添加属性。将他们放在堆中是为了不影响栈的效率。而是通过引用的方式查找到堆中的实际对象再进行操作。相对于简单数据类型而言，简单数据类型就比较稳定，并且它只占据很小的内存。不将简单数据类型放在堆是因为通过引用到堆中查找实际对象是要花费时间的，而这个综合成本远大于直接从栈中取得实际值的成本。所以简单数据类型的值直接存放在栈中

总结

两种变量类型：原始值和引用类型值
变量在内存中的存放位置分为堆和栈

JS学习系列08 - 内存分配相关推荐

Vue.js学习系列七——Vue服务器渲染Nuxt学习
我又回来啦~这次我们来学习Vue的服务器渲染SSR. 关于SSR的文章网上很多,一开始看得我云里雾里.然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清 ...
Js面向对象和数据类型内存分配(转)
一 Js基本数据类型以及内存情况 1 Undefined Undefined类型只有一个值undefined,在使用了声明但未初始化的变量的时候,这个变量值就是undefined 1 var hi; ...
C语言学习笔记---动态内存分配
数组在内存中时存储在连续的位置上,当声明一个数组的时候,编译器就会在内存中分配它所需要的空间,但是有时候还需要使用动态内存为数组分配空间. 比如现在要同统计一个班级学生的成绩,可以申请一个固定 ...
08 内存分配和程序内存布局
1 Memory Model 类型描述大小 int 整形数字 4B short 整形数字 2B long 整形数字 8B char 字符 1B float 浮点型 4B double 浮点型 8B ...
c语言的四个函数,C语言学习之动态内存分配的四个函数
前面中我们了解到: int n; int arr[n]; 这样定义数组是不可取的,不能用此方法给数组分配动态内存,那怎么样才能实现这种可能呢? 接下来我将关于动态内存的知识做以下总结. 有关动态内存的 ...
JVM优化系列-对象内存分配和回收的细节
导语通过之前的分享,了解了关于垃圾回收算法以及垃圾回收器以及其使用,下面介绍的就是在实际使用中或者说是在处理问题过程中会出现的一些问题. 文章目录禁用System.gc() System.gc ...
Vue.js学习系列（四十二）-- Vue.js组件
2019独角兽企业重金招聘Python工程师标准>>> 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.组件系统让我们可以用独立 ...
Vue.js学习系列（三十四）-- Vue.js样式绑定（五）
2019独角兽企业重金招聘Python工程师标准>>> 2. Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <!DOCTYPE h ...
Vue.js学习系列（二十七）-- 计算属性（一）
2019独角兽企业重金招聘Python工程师标准>>> 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...

JS学习系列08 - 内存分配

JS学习系列08 - 内存分配相关推荐

最新文章

热门文章