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