1. 普通函數-無形參

函數定義時沒有指定形參, 調用時仍然可以向其傳遞參數, 通過默認參數 arguments 獲取, arguments 是一個偽數組, 用來獲取實參列表

<script>// 定義函數-無形參function func() {// 將 偽數組 arguments 轉為真數組let paramArray = [].slice.call(arguments)if (paramArray.length > 0) {console.dir('有參調用, 參數列表 ' + [].slice.call(arguments).toString())} else {console.log('無參調用')}}func() // 無參調用func('a', 'b') // 有參調用
</script>

2. 普通函數-有形參

• 即使函數定義時指定了形參, 調用時仍然可以不傳實參
• 實參和形參的個數可以不符, 但是形參的順序是不能改變的

<script>// 定義函數-有形參-有返回值function func(param1, param2) {if (!param1 && !param2) {console.log('參數未傳')} else {console.log('參數1: ' + param1 + ' 參數2: ' + param2)}}func() // 無參調用func('a', 'b') // 有參調用func('a') // 形參和實參個數不符
</script>

3. 普通函數-參數默認值

<script>// 定義函數-有形參-有返回值function func(param1, param2 = '默認值') {console.log('參數1: ' + param1 + ' 參數2: ' + param2)}func('a', 'b') // 參數1: a 參數2: bfunc('a') // 參數1: a 參數2: 默認值
</script>

4. 普通函數-返回值

未顯式指定返回值時, 函數默認返回 undefined

<script>// 顯式指定返回值function result() {return '返回值'}console.log(result()) // 返回值// 函數默認返回值function noResult() {}console.log(noResult()) // undefined
</script>

5. 立即執行函數

• 程序一運行就會被執行, 不需要調用
• 如果立即執行函數前有其他代碼，那么它的前一行代碼, 不能省略 ; 號

<script>// 語法 1：( 函數定義 )()let fn;(fn = function run() {console.log('這是立即執行函數')})()// fn() 可反復調用console.log('如果立即執行函數前有其他代碼，那么它的前一行代碼, 不能省略 ; 號');// 語法 2：( 函數定義() )(function run() {console.log('這是立即執行函數')}())
</script>

6. 匿名函數

常用場景: 函數表達式、回調函數、立即執行函數等。

<script>// 場景 1：函數表達式const caller = function () {console.log('匿名函數')}caller()// 場景 2：回調函數function run(callback) {callback();}run(function () {console.log('匿名函數')});// 場景 3：立即執行函數(function () {console.log('匿名函數')})()
</script>

7. 箭頭函數

• 箭頭函數是匿名函數的語法糖
• 不是所有匿名函數場景都適合用箭頭函數替換, 比如箭頭函數就沒有其他函數的默認參數 arguments
• this 的指向由箭頭函數聲明的地方決定

匿名函數和箭頭函數語法對比

<script>// 1. 無參的對比const fn1 = function () {}const fn1 = () => {}// 2. 單參的對比const fn2 = function (a) {}const fn2 = a => {} // 單個參數時, 箭頭函數的參數列表可以省略小括號 ()// 3. 多參的對比const fn3 = function (a, b) { }const fn3 = (a, b) => {}// 4. 函數體只有一行代碼的對比const fn4 = function () {return '返回值'}const fn4 = () => '返回值' // 函數體只有一行代碼時, 箭頭函數的函數體可以省略大括號 {}// 函數體只有一行代碼并且返回的是對象時, 要在函數體外加上 ({})const fn4 = () => ({ name: '3s', age: 27 })// 5. 函數體多行代碼對比const fn5 = function () {let str = '返回值'return str}const fn5 = () => {let str = '返回值'return str}
</script>

8. 函數提升

• JS 引擎在預解析時, 會把函數聲明部分提升至函數調用之前。所以 JS 編寫時就算函數先調用后定義, 也可以正常運行
• 函數表達式不會進行函數提升

<script>// 先調用func();// 后定義function func() {console.log('函數聲明會被提升到函數調用之前')}/*JS 引擎預編譯后, 會變成類似這段代碼function func(){console.log('函數聲明會被提升到函數調用之前')} func();*/
</script>