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 相关文章推荐
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
JavaScript 模拟用户单击事件
Dec 31 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
JavaScript中的Proxy对象
Nov 27 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面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
在Django的URLconf中使用命名组的方法
2015/07/18 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
如何基于python生成list的所有的子集
2019/11/11 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
python中spy++的使用超详细教程
2021/01/29 Python
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
机械系大学毕业生推荐信
2013/11/27 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android