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://www.php.cn/

 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的執行上下文對這種現象進行解釋，如圖。

在js運行過程中，編輯器動態產生執行上下文（execution context），example 2中，首先產生global的執行上下文和changeStuff的執行上下文。

執行到changeStuff(num, obj1, obj2)的時候， a, b, c指向參數num, obj1, obj2，a和num指向10， b跟obj1指向同一個值，c跟obj2指向同一個值。

執行step 1的時候，對a重新賦值，為a賦值前的10倍，從此a與num毫無關係。

執行step 2的時候，對b所指向的值的item屬性進行重新賦值，這個賦值只改變了item的值， 而obj1和b仍然指向同一個值。

執行step 3的時候，對c重新賦值，從此c與obj2再無瓜葛，因此即使c有一個叫item的屬性，與obj2的item屬性有著各自的值，並沒有影響obj2. item。

也就是說，js函數參數傳遞過程中，若函數內部對參數重新賦值，這個賦值過程不會影響原始變數的值。

這也很好地解釋了基本類型的參數變數（結論1）不會受影響的現象，基本類型的參數變數每次改變都是一次全新賦值，對原始變數不會造成影響。

總結

在js函數傳遞中，當基本類型（number, string, boolean, null, undefined, symbol）變數作為參數傳遞時，函數內部對參數的任何操作都不會改變變數的值。

當object類型變數作為參數傳遞時，函數內部對參數的操作會影響變數的值，

除非函數內部對參數重新賦值（任何類型的值）。

Thank you!

Feel free to contact me if you have any question!

#以上就是JavaScript參數傳遞中值和引用的一種理解的程式碼實例的內容，更多相關內容請關注PHP中文網（www.php.cn）！

#