原生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 条评论
登录 后参与评论

相关文章

来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

46110
来自专栏芋道源码1024

熔断器 Hystrix 源码解析 —— 断路器 HystrixCircuitBreaker

本文主要基于 Hystrix 1.5.X 版本 1. 概述 2. HystrixCircuitBreaker 3. HystrixCircuitBreaker....

6367
来自专栏C#

DotNet加密方式解析--非对称加密

    新年新气象,也希望新年可以挣大钱。不管今年年底会不会跟去年一样,满怀抱负却又壮志未酬。(不过没事,我已为各位卜上一卦,卦象显示各位都能挣钱...)...

6728
来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

28610
来自专栏飞扬的花生

jsencrypt参数前端加密c#解密

      写程序时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,如何防止提交的请求不被抓包后串改,虽然无法说绝对安全却给非法提交提高了难度...

4769
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.6K7
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2997
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

3502
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

3277
来自专栏魂祭心

原 canvas绘制clock

5934

扫码关注云+社区