2019-06-12

一直对Javscript中的值传递引用传递的感到模糊,今天来细细研究一下

概念

  • 值传递:调用函数时将实际参数复制一份传递到函数中,在函数中如果对参数进行修改,将不会影响到实际参数

  • 引用传递:调用函数时将实际参数地址传递到函数中,在函数中对参数所进行的修改,将影响到实际参数

  • 理解:值传递是针对基本类型的,引用传递是针对引用类型的。传参可以理解为复制变量的值,把这个副本传递给形参
    1.基本类型复制后,形参和实参完全是独立的,不管改变哪一个,都不会对另一个产生影响
    2.引用传递本质上还是传值,首先在栈中开辟形参引用,然后把实参引用的值传递给形参引用

值传递

ction add(num) {
    num++;
    console.log("形参:", num);// 形参:21
}

var a = 20;
add(a);
console.log("实参:", a);// 实参:20

引用传递

function setNum(obj) {
    obj.num = 10;
    console.log("形参:", obj);// 形参:num = 10
}

var a = new Object();
setNum(a);
console.log("实参:", a);// 实参:num = 10

解析
当 var a = new Object();下图时变量和对象的关系;

image.png

调用setNum(a)时,下图时全局变量a和局部变量obj以及对象Object的关系:
image.png

  • 这段代码创建了一个Object对象,变量(引用)a指向这个Object对象。
  • 调用setNum(a),在这个函数内部,obj和a都引用的是同一个Object对象,即a和Obj都指向同一个内存堆地址。因此,通过传递实参引用a,对形参引用obj添加num属性后,也影响到了实参引用a。
  • 所以,很多人就会被这种假象所蒙蔽,错误的认为:在局部作用域修改对象,会在全局对象中反映出来,就说明参数是引用传递
function setNum(obj) {
    obj.num = 10;
    obj = new Object();
    obj.num = 20;
    console.log("形参:", obj);// 20
}

var a = new Object();
setNum(a);
console.log("实参:", a); // 10

解析
在函数内部创建obj对象 obj = new Object(); 下图是a和obj以及Object的关系:

image.png

这段代码在前一个的基础上,给setNum()函数中添加了两行代码:obj = new Object()改变了obj的指向;obj.num = 20给新创建的obj添加属性。根据结果来看,形参的改变并没有影响到实参,所以,在JS中,引用传递的本质就是值传递。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 10,165评论 0 5
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,143评论 0 3
  • Lua 5.1 参考手册 by Roberto Ierusalimschy, Luiz Henrique de F...
    苏黎九歌阅读 14,750评论 0 38
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,868评论 1 32
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 9,853评论 0 0

友情链接更多精彩内容