用户手册

# 04 函数的使用

（点击->高清B站视频） (opens new window)


1.函数定义

function add(a, b, c) {
    var d = 0
    d += a
    d += b
    d += c
    return d
}

函数的常规格式是以关键词function开头，add(加法)是函数的名称，圆括号中的a b c则表示函数有3个可输入的参数，return 表示函数会返回一个值


2.函数调用

函数调用的格式是: 函数名(参数1,参数2…)

function add(a, b, c) {
    var d = 0
    d += a
    d += b
    d += c
    return d
}

console.log(add(1,2,3)) //输入1 2 3, 返回6
console.log(add(4,5,6)) //输入4 5 6, 返回15
console.log(add(4,5,6,7)) //输入4 5 6 7, 多了7这个参数, 照样返回15
console.log(add(4,5)) //输入4 5, 缺了一个参数, 返回NaN(not a number)意味着参与计算过程出现错误
//当undefined跟数字发生运算就会产生NaN, 如 undefined+1

3.函数参数

在函数中插入log追查参数在函数中的实际值

function add(a, b, c) {
    console.log('a b c的值分别是:',a+'', b+'', c+'') //显示 a b c 的值
    var d = 0
    d += a
    d += b
    d += c
    console.log('返回:',d)
    return d
}

//先单独演示这个, 
add(3,2,1) //输入3 2 1, 返回6

add(4,5,6) //输入4 5 6, 返回15
add(4,5,6,7) //输入4 5 6 7, 多了7这个参数, 照样返回15
add(4,5) //输入4 5, 缺了一个参数, 缺失的参数会以undefined的值参与运算, 当undefined跟数字发生运算就会产生NaN

4.函数返回

当函数运行到第一个return语句时，就会立即带着返回值跳出函数，往后的代码不会被执行

function add(a, b, c) {
    var d = 0
    return d//这行再往下移一点试试?
    d += a
    d += b
    d += c
    return d
}

console.log(add(3,2,1))
console.log(add(4,5,6))
console.log(add(4,5,6,7))
console.log(add(4,5))

5.匿名函数

函数可以没有名字，没有名字的函数叫做匿名函数，但没了名字怎样调用呢?

function(a, b, c) {
    var d = 0
    d += a
    d += b
    d += c
    return d
}


可以把整个函数表达式当作数据赋值给变量或属性，即函数本身可以作为数据存储在变量或对象属性里

var add = function(a, b, c) {
    var d = 0
    d += a
    d += b
    d += c
    return d
}

console.log(add(1,2,3))

那存到变量的匿名函数，跟带名字的函数有啥区别呢？

在下面这种情况有区别:

如果在函数声明之前调用函数，存到变量的函数，会因为函数未被定义而报错

console.log(add(1,2,3))// add未被赋值而报错

var add = function(a, b, c) { //在add被调用之后才被定义
    var d = 0
    d += a
    d += b
    d += c
    return d
}

而带名字的函数则允许你在定义之前调用，因为js引擎在运行时会自动把它移到代码最上方

console.log(add(3,2,1))// 运行正常, 因为add的定义被js引擎自动提前运行

function add(a, b, c) {// add作为有名函数, 会被自动提升到代码最上方, 所以能正常运行
    var d = 0
    d += a
    d += b
    d += c
    return d
}

6.箭头函数

此外，还有另一种函数定义方式跟匿名函数相似，叫做"箭头函数"

var mul = (a, b, c) => a * b * c // 省略大括号的写法, 如果函数里的表达式简单不用分行可以这样写

calc(add)
calc(mul)

// 下面的运行结果跟上面一样
calc((a, b, c) => {
    return a + b + c
})

calc((a, b, c) => a * b * c)

它的写法更简洁，大多数时候作为参数传进其他函数里，作用跟普通函数基本一致


7.全局函数

把add函数以ADD为名暴露到全局，这样控制台也能访问

function add(a, b, c) {
    var d = 0
    d += a
    d += b
    d += c
    return d
}

global.ADD = add // 把add函数赋值给global对象的ADD属性

← 01 放置方块 →