javscript函数——创建函数、声明前置、函数参数、重载、返回值、立即执行函数

image.png

image.png

编程中的函数是一个代码块，这个代码块中可以包含多条语句，然后通过该函数的标识符进行调用。

下面这个就是JS中的一个简单函数：

一、在JS中，如何创建一个函数？

方法一：构造函数（该方法较少使用）

1.使用new和Function构造一个函数
如下代码：先声明一个变量作为函数的标识符，然后使用new关键字后接Function进行构造：

2.构造函数的参数
在上面例子中，我们还可以对fn函数内部传入参数和代码块，填写在Function后面的括号内，如果传入函数参数，就要写在第一位，函数的代码块部分写在最后面，可以传递无数个参数，也可以不传递参数：

这些参数都必须使用字符串的形式传入，然后Function的F是大写的

var fn = new Function("a",alert("a"));//带有参数的函数fn

var fn = new Function("alert(1)");//没有参数的函数fn

方法二：函数表达式

1.介绍：函数表达式创建函数与new关键字的方式有点类似，但是不同的是，它是直接将函数体赋值给一个变量，该变量作为函数的标识符，然后可以通过该变量直接调用：

var fn = new Function("alert(1)"); //函数表达式创建函数

2.函数表达式参数的传递可以直接写在小括号里面，多个参数时用逗号隔开：

//函数表达式的参数
            var fn = function(a,b) {
                console.log(a + b);
            }

方法三、函数声明（该方法最常用）

1.介绍：函数声明是直接使用关键词function后接标识符进行创建函数，如下代码：

//函数声明创建函数
function fn(){
                console.log(1);
            }

2.函数声明创建函数的参数传递同函数表达式一样，都是可以直接写在小括号内进行传递，可以多个，用逗号隔开；

三种创建函数方式的不同点
主要不同是构造函数和函数表达式：
构造函数和函数表达式存在变量提升的问题，也就是说调用该函数必须在该函数已经被创建后才能调用，而函数声明不存在这个问题，无论在何处调用都可以，比如下图：

函数表达式的调用必须在函数后面.png

调用成功.png

而函数声明则没有这个问题，它可以在任何地方被调用：

调用成功.png

我是函数声明.png

二、关于函数声明的前置

大家都知道JS的执行是由上至下的，而这对函数声明和var变量是有重大影响的；

函数声明与var变量一样，会在JS加载到的时候自动放到所有代码的最上面最先执行，比如下面这个代码，执行的顺序其实是这样的：

看起来的执行顺序.png

真实的执行顺序.png

再来看看为什么函数表达式和构造函数的调用要放到函数体的后面
原因是var变量会被置顶到JS的最上面，而此时如果函数还没有被创建就调用了，自然就会出错，比如下面这串代码：

错误代码.png

它的真是执行顺序是这样的：

真实执行顺序.png

构造函数同理。

三、函数的参数

给函数设置参数，实际上就是在函数内部声明变量，而传参相当于复制给这个函数内的变量，比如下面这个函数：

有参数的函数.png

函数内部创建变量.png

关于函数的重载（同名函数的不同调用）

JS是一门弱类型的脚本语言，它对于变量的声明只需要使用var即可，所以就不能根据实参的数据类型和个数来分别执行有不同代码段的同名函数，如果创建了同名函数，那么后创建的函数会覆盖先创建的函数，如下图：

image.png

JS函数重载功能的实现

1.JS虽然不能根据数据的类型来实现重载，但是可以使用条件判断来实现重载

条件判断实现JS函数重载.png

2.使用函数的参数属性arguments来实现对函数参数个数的重载，例如实现计算不定参数个数的和：

arguments实现不定参数的和.png

四、函数的返回值（return）

return是需要函数返回一个结果时使用的关键字；

1.可以使函数得到的值用做他用，如下：

函数返回值用作他用.png

2.如果不写return，函数会默认返回undefined，如下可以证明：

不写return，函数返回undefined.png

3.函数的返回值与console.log()的值不同，还是以上面那个例子做证明：

image.png

再执行var a = fn('a')时，输出了一次a，而这个a并不是函数fn的值，它是console.log(a)执行的结果，而函数返回的是a下面的那个undefined；
4.函数执行过程中遇到return会立即结束函数，后面的代码不执行，如下：

函数执行时遇到return就结束了.png

五、立即执行函数

声明函数和匿名函数

1.无论是构造函数，函数表达式还是函数声明，它们都需要一个函数的名字，这是声明函数；
2.匿名函数是指一个函数没有名字，并且被立刻调用，立即执行函数就是匿名函数，即使它的可以起名字的，但是这个函数名没有任何意义；

立即执行函数的常用写法

1.用小括号包裹整个函数体，然后在后面再添加一个小括号进行调用
(function(){})()
2.用小括号包含整个函数体，并且包含用以调用的小括号
(function(){}())
3.用+运算符链接函数体
+function(){}()

根据立即执行函数的写法得到的一些结论：

立即执行函数是运算符和函数的结合：
无论是小括号又或者是+号都是运算符，将它们与函数进行连接后，就是立即执行函数，按照这种说法，那么以下运算符也可以生效

1.-运算符：

image.png

2.=运算符：

image.png

3.！运算符：

image.png

4.,运算符：

image.png

*、/、%不能使立即执行函数得出结果并且会报错；
立即执行函数其实是一个表达式，不会受到函数声明前置的影响，以下代码可以证明：

image.png

可见该函数是在a被赋值为100后才被创建并执行的；

立即执行函数的作用
立即执行函数的作用主要是防止变量的污染，在函数自身内部创建一个局部作用域，所有在该函数内部创建的变量都会在执行后被销毁，对外部变量没有影响；