圖解JavaScript的參數(shù)傳遞

Berwin 發(fā)布于2019-08-21 18:34 / 2414人閱讀

摘要：寫在最前本次嘗試通過流程圖的形式并結(jié)合兩個(gè)例子來重新理解一下中的參數(shù)傳遞。歡迎關(guān)注我的博客，不定期更新中參數(shù)到底如何傳遞借用紅寶書的一句話中所有函數(shù)的參數(shù)都是按值傳遞的這個(gè)值如果是簡(jiǎn)單類型，那么就是其本身。同時(shí)執(zhí)行第一個(gè)結(jié)果即為。

寫在最前

本次嘗試通過流程圖的形式并結(jié)合兩個(gè)例子來重新理解一下JavaScript中的參數(shù)傳遞。

歡迎關(guān)注我的博客，不定期更新中——

參數(shù)到底如何傳遞？

借用紅寶書的一句話：

ECMAScript中所有函數(shù)的參數(shù)都是按值傳遞的

這個(gè)值如果是簡(jiǎn)單類型，那么就是其本身。如果是引用類型也就是對(duì)象傳遞的就是指向這個(gè)對(duì)象的地址。故我們可以認(rèn)為參數(shù)傳遞全部都是值傳遞，那么具體怎么理解呢？看下例子：

第一個(gè)例子

var obj = {
    n: 1
};
function foo(data) {
    data = 2;
    console.log(data); //2
}
foo(obj);
console.log(obj.n) // 1

先不說為什么原因，我們就通過畫圖的方式來走一遍流程，我相信應(yīng)該就能理解其中的參數(shù)傳遞了。切記傳遞引用類型傳遞的是指針！

首先執(zhí)行var obj = {n: 1}; ，可以看作在棧的001地址中存入了一個(gè)指向{n:1}的指針*p

接下來為聲明function foo 此時(shí)會(huì)創(chuàng)建函數(shù)執(zhí)行上下文，產(chǎn)生一個(gè)變量對(duì)象，其中聲明了形參data，由于函數(shù)沒有執(zhí)行，當(dāng)前值為undefined。我們記data地址為022。關(guān)于更多變量對(duì)象的知識(shí)可以參考冴羽老師的這篇JavaScript深入之變量對(duì)象，本文不深入研究關(guān)于AO相關(guān)，你只需要知道在聲明這個(gè)函數(shù)的時(shí)候里面的形參已經(jīng)被創(chuàng)建出來了。

執(zhí)行foo(obj) 其中會(huì)進(jìn)行參數(shù)傳遞，其中將obj中存儲(chǔ)的*p拷貝給處在022地址的data，那么此時(shí)它們就指向了同一個(gè)對(duì)象，如果某一個(gè)變量更改了n的值，另一個(gè)變量中n的值也會(huì)更改，因?yàn)槠渲斜４娴氖侵羔槨?br>

進(jìn)入函數(shù)內(nèi)部，順序執(zhí)行data = 2;此時(shí)002地址存儲(chǔ)了基本類型值，則直接存儲(chǔ)在棧中，從而與堆中的{n:1}失去了聯(lián)系。從而打印console.log(data) // 2 ，最后發(fā)現(xiàn)初始開辟的{n:1}對(duì)象沒有過更改，故而 console.log(obj.n) // 1仍然打印1。

第二個(gè)例子

var obj = {n:1};
(function(obj){
  console.log(obj.n); //1
  obj.n=3;
  var obj = {n:2};
  console.log(obj.n) //2
})(obj);
console.log(obj.n) //3

整體來看這個(gè)例子中出現(xiàn)了同名覆蓋的問題。不太了解代碼如何執(zhí)行的流程，可能會(huì)因?yàn)橥年P(guān)系而有些混亂，不過沒關(guān)系。只要按照上一個(gè)例子的流程圖中的執(zhí)行過程，一定可以得出正確的結(jié)果。

聲明變量obj，地址為011其中存入指向{n:1}的指針*p

聲明函數(shù)，雖然同為obj變量名，但是形參obj為AO中的屬性，不會(huì)與全局造成覆蓋，其擁有新的地址記作022，在未執(zhí)行前其值為undefined。

函數(shù)立即執(zhí)行，此時(shí)將全局obj賦值給形參obj，我們忽略這個(gè)重復(fù)命名的問題，其實(shí)就是將011中的指針*p拷貝了一份給了022。同時(shí)執(zhí)行第一個(gè)console.log(obj.n)結(jié)果即為1。

執(zhí)行obj.n=3，此時(shí)為函數(shù)的形參即022中的obj來改變了對(duì)象內(nèi)n的值。

最關(guān)鍵的一步：var obj = {n:2}; 由于對(duì)象命名的關(guān)系可能很多童鞋就會(huì)有點(diǎn)懵，但依然按照同樣的方式來分析即可，由于使用了var那么就是新聲明一個(gè)對(duì)象，從而會(huì)在棧中壓入新的地址記作033，其中存入了新的指針指向了新的對(duì)象{n:2}。從而之后打印的console.log(obj.n)結(jié)果則應(yīng)是新開辟的對(duì)象中的n的值。

最后打印 console.log(obj.n) //3很顯然，全局的對(duì)象有過一次更改其值為3。

小結(jié)

至此我們走完了上述兩段代碼涉及變量的所有“心路歷程”，由于作者不是科班出身，這個(gè)圖中對(duì)于堆棧以及變量重名的描述可能不是非常的準(zhǔn)確，有差錯(cuò)的地方還望不吝賜教~重點(diǎn)是能理解我希望表達(dá)的意思就好。總的來說關(guān)鍵點(diǎn)就在于傳參的過程中存在一次值的拷貝，同時(shí)如果賦值對(duì)象是引用類型傳入的是指針，明白這兩點(diǎn)之后再加上之前流程圖的分析相信再遇到類似的問題都可以有較為一致的思路了。

最后

慣例po作者的博客，不定時(shí)更新中——
有問題歡迎在issues下交流。