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>