理解Javascript_01_理解内存分配原理分析


Posted in Javascript onOctober 11, 2010

原始值和引用值
在ECMAScript中,变量可以存放两种类型的值,即原始值和引用值。
原始值指的就是代表原始数据类型(基本数据类型)的值,即Undefined,Null,Number,String,Boolean类型所表示的值。
引用值指的就是复合数据类型的值,即Object,Function,Array,以及自定义对象,等等

栈和堆
与原始值与引用值对应存在两种结构的内存即栈和堆
栈是一种后进先出的数据结构,在javascript中可以通过Array来模拟栈的行为

var arr = []; //创建一个栈 
arr.push("apple");//压入元素"apple" ["apple"] 
arr.push("orange");//压入元素"orange" ["apple","orange"] 
arr.pop();//弹出"orange" ["apple"] 
arr.push("banana");//压入元素"banana" ["apple","banana"]

我们来看一下,与之对应的内存图:
理解Javascript_01_理解内存分配原理分析
原始值是存储在栈中的简单数据段,也就是说,他们的值直接存储在变量访问的位置。
堆是存放数据的基于散列算法的数据结构,在javascript中,引用值是存放在堆中的。
引用值是存储在堆中的对象,也就是说,存储在变量处的值(即指向对象的变量,存储在栈中)是一个指针,指向存储在堆中的实际对象.
例:var obj = new Object(); obj存储在栈中它指向于new Object()这个对象,而new 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,"jxl",22);

然后我们来看一下内存分析图:
理解Javascript_01_理解内存分配原理分析
变量num,bol,str为基本数据类型,它们的值,直接存放在栈中,obj,person,arr为复合数据类型,他们的引用变量存储在栈中,指向于存储在堆中的实际对象。

由上图可知,我们无法直接操纵堆中的数据,也就是说我们无法直接操纵对象,但我们可以通过栈中对对象的引用来操作对象,就像我们通过遥控机操作电视机一样,区别在于这个电视机本身并没有控制按钮。

现在让我们来回答为什么引用值要放在堆中,而原始值要放在栈中的问题:

记住一句话:能量是守衡的,无非是时间换空间,空间换时间的问题

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

总结:

程序很简单,但它是一切的根本,基础是最重要的,因为摩天大厦也是一块砖一块瓦的搭建起来的。
内存是程序执行的根本,搞懂了内存,就等于搞懂了一切。
心血之作,鼓励一下自已,加油!

参考:
JavaScript高级程序设计

Javascript 相关文章推荐
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
IE无法设置短域名下Cookie
Sep 23 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
详解Node.js串行化流程控制
May 04 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
vue.js使用3DES加密的方法示例
May 18 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
javascript getElementsByClassName实现代码
Oct 11 #Javascript
javascript Array.prototype.slice使用说明
Oct 11 #Javascript
javascript 伪数组实现方法
Oct 11 #Javascript
javascript forEach通用循环遍历方法
Oct 11 #Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 #Javascript
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 #Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 #Javascript
You might like
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
php防攻击代码升级版
2010/12/29 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
python中元类用法实例
2014/10/10 Python
Python使用functools实现注解同步方法
2018/02/06 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
python爬虫工具例举说明
2020/11/30 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
主持人演讲稿
2014/05/13 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
辩论赛新闻稿
2015/07/17 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
这样写python注释让代码更加的优雅
2021/06/02 Python
教你用python实现12306余票查询
2021/06/30 Python
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js
flex弹性布局详解
2022/03/20 HTML / CSS