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下数值型比较难点说明
Jun 07 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
jquery一句话全选/取消全选
Mar 01 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
vue实现购物车选择功能
Jan 10 Javascript
Vue中key的作用示例代码详解
Jun 10 Javascript
微前端qiankun改造日渐庞大的项目教程
Jun 21 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
帝国cms常用标签汇总
2015/07/06 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
Javascript中的this绑定介绍
2011/09/22 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
JS上传图片预览插件制作(兼容到IE6)
2016/08/07 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
美容院合作经营协议书
2014/10/10 职场文书
2014年文员工作总结
2014/11/18 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
学术会议通知范文
2015/04/15 职场文书
2015年征兵工作总结
2015/07/23 职场文书