JavaScript之function基础定义与调用

引入

前端人都多多少少听说过一句话：“HTML是网页的骨架，CSS是网页的皮囊，而JS是网页的灵魂”。

而在我们学习JS这一“灵魂”的同时，如果要给JS也找一个“灵魂”，我觉得就是接下来我们会一起学习的函数

之前的学习文章里我也曾提到过，一般我们不会嵌套太多层循环，如果有需要，我们更倾向于写一些自定义函数，然后以调用的方式来达到相应的目的

在大型开发中，我们也往往会采用定义函数并调用组件的形式来让我们代码的可读性更强。

以组件形式写的这些子功能也会让我们维护和修复BUG更加方便

总之用函数是好处多多的事。让我们一起看看吧——

1. 函数的定义

1.1 命名函数

在JavaScript中，我们可以用如下的语句来定义一个函数：

function name(x) {}

name是我们自定义的函数名，这点很好理解，你可以换成任何你能看懂的名字（最好还是要符合变量名命名规则，以防玄学问题导致程序报错）

x代表我们定义的函数传入的参数，是一个局部变量。如果需要传入多个变量，这里定义的时候也要体现出来，并将这些参数用逗号,分隔：

function name(x,y,z) {}

{}中包含的自然是我们的代码块了（也会有人称之为函数体，代表这个函数运作的主要内容）

比如我们要写一个绝对值转化函数，这是个相对来说是初学阶段很有名的函数：

function abs(x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

简单看一下代码块。我们在代码块中先用了if分支语句来判断我们传入的x参数是否大于等于0，如果满足该条件则运行属于这个if语句的代码块return x;来返回x自己的值。意味着这个x经过abs这个函数的作用之后返回来一个x作为结果。

如果不满足上面的条件则执行return -x；来返回x的相反数。以此来达到返回绝对值的作用。

需要注意的是，凡是执行到return则意味着函数体执行完毕。设计的时候要确保return之后的代码不是必须执行的

有意思的是，函数并不一定需要一个return返回值。你可以用函数处理一些不需要返回值的操作，比如直接弹窗等。此时函数执行完之后也会有返回结果，这个结果是undefined

JavaScript中自定义的函数也是一个对象，例子中我们定义的abs()函数实际上是一个函数对象，而函数名abs可视为指向该函数的变量。这也印证了我之前说的函数名的命名最好满足变量的命名要求，否则很可能报错。

1.2 匿名函数

我们还是用绝对值函数来举例。事实上我们可以不在function后面加上我们函数的名字：

var abs = function (x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
};

这串代码是把一个匿名函数赋值给abs这个变量。这样定义出来的abs函数和之前的命名函数是等价的。

匿名函数当然不是只能这么用的。事实上匿名函数是为了方便我们在一些函数中定义新的函数。比如我需要写一个函数来判断一个对象里的每一个元素是否满足某个条件，这个“判断是否满足条件”就很可能需要一个新的函数，如果我们写到一半，这时候再去定义一个函数，显然非常影响手感和心态。于是我们可以直接在需要的地方用匿名函数的办法简单定义一个函数，接着写下去了

2. 调用函数

对于命名函数，我们直接传入参数即可——

abs(-3);// 返回值会是3

有趣的是JS容错率还不错，你传入多个无用参数并不影响程序执行

abs(-3,0,0,"juejin yyds")；//正常返回3

当然，少传入参数也不影响。这个例子中如果什么都不输入会返回nan。