函数

46 阅读3分钟

函数的概念

首先明确,函数和我们数学中的函数是两个概念 在 JS 中,函数可以理解为将一段在程序中多次出现的代码封装起来的盒子,以便在多个地方调用 换句话说:函数就是一个内部封装了部分代码的盒子,可以在多个位置被调用

创建函数

  1. 声明式定义
    function 函数名/变量名(参数:可以不写) { 书写函数时被调用的时候需要执行的代码 }
function fn1 () {
    console.log( "我是 fn1 函数" )
}
  1. 赋值式定义
    var 函数名/变量名 = function (参数:可以不写) { 书写函数时被调用的时候需要执行的代码 }
var fn2 = function () {
    console.log( "我是 fn2 函数" )
}

函数的调用

函数名(参数:可以不写)
声明式定义的函数可以在定义前调用,但赋值式定义的函数不可以

// 1. 声明式定义
fn1()
function fn1 () {
    console.log( "我是 fn1 函数" )
}
fn1()
// 2. 赋值式函数
fn2()    // 不可以执行,声明式定义其实就相当于将一个函数赋值给一个变量,会有变量的声明提升,所以在变量声明前调用时,根据变量声明提升的规则,此时变量为 undefined,所以不能被调用
var fn2 = function () {
    console.log( "我是 fn2 函数" )
}
fn2()

函数的参数

参数是什么

如果没有参数,那么函数的执行功能是固定的,写好函数后内部内容将不会变
比如:函数内部的代码为 1+1,那么始终执行的都是 1+1,如果此时想要计算 1+2 的值,需要重新封装一个 1+2 的函数

参数写在哪里,如何使用

书写函数的时候有一个 () 内部就是书写函数的,参数分为两种,形参和实参

形参和实参的区别

形参:在函数声明时 function 后边的()内书写,每写一个参数,就相当于在函数内部创建一个变量,其值为函数调用时传递的值,只能在函数内部使用,不能在外部使用
实参:在函数调用的时候传递的参数

function num(a, b, c, d) {
    console.log(a, b, c, d)
}
num(1, 2, 3, 4)           // 1, 2, 3, 4
num(1, 2)                 // 1, 2, undefined, undefined
// 形参与实参是按照从左到右的顺序一一对应的
num(1, 2, 3, 4, 5)        // 1, 2, 3, 4
// 多传参数也是按照从左到右一一对应的顺序传递出来

函数的返回值

返回值是什么,有什么作用

函数内部默认有一个 return 他的值就是函数的返回值,如果函数内部不写 return 那么函数默认在函数体内部最底部返回一个 undefined
如果不想返回 undefined 需要手动在函数内部写上 return 并且跟上需要返回的值
可以中断函数
在函数的外部,无法使用函数内部的变量或者形参如果我们需要函数内部的数据,就需要借助返回值

function num(a + b) {
    console.log('函数内部执行的 a + b =',a+b)    // 函数内部执行的 a + b =',3
}
var ab = num(1, 2)
console.log('函数外部执行的 a + b =',ab)         // 函数外部执行的 a + b =',undefined

函数的优点

函数其实就是将一段需要多次调用的代码抽离出来封装到一个盒子内部,方便在多个地方调用时简单化代码

抽离公共代码,项目代码整体更加简洁
方便(复用),在需要的地方直接 函数名 + 小括号 调用即可

函数的预解析

什么是预解析

在代码运行前,先全部分析一遍代码,这个行为叫做预解析(预解释)

预解析的内容

声明式函数定义
var 声明变量

fn()
console.log(a)            // undefined
function fn() {
    console.log(100)      // 100
}
var a = 100
// 预解析后可以理解为
function fn() {
    console.log(100)
}
var a 
fn()
console.log(a)
a = 100