理解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 相关文章推荐
Javascript Tab 导航插件 (23个)
Jun 11 Javascript
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
前端微信支付js代码
Jul 25 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
Vue.js -- 过滤器使用总结
Feb 18 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 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
给多个地址发邮件的类
2006/10/09 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
php探针不显示内存解决方法
2019/09/17 PHP
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
向左滚动文字 js代码效果
2013/08/17 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
让Python代码更快运行的5种方法
2015/06/21 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
python异常处理和日志处理方式
2019/12/24 Python
python和php学习哪个更有发展
2020/06/17 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
巴西在线鞋店:Shoestock
2017/10/28 全球购物
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
《走一步再走一步》教学反思
2014/02/15 职场文书
《雪儿》教学反思
2014/04/17 职场文书
安全演讲稿大全
2014/05/09 职场文书
社区创先争优承诺书
2014/08/30 职场文书
暑假学习心得体会
2014/09/02 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
Django中session进行权限管理的使用
2021/07/09 Python