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 相关文章推荐
面向对象的javascript(笔记)
Oct 06 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
jQuery实现影院选座订座效果
Apr 13 jQuery
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
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
10个简化PHP开发的工具
2014/12/25 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
简单说明Python中的装饰器的用法
2015/04/24 Python
Python Matplotlib库入门指南
2015/05/18 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
TensorFlow实现Logistic回归
2018/09/07 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
pandas数据拼接的实现示例
2020/04/16 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
英文感谢信范文
2015/01/21 职场文书
工作检讨书大全
2015/01/26 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js