千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構(gòu)

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術(shù)干貨  > 內(nèi)存角度理解回調(diào)函數(shù)

內(nèi)存角度理解回調(diào)函數(shù)

來源:千鋒教育
發(fā)布人:wjy
時間: 2022-06-02 11:31:00 1654140660

關(guān)于回調(diào)函數(shù)對于初學者來說是個比較難以理解的知識點。本文以內(nèi)存(只以堆棧)的角度來理解回調(diào)函數(shù)

變量的內(nèi)存情況

在js中數(shù)據(jù)類型的劃分可以分為基本類型與引用類型。兩種類型在內(nèi)存中的表現(xiàn)形式是不一樣的

內(nèi)存角度理解回調(diào)函數(shù)

1、基本類型

```js
//棧區(qū)創(chuàng)建一個變量 記錄的值為10
var num = 10;
//棧區(qū)創(chuàng)建一個n變量 并且賦值為num變量的值
var n = num;
//將棧區(qū)n變量的值修改為20
n = 20;

console.log(num)
```

1

2、引用類型

```js
//棧區(qū)創(chuàng)建一個arr變量 將具體的元素值保存到堆區(qū)  并且在arr變量中的值記錄為堆區(qū)的地址
var arr = [1,2];
//棧區(qū)創(chuàng)建一個newArray的變量 并且將 arr在棧區(qū)存儲的地址賦值給newArray
var newArray = arr;
//順著newArray記錄的地址值修改數(shù)據(jù)
newArray[0] = 100;
console.log(arr);// [100,2]
```

2

函數(shù)的情況

函數(shù)也是一種引用類型,所以創(chuàng)建一個函數(shù)就與創(chuàng)建數(shù)組在內(nèi)存的情況類似,當創(chuàng)建一個函數(shù)時,會在棧區(qū)創(chuàng)建一個變量,然后將函數(shù)代碼相關(guān)的信息存儲到堆區(qū),最后將堆區(qū)的地址賦值給棧區(qū)的變量保存

```js
function fn(){
    console.log('fn')
}
// 創(chuàng)建函數(shù) 就是創(chuàng)建了一個函數(shù)名稱的同名變量。并且值指向"堆區(qū)”的地址(聲明式與賦值式一致).在堆區(qū)中會保存代碼片段相關(guān)的信息
//上面的代碼等價于 var fn = function(){consoel.log('fn')}
console.log(fn)

// 當函數(shù)調(diào)用時,系統(tǒng)可以通過"變量名稱/函數(shù)名稱" 找到函數(shù)代碼在堆區(qū)的地址。也就是可以改寫形式為“內(nèi)存地址()”,()就是表示要將代碼運行起來
fn()
```

3

自調(diào)用匿名函數(shù)

```js
(function(){
    console.log('123456')
})();
/*

 function(){
     console.log('123456')
 }
 就是一個函數(shù)表達式,本身就可以得到一個內(nèi)存地址   例如該內(nèi)存地址等于0X111 ,內(nèi)存地址中存儲著函數(shù)的代碼信息
 所以上面的代碼可以理解為(0X111)() 這種形式,這種形式與 賦值式的函數(shù)時是一直 所以最后可以調(diào)用函數(shù)
 
*/
```

回調(diào)函數(shù)

回調(diào)函數(shù)就是將函數(shù)作為作為另外一個函數(shù)調(diào)用的參數(shù)進行傳遞。其本質(zhì)也只是傳遞了一個內(nèi)存地址

1、函數(shù)參數(shù)傳遞引用類型

```js
function fn(a){
    //3、當函數(shù)調(diào)用時 會隱藏的進行 var a = arr的操作 所以將arr變量存儲的地址賦值給了a變量  所以a就是一個地址  因為a變量存儲的值對應(yīng)的是函數(shù)所以最終時候可以通過a[下標]訪問元素的
    console.log(a)
}
//1、棧區(qū)創(chuàng)建一個arr變量 賦值為堆區(qū)中保存數(shù)據(jù)的地址
var arr = [1,2,3]
//2、調(diào)用函數(shù)并且傳遞arr變量的值  傳遞的是一個內(nèi)存地址
fn(arr)
```

2、將函數(shù)作為參數(shù)傳遞

```js
//1、創(chuàng)建一個fn變量 并且賦值為堆區(qū)中的地址
function fn(a){
    //4、執(zhí)行函數(shù)時進行形參賦值 var a = callback  所以將callback變量的地址賦值給了a 由于a是一個函數(shù) 所以可以()
    a()
}
//2、創(chuàng)建callback 并且賦值為堆區(qū)中的地址
var callback  = function(){
    console.log('回調(diào)函數(shù)');
}
//3、調(diào)用fn函數(shù) 并且傳遞參數(shù)callback的地址
fn(callback)
```

4

更多關(guān)于“web前端培訓”的問題,歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓經(jīng)驗,課程大綱更科學更專業(yè),有針對零基礎(chǔ)的就業(yè)班,有針對想提升技術(shù)的提升班,高品質(zhì)課程助理你實現(xiàn)夢想。

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強師集結(jié),手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內(nèi)將與您1V1溝通
免費領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學 138****2860 剛剛成功領(lǐng)取
王同學 131****2015 剛剛成功領(lǐng)取
張同學 133****4652 剛剛成功領(lǐng)取
李同學 135****8607 剛剛成功領(lǐng)取
楊同學 132****5667 剛剛成功領(lǐng)取
岳同學 134****6652 剛剛成功領(lǐng)取
梁同學 157****2950 剛剛成功領(lǐng)取
劉同學 189****1015 剛剛成功領(lǐng)取
張同學 155****4678 剛剛成功領(lǐng)取
鄒同學 139****2907 剛剛成功領(lǐng)取
董同學 138****2867 剛剛成功領(lǐng)取
周同學 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT