函数的概念
首先一定要明确, 和数学中的函数完全是两回事 在 JS 中, 函数可以理解为 一段在程序(页面)中 多次出现的代码段 封装起来的盒子 简单来说, JS 的函数就是一个盒子, 盒子里边装的是 在当前页面中 多次出现的 较为复杂的代码段
函数的使用
- 函数的定义(创建一个盒子)
- 函数的调用(使用盒子内的代码) !如果函数只定义 不调用, 那么没有任何意义
- 函数的定义
分为两种方式定义: 声明式定义、赋值式定义函数
<script>
// 1.1 声明式定义
语法:
function fn() {}
// function: 关键字 -> 表明后续的是一段函数
// fn: 函数的名字 -> 将来函数调用的时候需要用到, 函数名自定义
// (): 内部填写参数 -> 欠着, 后续详细的讲解
// {}: 内部填写函数调用时要执行的代码段
1.2 赋值式定义函数
var fn2 = function () {}//各项意义同上
</script>
复制代码
- 函数的调用 // 不管是 声明式还是赋值式定义的函数, 调用方式都是一样的 // 调用语法: 函数名() / 变量名()
<script>
fn()
fn2()
</script>
复制代码
声明式与赋值式的区别
- 写法不同
- 调用上略有不同
声明式定义的函数, 可以在 函数定义前 去调用
赋值式定义函数, 不能再函数定义前 去调用
<script>
fn1()
function fn1() {
console.log('我是 fn1 函数')
}
//声明式可以这么使用
fn2()
var fn2 = function() {}
//赋值式不可以这么用
</script>
复制代码
赋值式定义函数不能在函数定义前调用的原因
赋值式定义, 其实就是声明一个变量, 然后给他赋值为一个函数 再 JS 中, 如果在定义变量之前 使用变量的话, 那么变量的值为 undefined (变量提升 面试可能会问)
函数的参数
函数的参数如何书写?
书写再 function 后的 小括号内
参数的作用?
如果一个函数没有书写参数, 那么这个函数的功能相对来说比较单一 如果书写了参数, 能够使我们这个函数的使用更加灵活 参数的书写, 分为两个
- function 后的小括号内 书写的参数我们叫做 "形参"!!! 形参的作用: 书写之后, 相当于在函数内部创建了一个变量, 变量实际的值由 "实参" 传递
- 函数名后的小括号内 书写的参数我们叫做 "实参"!!! 实参的作用: 将自身的值, 按照一一对应的关系, 传递给 形参 -->
<script>
// function 后的小括号内 书写的参数我们叫做 "形参"!!!
// 形参的作用: 书写之后, 相当于在函数内部创建了一个变量, 变量实际的值由 "实参" 传递
function fn2(a, b) {
var sum = a + b
console.log(sum)
}
// 2. 函数名后的小括号内 书写的参数我们叫做 "实参"!!!
// 实参的作用: 将自身的值, 按照一一对应的关系, 传递给 形参
fn2(100, 200)
</script>
复制代码
函数的参数
形参 和 实参 两个的数量, 要一一对应
- 形参的数量如果大于实参
如果 形参的数量大于实参的数量, 那么会将 实参按照顺序一一传递给 对应的形参 多出来的形参, 相当于变量只定义没赋值, 所以他们的值 是 undefined -->
<script>
function fn(a, b, c, d) {
console.log(a, b, c, d)
}
fn(1, 2)//值为1,2,undefined,undefined
</script>
复制代码
- 实参的数量如果大于形参
如果 实参的数量大于形参的数量, 那么会将 实参按照顺序 一一传递给对应的形参 多出来的实参, 无法在函数内部通过参数的方式调用
<script>
function fn1(a, b) {
console.log(a, b)
}
fn1(100, 200, 300, 400, 500)// 值为100,200
</script>
复制代码
函数参数的默认值
函数再创建形参的时候, 默认给一个值, 将来在调用函数的时候,
如果没有传递那么这个形参的值也不会是 undefined 而是给的默认值
如果传递了对应的值, 那么形参的值是实参传递进来的值, 否则按照默认值来运行
<script>
function fn(a = 100, b = '我是形参b', c) {
console.log(a, b, c)
}
fn()//a的默认值为100,b的默认值为'我是形参b',c的默认值为undefined
</script>
复制代码
函数的返回值(函数的执行结果)
JS 有一个规定: 在函数内部创建(定义)的变量, 只能在函数内部使用 后续学习作用域的时候, 会详细讲解 我们如果想在函数外部得到函数内部的某一个值, 或者运算结果, 我们可以通过return 这个关键字来帮我们完成
<script>
function fn() {
// 书写返回值
return 50 + 100
}
// 创建变量 接收函数的返回值
var num = fn()
console.log(num) // 150
// retrun 的注意事项
<!--!return 具有中断函数的能力所以一般来说我们将它放在函数的尾部-->
function fn() {
console.log(1)
console.log(2)
return 666
console.log(3)
console.log(4)
console.log(5)
}
fn()//代码运行到console.log(2)后遇到 return 它具有中断代码的能力所以后续代码不再执行
</script>
