转载

Javascript参数传递中值和引用的一种理解

值（value）和引用(reference)是各种编程语言老生常谈的话题，js也不例外。

我将剖析一个例子的实际运行过程，跟大家分享我对js参数传递中的值和引用的理解。

参考官网数据类型的两种分类，本文将这两种分类简称为基本类型（boolean, null, undefined, string, number, symbol）和object类型。

首先，用一个example 演示参数传递的应用：

var obj = {};
obj.inner = 10;

var num = 10;
var str = 'Hello';
var boo = true;
var oth = null;
var und = undefined;
var sym = Symbol('foo');

function passingobject(myobj){
    myobj.inner  = 1 + myobj.inner ; 
}

function passingvalue(myvalue){
  switch(typeof myvalue){
    case 'number':
        myvalue = myvalue + 1;
        break;
      case 'string':
        myvalue = 'I am a new string now!';
        break;
      case 'boolean':
        myvalue= false;
        break;
      default:
        myvalue = 'Null, Undefined, or Symbol';
     }
  }

  console.log("before num = " + num);  // before num = 10
  passingvalue(num);
  console.log("after num = " + num);  // after num = 10
  console.log("before str = " + str); // before str = Hello
  passingvalue(str);
  console.log("after str = " + str);  // after str = Hello
  console.log("before boo = " + boo); // before boo = true
  passingvalue(boo);
  console.log("after boo = " + boo);  // after boo = false
  console.log("before oth = " + oth); // before oth = null
  passingvalue(oth);
  console.log("after oth = " + oth);  // after oth = null
  console.log("before und = " + und); // before und = undefined
  passingvalue(und);
  console.log("after und = " + und);  // after und = undefined
  console.log(sym); // Symbol(foo)
  passingvalue(sym);
  console.log(sym); // Symbol(foo)
  console.log("before obj.inner = " + obj.inner); // before obj.inner = 10
  passingobject(obj); // after obj.inner = 11
  console.log("after obj.inner = " + obj.inner);

从example 1 的结果似乎可以总结出以下两条结论：

1. 传递的数据类型为基本类型（number, string boolean, null, undefined, symbol），在参数传递过程中，函数内部对传递值的操作并不影响原始值。

2. 传递的数据类型为object，在参数传递过程中，函数内部对传递值的操作会导致原始值的改变。

然而，有没有其他特殊情况呢？

有一种在stackoverflow讨论很火热的用法，跟结论二背道而行。example 2。

例子引自：http://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language

 1 function changeStuff(a, b, c)
 2 {
 3   a = a * 10;
 4   b.item = "changed";
 5   c = {item: "changed"};
 6 }
 7 
 8 var num = 10;
 9 var obj1 = {item: "unchanged"};
10 var obj2 = {item: "unchanged"};
11 
12 console.log(obj1.item); // unchanged
13 console.log(obj2.item); // unchanged
14 changeStuff(num, obj1, obj2);
15 console.log(obj1.item); // changed
16 console.log(obj2.item); // unchanged

example 2中， obj2.item并没有被函数changeStuff改变。changeStuff内部同样改变了b、c的值，为什么obj1被改变了(L15)而obj2没有被改变呢？

我用js的执行上下文对这种现象进行解释，如图。

Javascript参数传递中值和引用的一种理解