JavaScript函数

1. 为什么需要函数

函数:

    function，是被设计为执行特定任务的代码块

说明:

    函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。

    比如我们前面使用的 alert()、prompt()和 console.log() 都是一些 js 函数，只不过已经封装好了，我们直接使用的。

2. 函数声明

函数的声明语法

function 函数名() {
    // 函数体
}

例如：

function sayHi() {
    document.write('hai~~')
}

3. 函数名命名规范

    和变量命名基本一致

    尽量小驼峰式命名法

    前缀应该为动词

    命名建议：常用动词约定

function getName() {}
function addSquares() {}

4. 函数的调用语法

// 函数调用，这些函数体内的代码逻辑会被执行
函数名()

注意:声明(定义)的函数必须调用才会真正被执行，使用()调用函数

例如：

// 函数一次声明可以多次调用， 每一次函数调用函数体里面的代码会重新执行一次
sayHi()
sayHi()

我们曾经使用的 alert()，parselnt()这种名字后面跟小括号的本质都是函数的调用

函数体

函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才会被执行。函数的功能代码都要写在函数体当中。

// 打招呼
function sayHi() {
    console.log('嗨~')  // 函数体
}
sayHi()

5. 函数传参

声明语法

function 函数名(参数列表) {
    // 函数体
}

调用语法

函数名(传递的参数列表)

例

getSquare(8)
getSum(10, 20)

调用函数时，需要传入几个数据就写几个，用逗号隔开

形参：声明函数时写在函数名右边小括号里的叫形参(形式上的参数)

实参：调用函数时写在函数名右边小括号里的叫实参(实际上的参数)

形参可以理解为是在这个函数内声明的变量(比如 num1=10)实参可以理解为是给这个变量赋值

开发中尽量保持形参和实参个数一致

我们曾经使用过的 alert('打印')，parselnt(11)，Number(11)本质上都是函数调用的传参

6. 函数默认值

形参: 可以看做变量，但是如果一个变量不给值，默认是什么?

    undefined

但是如果做用户不输入实参，刚才的案例，则出现 undefined + undefined 结果是什么?

    NaN

我们可以改进下，用户不输入实参，可以给 形参默认值，可以默认为 0，这样程序更严谨，可以如下操作:

function getSum(x = 0, y = 0) {
    document.write(x + y)
}
getSum() // 结果是 0，而不是 NaN
getSum(1, 2) // 结果是 3

说明：这个默认值只会在缺少实参参数传递时 才会被执行，所以有参数会优先执行传递过来的实参，否则默认为 undefined

7. 函数返回值

当函数需要返回数据出去时，用 return 关键字

语法

return 数据

例如

return 20

怎么使用呢?

function getSum(x, y) {
    return x + y
}
let num = getSum(10, 30)
document.write(num)

细节

    在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用

    return 后面代码不会再被执行，会立即结束当前函数，所以 return 后面的数据不要换行写

    return 函数可以没有 return，这种情况函数默认返回值为 undefined

8. 函数细节补充

两个相同的函数后面的会覆盖前面的函数

在 javascript 中实参的个数和形参的个数可以不一致

    如果形参过多会自动填上 undefined (了解即可)

    如果实参过多那么多余的实参会被忽略(函数内部有一个arguments，里面装着所有的实参)

函数一旦碰到 return 就不会在往下执行了函数的结束用 return

9. 匿名函数

没有名字的函数，无法直接使用。

使用方式：

1.函数表达式

将匿名函数赋值给一个变量，并且通过变量名称进行调用 我们将这个称为函数表达式

语法:

let fn = function () {
    // 函数体
}

调用:

fn() // 函数名()

其中函数的形参和实参使用跟具名函数一致。

2.立即执行函数

场景介绍：避免全局变量之间的污染

语法:

// 方式1
(function () { console.log(11) })();
// 方式2
(function (){ console.log(11) }());
// 不需要调用，立即执行

注意：多个立即执行函数要用 ; 隔开，要不然会报错。