JavaScript引用类型和基本类型详解


Posted in Javascript onJanuary 06, 2016

在javascript中存在着两种类型的数据:基本类型和引用类型。

基本类型简单的说就是简单的数据段。

引用类型是由多个值构成的对象。

当我们进行赋值操作时,解析器会首先分析数据是值类型还是引用类型。

两种访问方式:

基本类型值:按值访问,操作的是他们实际保存的值;

引用类型值:按引用访问,当查询时,我们需要先从栈中读取内存地址,然后再顺藤摸瓜地找到保存在堆内存中的值;

JavaScript引用类型和基本类型详解

下面就分别介绍一下javascript的这两种数据类型。

一.基本数据类型:

在javascript中存在着六种基本类型数据:string、number、boolean、symbol(ES6新增)、null、undefined。
这五种基本数据类型可以直接操作保存在变量中的实际值。

代码实例如下:

var a=10;
var b=a;
b=20;
console.log(a);

上面的代码是一个简单的赋值操作,下面做一下简单介绍。

(1).首先数字是基本数据类型。
(2).var b=a,此赋值操作实际上是将a的数据拷贝一份,然后赋值给变量b。
(3).a和b是完全独立的。
(4).b=20,修改变量b的值不会影响变量a的值。

图示如下:

栈内存

JavaScript引用类型和基本类型详解

二.引用类型数据:

在javascript中,引用类型数据存储在堆内存中,但是不可以直接访问堆内存空间中的位置和操作堆内存空间。
只能通过操作对象的在栈内存中的引用地址。所以引用类型的数据,在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存在堆内存中的对象。

代码实例:

var obj1=new Object();
var obj2=obj1;
obj2.name="三水点靠木";
console.log(obj1.name);

下面对代码上面的代码做一下分下。

(1).var obj1=new Object(),这是创建一个对象,是一个引用类型数据,变量obj1存储的是对象在堆内存中的地址。
(2).var obj2=obj1,这个赋值操作其实是将对象在堆内存中的存储地址复制给变量obj2,也就是两个变量存储的都是指向实际对象的内存地址,指向的是同一个对象。
(3).obj2.name="三水点靠木",为对象添加一个属性。
(4).console.log(obj1.name),输出"三水点靠木,因为两个变量指向同一个对象。

图示如下:

JavaScript引用类型和基本类型详解

String一个特殊的基本数据类型

在很多语言中,String是以对象的形式表示的,但在ECMAScript里没有沿用这种传统,String是当作一种基本数据类型,但它是一个比较特殊的基本类型。

看上去好像String应该做为一个引用类型,可实际上它不是,因为它不是对象。那么看起来它应该是基本数据类型,应该是通值传递的方式来操作。

看下面例子:

var stra = "这是一个字符串";
var strb = stra;
stra = "这是另外一个字符串";
console.log(strb); // 这是一个字符串

上面例子我们看到,仿佛stra通过值传递的方式复制了一份给了strb。当stra改变的时候,strb并没有改变,似乎我们已经可以下结论,String就是个基本数据类型。

可是,因为String是可以任意长度的,通过值传递,一个一个的复制字节显示效率依然很低,看起来String也可以当作引用类型。

看下面例子:

var a = "myobject";
a.name = "myname";
console.log(a.name); // undefined

显示String无法当作一个对象来处理。实际上,javascript里的String是不可以改变的,javascript也没有提供任何一个改变字符串的方法和语法。

var a = "myobject";
a = a.substring(3,5)
console.log(a); // bj

记住这样做,就没有改变String字符串"myobject",只a引用了另一个字符串"bj","myobject"被回收了。

所以可以这样讲,String实际上并不符合上面两种数据类型分类。它是具有两方面属性介于两都之间的一种特殊类型。

Javascript 相关文章推荐
javascript中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
实例浅析js的this
Dec 11 Javascript
js实现消息滚动效果
Jan 18 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
js模仿java的Map集合详解
Jan 06 #Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 #Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 #Javascript
js实现仿qq消息的弹出窗效果
Jan 06 #Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 #Javascript
详解jQuery Mobile自定义标签
Jan 06 #Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 #Javascript
You might like
php 分页原理详解
2009/08/21 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
jQuery  ready方法实现原理详解
2016/10/19 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
简单学习Python time模块
2016/04/29 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
网吧收银员岗位职责
2013/12/14 职场文书
五水共治一句话承诺
2014/05/30 职场文书
幼儿学前班评语
2014/12/29 职场文书
好员工观后感
2015/06/17 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
Java版 单机五子棋
2022/05/04 Java/Android