JS中原始值和引用值的储存方式示例详解


Posted in Javascript onMarch 23, 2018

在ECMAscript中,变量可以存放两种类型的值,即原始值和引用值

  • 原始值指的是代表原始数据类型的值,也叫基本数据类型,包括:Number、Stirng、Boolean、Null、Underfined
  • 引用值指的是复合数据类型的值,包括:Object、Function、Array、Date、RegExp

根据数据类型不同,有的变量储存在栈中,有的储存在堆中。具体区别如下:

原始变量及他们的值储存在栈中,当把一个原始变量传递给另一个原始变量时,是把一个栈房间的东西复制到另一个栈房间,且这两个原始变量互不影响。

引用值是把  引用变量的名称储存在栈中,但是把其实际对象储存在堆中,且存在一个指针由变量名指向储存在堆中的实际对象,当把引用对象传递给另一个变量时,复制的其实是指向实际对象的指针, 此时 两者指向的 是同一个数据,若通过方法改变其中一个变量的值,则访问另一个变量时,其值也会随之加以改变;但若不是通过方法 而是通过 重新赋值  此时 相当于 重新开了一个房间  该值的原指针改变  ,则另外一个 值 不会随他的改变而改变。

看示例:

var a="hello";
var b=a;
a="world";
alert(a);//world
alert(b);//hello
var arr=[1,3];
arr1=arr;
arr.push(5);
alert(arr)//1,3,5
alert(arr1);//1,3,5
arr=[7,8];
alert(arr);//7,8
alert(arr1);//1,3,5

用图来表示 结果如下:

原始变量的值互不影响,引用变量arr和arr1指向的为同一对象,所以当对arr通过方法改变其值时(堆房间里的数据发生变化),访问arr1的数据时就会访问到改变后的对象

JS中原始值和引用值的储存方式示例详解

通过非方法来改变引用变量的值时,会为该引用变量重新创建一个堆房间,此时指针也会发生变化:

JS中原始值和引用值的储存方式示例详解

总结:

Number、Stirng、Boolean、Null、Underfined这些基本数据类型,他们的值直接保存在栈中;

Object、Function、Array、Date、RegExp这些引用类型,他们的引用变量储存在栈中,通过指针指向储存在堆中的实际对象

以上所述是小编给大家介绍的JS中原始值和引用值的储存方式示例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
vue解决跨域问题(推荐)
Nov 10 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 Javascript
剖析Angular Component的源码示例
Mar 23 #Javascript
vue利用axios来完成数据的交互
Mar 23 #Javascript
JS动画定时器知识总结
Mar 23 #Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 #Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 #Javascript
浅谈Webpack 持久化缓存实践
Mar 22 #Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 #Javascript
You might like
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
php生成图片验证码的方法
2016/04/15 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
prototype Element学习笔记(篇一)
2008/10/26 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
javascript实现拖放效果
2015/12/16 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
书单|人生苦短,你还不用python!
2017/12/29 Python
在python中安装basemap的教程
2018/09/20 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
节约用电标语
2014/06/17 职场文书
驻村工作先进事迹
2014/08/14 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
初中化学教学反思
2016/02/22 职场文书