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

结果不同的两个实例

实例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);