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中，引用传递的本质就是值传递。