理解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 相关文章推荐
jQuery类选择器用法实例
Dec 23 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
JavaScript数组复制详解
Feb 02 Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 Javascript
vue实现验证码按钮倒计时功能
Apr 10 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
express框架下使用session的方法
Jul 31 Javascript
javascript实现滚动条效果
Mar 24 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
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
php数组去重复数据示例
2014/02/25 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
判断浏览器的javascript版本的代码
2010/09/03 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
python基于socket实现网络广播的方法
2015/04/29 Python
python中的错误处理
2016/04/10 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
Python之字典添加元素的几种方法
2020/09/30 Python
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
办公室副主任职责范本
2014/03/08 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
国庆横幅标语
2014/10/08 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL