我將剖析一個例子的實際運行過程,跟大家分享我對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。
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!
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com