原生JS | 值类型与引用类型变量

HTML5学堂-码匠:在JavaScript中,存在着两种不同的变量类型,一种是值类型变量,一种是引用类型变量。其中数组、对象、函数都属于引用类型变量,数值、布尔值、null、undefined、字符串属于值类型变量,不同类型变量在参数传递方面有不同的运行机制。

结果不同的两个实例

实例1

var user = 'HTML5学堂';
var newUser = user;
newUser = '码匠';
console.log(user);
console.log(newUser);

实例2

var user = {
name: 'HTML5学堂'
};
var newUser = user;
newUser.name = '码匠';
console.log(user.name);
console.log(newUser.name);

两种实例的运行结果

实例1运行后,控制台的打印结果为:

HTML5学堂

码匠

实例2运行后,控制台的打印结果为:

码匠

码匠

两种实例不同结果的“根源”

导致这两种不同结果的根源在于JavaScript中的变量类型分为两大类:值类型和引用类型。不同类型的数据在“赋值”时机制并不相同。

欢迎沟通交流~~~HTML5学堂(码匠)

值类型变量

值类型包括:数值、布尔值、null、undefined、字符串。

对于值类型变量,变量的交换(将一个变量赋值给另一个变量)相当于是创建了一个新的空间,把原有的变量值复制一份,并将其存储在新空间当中,新空间与之前空间互不影响。

引用类型变量

引用类型包括:对象、数组、函数。

引用类型变量的交换,并不会创建一个新的空间,而是让新变量和之前的变量,同时指向一个原有空间(即同一个地址)。可以理解为C语言的指针。

以生活的实例来说,就如同原来一个人有家门的钥匙,之后这个人结婚了,配了一把钥匙给自己的妻子,这时候,两个人共同有家的钥匙,但是家还是一个家。

类似的代码案例

如果觉得已经弄明白了变量的两种不同类型,可以查看如下案例,测试一下自己是否已经掌握该知识了,如下的案例当中还会涉及到函数与参数的相关知识。

代码实例 - A

function changeName(username){
    username = '码匠';
}
var username = 'HTML5学堂';
changeName(username);
console.log(username);

代码实例 - B

function changeName(username){
    username[0] = '码匠';
}
var username = ['HTML5学堂'];
changeName(username);
console.log(username);

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2017-05-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python爬虫实战

Google Python风格规范(上)

好的代码风格,给人舒服的感觉,今天介绍一下谷歌的Python风格规范,由于规范比较多,将分为两次介绍。

582
来自专栏生信宝典

Python学习教程(三)

函数操作 函数是重用的程序段。它们允许你给一块语句一个名称,然后你可以在你的程序的任何地方使用这个名称任意多次地运行这个语句块。这被称为 调用 函数。我们已经使...

1739
来自专栏大数据学习笔记

Hadoop基础教程-第11章 Hive:SQL on Hadoop(11.4 数据类型和存储格式)(草稿)

第11章 Hive:SQL on Hadoop 11.4 数据类型和存储格式 11.4.1 数据类型 (1)基本类型 Hive 支持关系型数据中大多数基本数...

1729
来自专栏lgp20151222

JQuery跳出each循环的方法(包含数组遍历)

break----用return false;  continue --用return ture;

743
来自专栏Golang语言社区

Go语言学习之cgo(golang与C语言相互调用)

几乎所有的编程语言都有C语言的影子,当然golang也不例外。可以看到golang的创始者们与c language有着密切的联系。所有,golang和c语言的相...

3937
来自专栏深度学习之tensorflow实战篇

python pandas.read_csv参数整理,读取txt,csv文件

pandas.read_csv参数整理 读取CSV(逗号分割)文件到DataFrame 也支持文件的部分导入和选择迭代 更多帮助参见:http://pandas...

7086
来自专栏LuckQI

redis初识~String命令介绍

1033
来自专栏郑科的专栏

PHP7 新特性简介(一)

PHP7是PHP编程语言全新的一个版本,在性能方面获得了极大的提升。官方的文档显示,PHP7可以达到PHP5.x版本两倍的性能。同时还提供了很多其他语言流行的语...

4240
来自专栏HTML5学堂

“鼠标移入显示悬浮框”特效,也可以“高大上”

HTML5学堂(码匠):网站中最为常见的一种特效——鼠标移入元素,出现介绍信息的悬浮框,要么是淡入,要么是单方向的滑入,总觉得太单一了有木有?其实,稍微调整一下...

3449
来自专栏Jackson0714

PHP内核之旅-3.变量

1034

扫描关注云+社区