JavaScript參數(shù)傳遞中值和引用的一種理解的詳細(xì)介紹

我將剖析一個(gè)例子的實(shí)際運(yùn)行過(guò)程，跟大家分享我對(duì)js參數(shù)傳遞中的值和引用的理解。

參考官網(wǎng)數(shù)據(jù)類型的兩種分類，本文將這兩種分類簡(jiǎn)稱為基本類型（boolean, null, undefined, string, number, symbol）和object類型。

首先，用一個(gè)example 演示參數(shù)傳遞的應(yīng)用：

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 的結(jié)果似乎可以總結(jié)出以下兩條結(jié)論：

1. 傳遞的數(shù)據(jù)類型為基本類型（number, string boolean, null, undefined, symbol），在參數(shù)傳遞過(guò)程中，函數(shù)內(nèi)部對(duì)傳遞值的操作并不影響原始值。

2. 傳遞的數(shù)據(jù)類型為object， 在參數(shù)傳遞過(guò)程中，函數(shù)內(nèi)部對(duì)傳遞值的操作會(huì)導(dǎo)致原始值的改變。

然而， 有沒有其他特殊情況呢？

有一種在stackoverflow討論很火熱的用法，跟結(jié)論二背道而行。example 2。

 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并沒有被函數(shù)changeStuff改變。changeStuff內(nèi)部同樣改變了b、c的值，為什么obj1被改變了(L15)而obj2沒有被改變呢？

我用js的執(zhí)行上下文對(duì)這種現(xiàn)象進(jìn)行解釋，如圖。

在js運(yùn)行過(guò)程中，編輯器動(dòng)態(tài)生成執(zhí)行上下文（execution context），example 2中，首先生成global的執(zhí)行上下文和changeStuff的執(zhí)行上下文。

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

執(zhí)行step 1的時(shí)候，對(duì)a重新賦值，為a賦值前的10倍，從此a與num毫無(wú)關(guān)系。

執(zhí)行step 2的時(shí)候，對(duì)b所指向的值的item屬性進(jìn)行重新賦值，這個(gè)賦值只改變了item的值， 而obj1和b仍然指向同一個(gè)值。

執(zhí)行step 3的時(shí)候，對(duì)c重新賦值，從此c與obj2再無(wú)瓜葛，因此即使c有一個(gè)叫item的屬性，與obj2的item屬性有著各自的值，并沒有影響obj2.item。

也就是說(shuō)，js函數(shù)參數(shù)傳遞過(guò)程中，若函數(shù)內(nèi)部對(duì)參數(shù)重新賦值，這個(gè)賦值過(guò)程不會(huì)影響原始變量的值。

這也很好地解釋了基本類型的參數(shù)變量（結(jié)論1）不會(huì)受影響的現(xiàn)象，基本類型的參數(shù)變量每一次改變都是一次全新賦值，對(duì)原始變量不會(huì)造成影響。

總結(jié)

在js函數(shù)傳遞中，當(dāng)基本類型（number, string, boolean, null, undefined, symbol）變量作為參數(shù)傳遞時(shí)，函數(shù)內(nèi)部對(duì)參數(shù)的任何操作都不會(huì)改變變量的值。

當(dāng)object類型變量作為參數(shù)傳遞時(shí)，函數(shù)內(nèi)部對(duì)參數(shù)的操作會(huì)影響變量的值，除非函數(shù)內(nèi)部對(duì)參數(shù)重新賦值（任何類型的值）。

Thank you!

Feel free to contact me if you have any question!

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com