理解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 相关文章推荐
菜单效果
Oct 14 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
vue.js,ajax渲染页面的实例
Feb 11 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 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
2.PHP入门
2006/10/09 PHP
php实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
python实现的udp协议Server和Client代码实例
2014/06/04 Python
python中lambda()的用法
2017/11/16 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
服装设计专业毕业生推荐信
2013/11/09 职场文书
法学毕业生自我鉴定
2014/01/31 职场文书
物理力学求职信
2014/02/18 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
应聘护士求职信
2014/07/21 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
村创先争优活动总结
2014/08/28 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
MySQL创建定时任务
2022/01/22 MySQL