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

相关文章

来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5286
来自专栏魂祭心

原 canvas绘制clock

4024
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2000
来自专栏芋道源码1024

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

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

5267
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2615
来自专栏张善友的专栏

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

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

2517
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

6608
来自专栏C#

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

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

4798
来自专栏张善友的专栏

.NET 4 System.Threading.Barrier 类

在Visual Studio 2010 and .NET Framework 4 Training Kit中有个System.Threading.Barrier...

2039
来自专栏张善友的专栏

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

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

2667

扫码关注云+社区