JavaScript-引用类型变量的那个坑

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

demo1

1. function changeName(username){
2.     username = '刘国利';
3. }
4. var username = '独行冰海';
5. changeName(username);
6. console.log(username);

demo2

1. function changeName(username){
2.     username[0] = '刘国利';
3. }
4. var username = ['独行冰海', '梦幻雪冰', '尹小芃槑', '路过心上', '扶、公子'];
5. changeName(username);
6. console.log(username);

两段代码输出结果分别是什么呢？第一段代码输出的是“独行冰海”的字符串，第二段代码输出的是["刘国利", "梦幻雪冰", "尹小芃槑", "路过心上", "扶、公子"] 这个数组。

JavaScript中的两种变量类型：值类型和引用类型。对于有过C语言等编程语言经验的人对这两种类型不陌生，很容易联想到“引用地址”或“指针”的相关概念。下面详细讲解一下两种不同类型的知识。相信在讲解了这两个知识之后，上面的问题也就迎刃而解了。

值类型变量

值类型：数值、布尔值、null、undefined、字符串。

变量的交换等于在一个新的作用域创建一个新的空间，新空间与之前的空间互不相关和影响。

欢迎沟通交流~HTML5学堂

引用类型变量

引用类型：对象、数组、函数。

变量的交换，并不会创建一个新的空间，而是让对象或方法和之前的对象或方法，同时指向一个原有空间（即一个地址）。就如同原来一个人有家门的钥匙，之后这个人结婚了，就配了一把钥匙给自己的妻子，这时候，两个人共同有家的钥匙，但是家还是一个家。

代码分析

弄明白了这两种不同的类型，我们就可以回看我们的代码了。先说第一段代码，外部全局中存在一个变量，username，在函数中形参名也为username，此时，当在局部作用域当中没有var声明变量空间的时候，遇到username这个变量名，首先查看是不是形参，如果是形参，那么直接认为changeName中的username就是形参。形参是属于changeName函数中的，加上传入的参数是值类型变量（字符串），就又创建了一个存储空间，这个存储空间是不会影响到外部全局变量创建的存储空间的。

第二段代码，虽然也是基本的形参，但是此处传入的是引用类型变量（数组），那么此时并没有创建一个新的空间，函数的形参以及全局的变量均指向同一个空间，当对两者任意的内容进行修改时，均是在修改一个空间。

欢迎沟通交流~HTML5学堂