什么是函數(shù)聲明

以 function 關(guān)鍵字開頭，必須指定函數(shù)名（如 function greet() {}），且不能作為其他語(yǔ)句的一部分。‌‌

函數(shù)聲明會(huì)被提升

在JS中,函數(shù)聲明會(huì)被提升，這意味著函數(shù)可以在聲明之前被調(diào)用。
當(dāng)你使用函數(shù)聲明的方式定義函數(shù): function resizeFn() {...}
整個(gè)函數(shù)聲明會(huì)被提升到作用域的頂部。
這意味著在整個(gè)作用域內(nèi)，無論函數(shù)在何處聲明，都可以在聲明前調(diào)用。

函數(shù)聲明會(huì)被提升的代碼解釋

// 因?yàn)槭呛瘮?shù)聲明，所以可以在函數(shù)聲明之前調(diào)用。可以正常調(diào)用
resizeFn(); 
// 因?yàn)檫@是一個(gè)函數(shù)聲明。
function resizeFn() {
  // 函數(shù)體
}

函數(shù)表達(dá)式

‌函數(shù)表達(dá)式‌：將函數(shù)賦值給變量，函數(shù)可匿名或具名
如 const sayHello = function() {}
或 const sayHello = function named() {}
函數(shù)表達(dá)式適用于賦值、參數(shù)傳遞等場(chǎng)景。‌‌
函數(shù)表達(dá)式‌：僅變量名被提升，函數(shù)體不會(huì)提升。
函數(shù)表達(dá)式：必須先定義后使用(也就是說在使用[調(diào)用]前，必須先定義)

函數(shù)表達(dá)式:必須先定義后使用

sayHello()
const sayHello = function() {} 

報(bào)錯(cuò)：Uncaught ReferenceError: Cannot access 'sayHello' before initialization

總結(jié)：看了上面的函數(shù)聲明和函數(shù)表達(dá)式，也許你對(duì)函數(shù)聲明和函數(shù)表達(dá)式有一定的理解了。
我們來看下面這個(gè)，函數(shù)表達(dá)式一定必須是：先定義后使用嘛？

函數(shù)表達(dá)式一定是先定義后使用嘛？

mounted () {
  this.myChart = echarts.init(this.$refs.chartContainer)
  const chartContainerElement = this.$refs.chartContainer
  const resizeObserver = new ResizeObserver(() => {
    // 先使用了
    resizeFn()
  })
  // 后定義了
  const resizeFn = this._.debounce(() => {
    this.myChart && this.myChart.resize()
  }, 500)
  chartContainerElement && resizeObserver.observe(chartContainerElement)
  this.$once('hook:beforeDestroy', () => {
    resizeObserver.disconnect()
  })
}

我們的函數(shù)表達(dá)式 const resizeFn。
目前是：先使用后定義，那么在運(yùn)行的時(shí)候會(huì)報(bào)錯(cuò)嗎？
答案是：不會(huì)的。
因?yàn)椋哼@里有一個(gè)重要的執(zhí)行時(shí)機(jī)差。實(shí)際上在調(diào)用前，已經(jīng)被定義了。
我們被代碼的先后順序給誤導(dǎo)了。
并不是說：定義函數(shù)表達(dá)式的代碼必須要寫在函數(shù)調(diào)用之前。

1. 異步執(zhí)行時(shí)機(jī)

const resizeObserver = new ResizeObserver(() => {
  resizeFn()  // 這里不會(huì)立即執(zhí)行！
})

關(guān)鍵點(diǎn)：ResizeObserver 的回調(diào)函數(shù)不是立即執(zhí)行的，而是在元素尺寸變化時(shí)異步觸發(fā)的。

2. 代碼執(zhí)行順序

// 步驟1：定義 ResizeObserver的 回調(diào)（此時(shí)只是定義，不執(zhí)行）
const resizeObserver = new ResizeObserver(() => {
  resizeFn()  // 此時(shí) resizeFn 還未定義，但不會(huì)報(bào)錯(cuò)，因?yàn)楹瘮?shù)沒有立即調(diào)用
})
// 步驟2：定義  resizeFn （ 在執(zhí)行任何 resize 事件前已經(jīng)定義完成）
const resizeFn = this._.debounce(() => {
  this.echart_alarm && this.echart_alarm.resize()
}, 500)
// 步驟3：開始觀察（此時(shí) resizeFn 已經(jīng)存在）
chartContainerElement && resizeObserver.observe(chartContainerElement)

時(shí)間線說明

時(shí)間點(diǎn):
t0: 定義 ResizeObserver 回調(diào)函數(shù)
t1: 定義 resizeFn 函數(shù)表達(dá)式  
t2: 開始觀察元素尺寸變化
t3: 用戶操作導(dǎo)致元素尺寸變化（此時(shí)才真正調(diào)用 resizeFn）

尾聲

到此這篇關(guān)于JavaScript函數(shù)聲明和函數(shù)表達(dá)式的理解的文章就介紹到這了,更多相關(guān)js函數(shù)聲明和函數(shù)表達(dá)式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論