三、函数

声明：函数属于ECMAScript语法中的一项。但是因为它实在是太过于重要，所以单独讲。

3.1 什么叫函数

我们现在刚刚接触函数，暂且把函数理解为一个代码容器。用于装代码的。

3.2 函数的定义

注：定义了一个函数，该函数不会执行 需要调用才会执行

  1. 函数声明
  2. 函数表达式

  3. 构造函数式

    3.2.1 函数声明

    语法： function 函数名 () {}

    1. // 定义函数
    2. function fun() {
    3. alert(10)
    4. }

    3.2.2 函数表达式

    语法： var 变量名 = function() {}

    1. // 定义函数
    2. var fun1 = function() {
    3. alert(10)
    4. }

    3.2.3 构造函数式(了解)

    语法： var 变量名 = new Function(参数1，参数2，参数3，…函数体)

    1. // 定义函数
    2. var fun2 = new Function('console.log(10)')

    3.3 函数的调用

    调用非常简单，通过 函数名() 的方式进行调用即可

    1. function fun() {
    2.  console.log(111)
    3. }
    4. fun();

    IIFE调用： 立即执行函数

    1. (function () {
    2. console.log(111)
    3. })();

    3.4 函数的作用

  4. 复用代码

  5. 封装代码

    3.5 函数的参数

    函数是一段代码的封装。
    当函数执行的时候，函数体内的代码会执行。
    此时，我们可以传递一些数据参与运算。这个就是函数的参数。
    函数的参数分为实参和形参。
    实参：函数调用的时候真实传递进去的数据，叫做实际参数，简称实参。
    形参：函数定义的时候写在形参列表中的变量，叫做形式参数，简称形参。
    形参与实参的对应关系： 按照顺序，一一对应。
    image.png

    函数形参跟实参个数不匹配问题

    | 参数个数 | 说明 | | —- | —- | | 实参个数等于形参个数 | 输出正确结果 | | 实参个数小于形参个数 | 只取到形参的个数 | | 实参个数小于形参个数 | 多的形参定义为undefined，结果为NaN |

3.6 函数的返回值(return)

函数体内有一个专属的关键字 return
作用

  1. 是向函数的调用处返回一个值
  2. 终止函数的执行
  3. 只能返回一个值
    1. function qiuhe(a, b) {
    2. var result = a + b;
    3. return result;
    4. }
    5. var he = qiuhe(10, 20);
    6. // he => 30
    image.png

    3.7 arguments

    arguments是函数中的一个内置对象
    只能在函数里面使用
    一个函数对应一个arguments
    它里面装的是所有传递进来的实参
    它长得非常像数组 但是因为它没有数组的方法 所以我们只能说它是类数组\伪数组
    1. function sum() {
    2. var sum = 0;
    3. //  arguments.push(1) // 报错：arguments.push is not a function
    4. for (var i = 0; i < arguments.length; i++) {
    5.  sum += arguments[i]
    6. }
    7. return sum;
    8. }

3.8 递归

定义：函数自己调用自己
digui.gif
求斐波那契数列

  1. function fibonacci(num) {
  2.   if (num === 1 || num === 2) {
  3.     return 1;
  4.   }
  5.   return fibonacci(num - 1) + fibonacci(num - 2)
  6. }

阶乘

  1. function jc(num) { 
  2.   if (num === 1) {
  3.     return 1;
  4.   }
  5.   return num * jc(num - 1);
  6. }

3.9 this

this是函数内的一个对象，它表示’上下文’

定义一个函数

  1. function demo() {
  2.   console.log(this);
  3. }

this只能在函数调用的时候确定

  1. 在事件函数中，this指向绑定事件的元素

    1. function demo() {
    2. console.log(this);
    3. }
    4. document.onclick = demo; // 当点击时 this指向document

  2. 当函数自己调用的时候，this指向window(非严格模式下)

    1. function demo() {
    2. console.log(this);
    3. }
    4. demo(); // window

  3. 当函数作为对象的方法调用的时候，指向调用的对象

    1. var obj = {
    2. name: "小明"
    3. }
    4. obj.fun = demo;
    5. obj.fun(); // {name: "小明", ...}

  4. setInterval中

    1. function demo() {
    2. console.log(this);
    3. }
    4. setInterval(demo, 1000); // window

总结：函数中的this遵循两条规则 1 谁调用指向谁 2 调用者不明确 指向window