JavaScript中值类型和引用类型的区别


Posted in Javascript onFebruary 23, 2017

JavaScript的数据类型分为两类:原始类型和对象类型。其中,原始类型包括:数字、字符串和布尔值。此外,JavaScript中还有两个特殊的原始值:null和undefined,它们既不是数字也不是字符串,更不是布尔值。它们通常分别代表了各自特殊类型的唯一成员。JavaScript中除了数字、字符串、布尔值、null和undefined之外的就是对象了。

JavaScript中值类型和引用类型的区别

JavaScript中的值类型的值是不可变的:

任何方法都无法改变值类型的值。数字、布尔值、null和undefined等都属于不可变类型。比如,修改一个数值的内容,本身就说不通。虽然字符串可以被看成是由字符组成的数组,可能会被认为是可变的。但是,在JavaScript中,字符串是不可变的。在实际操作过程中,可以访问字符串任意位置的文本,单JavaScript并未提供修改已知字符串的文本内容的方法。

代码:

var str = 'abcdef';
console.log(str.toUpperCase()); // ABCDEF
console.log(str); // abcdef

可见,原始的str字符串值并未发生改变,仍然是小写的abcdef,第二行代码,只是调用了字符串的toUpperCase()方法后,返回的是一个新的字符串。

JavaScript中的引用类型的值是可变的:

代码:

var student = {name: '张三', age: 26};
console.log(student.name); // 张三
student.name = '李四';
console.log(student.name); // 李四

疑问:如果像studen.name = '李四'这段代码一样,给str也做相同的操作,str的值不也是改变了吗?

扩展:如果给str重新赋值,那么改变的是变量的值,给str重新赋值了,并没有改变字符串内容,改变的只是变量str的内容

JavaScript中的值类型无法添加属性和方法:

代码:

var student = '张三';
student.age = 26;
student.run = function () {
 console.log('跑步中...');
}
console.log(student.age); // undefined
console.log(student.run); // undefined

通过代码示例,可知,不能给值类型添加属性和方法。从而,也更加说明了值类型是不可变的。

JavaScript中的引用类型可以添加属性和方法:

代码:

var student = {};
student.age = 26;
student.run = function () {
 console.log('跑步中...');
}
console.log(student.age); // 26
console.log(student.run);
/*
function () {
 console.log('跑步中...');
}
*/

JavaScript中的值类型的变量是存放在栈区的:

JavaScript中的值类型的变量存储结构如下表模拟所示,栈区中包括了变量的标识符以及变量所对应的值。

JavaScript中值类型和引用类型的区别

JavaScript中的引用类型的变量也是存放在栈区的,不同的是,引用类型在栈区中存放的是变量标识符以及变量所对应值得引用地址,而变量所对应的值被存放在堆区中:

JavaScript中值类型和引用类型的区别

所以,可以看出,即使两个对象完全一样,但是在堆区中的存放地址是不一样的,所以在比较时,是不相等的。

JavaScript中的值类型的比较是值的比较:

JavaScript中的值类型在进行比较的时候,只有在它们的值相等的时候,它们才相等。注意:比较的时候注意“==”和“===”,双等号(==)在做比较的时候,做了类型转换,而全等号(===)是值和类型的比较,只有值和类型同时相等时,才能相等。

代码:

var student1 = '{}';
var student2 = '{}';
console.log(student1 === student2); // true

两个相同字符串的比较,是值(‘{}')的比较,完全相等。

JavaScript中的引用类型的比较是引用地址的比较:

代码:

var student1 = {};
var student2 = {};
console.log(student1 === student2); // false

可见,两个空对象并不相等。

疑问:为什么两个一模一样的对象不相等呢?

扩展:因为引用类型是按引用地址访问的,引用类型的比较其实就是比较两个对象在堆内存中的地址是否相同,那么,很明显,student1和student2在堆内存中地址是不同的,所以,即使看到一模一样的两个对象,也不一定相等。

JavaScript中的值的变量赋值,是值得复制:

JavaScript中的值类型的变量赋值过程中,在从一个变量到另一个变量赋值基本类型(值类型)时,会在该变量上创建一个新值,然后再把该值复制到为新变量分配的位置上:

代码:

var str1 = 'abcdef';
var str2 = str1;
str1 = 'abc'; 
console.log(str1); // abc
console.log(str2); // abcdef

从上述代码示例中可以看出,str1中保存的值为 abcdef ,当使用 str1 来初始化 str2 时,str2 中保存的值也为abcdef,但str2中的值和str1中的值是完全独立的,str2的值只是str1中的值的一个副本,接下来,这两个变量可以参加任何操作而相互不影响。其实就是说,基本类型的变量在赋值操作后,两个变量是相互独立的,都不受影响的。

JavaScript中值类型和引用类型的区别

JavaScript中的引用类型的变量赋值过程中,在从一个变量到另一个变量赋值引用类型时,同样也会在该变量上创建一个新“值”,然后再把该“值”复制到为新变量分配的位置上。不同的是,复制的不是真正的“值”,而是真正的值在堆区中的存放地址:

代码:

var student1 = {age: 26};
var student2 = student1;
student2.age = 100;
console.log(student1.age); // 100
console.log(student2.age); // 100
console.log(student2 === student1); // true

引用类型的赋值其实是对象保存在栈区地址指针的赋值,两个变量都保存了同一个对象地址,则这两个变量指向了同一个对象。因此,改变其中任何一个变量,都会相互影响。

JavaScript中值类型和引用类型的区别

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
jQuery中选择器的基础使用教程
May 23 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
vue仿淘宝订单状态的tab切换效果
Jun 23 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
canvas绘制环形进度条
Feb 23 #Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 #Javascript
js实现文字跑马灯效果
Feb 23 #Javascript
微信小程序 出现错误:{"baseresponse":{"errcode":-80002,"errmsg":""}}解决办法
Feb 23 #Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 #Javascript
js模拟微博发布消息
Feb 23 #Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 #Javascript
You might like
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
php动态函数调用方法
2015/05/21 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
js实现登录与注册界面
2017/11/01 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
python 三元运算符使用解析
2019/09/16 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
Django静态文件加载失败解决方案
2020/08/26 Python
大学生四个方面的自我评价
2013/09/19 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
心理咨询承诺书
2014/05/20 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
小学亲子活动总结
2014/07/01 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
导游欢迎词范文
2015/01/23 职场文书
追悼词范文大全
2015/06/23 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js