专栏首页HTML5学堂原生JS | 值类型与引用类型变量

原生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),作者:HTML5学堂(码匠)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML5的学习方法

    HTML5学堂:学习HTML5,除了我们要抛下足够的汗水之外,还需要有合适的方法。合理的方法能够事半功倍,而不合理的方法则事倍功半。在此,我们几个讲师结合我们的...

    HTML5学堂
  • 面向对象系列讲解——混合模式

    HTML5学堂:我们解释了面向对象以及使用面向对象的原因,并书写了最为基本的面向对象的代码。同时我们提出了一些问题,工厂模式存在着一些缺陷,在这篇文章当中我们就...

    HTML5学堂
  • 2015.12.01 HTML5真题练习

    HTML5学堂:每天一道题,强壮程序员!今日主要涉及昨日题目的解答,以及一道涉及数组、字符串、操作符的题目 HTML5真题【2015.11.30】答案解析 昨日...

    HTML5学堂
  • R in action读书笔记(11)-第八章:回归-- 选择“最佳”的回归模型

    用基础安装中的anova()函数可以比较两个嵌套模型的拟合优度。所谓嵌套模型,即它的一

    统计学家
  • Scratch编程与高中数学算法初步

          一提到编程,大家可能觉得晦涩难懂,没有一定的英语和数学思维基础的人,一大串的编程代码让人望而步,何况是中小学生。

    用户4917063
  • 投诉、报警、围堵...一系列操作都无用!这家创业公司的老板还是消失跑路了

    今日头条丨一点资讯丨腾讯丨搜狐丨网易丨凤凰丨阿里UC大鱼丨新浪微博丨新浪看点丨百度百家丨博客中国丨趣头条丨腾讯云·云+社区

    数据猿
  • 用Flink取代Spark Streaming!知乎实时数仓架构演进

    场景描述:数据工程团队是知乎技术中台的核心团队之一,该团队主要由数据平台、基础平台、数据仓库、AB Testing 四个子团队的 31 位优秀工程师组成。这篇文...

    王知无
  • 如何安装Windows系统(一)

    提供完善的系统批量部署解决方案、易用的离线万能驱动和适合装机技术员的U盘PE系统。)

    简单并不简单
  • 知乎实时数仓实践及架构演进

    转自知乎技术专栏:https://zhuanlan.zhihu.com/p/56807637

    Spark学习技巧
  • 单向循环链表解决约瑟夫问题

    shengjk1

扫码关注云+社区

领取腾讯云代金券