HTML5学堂-码匠 HTML5学堂

您当前位于:ECMAScript 基础语法 ——> JavaScript | 引用类型变量的赋值问题

JavaScript | 引用类型变量的赋值问题

2015/04/29 22:04:52 | 作者:HTML5学堂(码匠) | 分类:ECMAScript 基础语法 | 关键词:引用类型,值类型,变量

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学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端