函数进阶

函数提升

函数提升与变量提升比较类似，是指函数在声明之前即可被调用。

总结：

1. 函数提升能够使函数的声明调用更灵活

2. 函数表达式不存在提升的现象

3. 函数提升出现在相同作用域当中

    // 函数提升
    fn()

    function fn () {
      console.log(123)
    }

    // 函数表达式不能提升，需要先声明，再使用
    // 
    // const f = function () {
    //   console.log(222)
    // }
    // f()

    // 函数优于变量
    // 变量与函数同名时，函数优于变量
    /* 
    a:函数
    a:变量
     */

     console.log(a)
     /* 控制台打印
     ? a () {
       console.log('a')
     }
      */

     function a () {
       console.log('a')
     }

     var a = 1
     console.log(a)//1

函数参数

动态参数

arguments 是函数内部内置的伪数组变量，它包含/接收了调用函数时传入的所有实参

使用场景：

如果参数个数不确定，无法设置形参个数

此时不用写形参，可在函数中使用动态参数arguments

总结：

1. arguments 是一个伪数组，只存在于函数中
2. arguments 的作用是动态获取函数调用时传入的所有实参
3. 可以通过for循环依次得到传递过来的实参

    function fn () {
      let sum = 0
      for (let i = 0; i < arguments.length - 1; i++) {
        sum += arguments[i]
        console.log(arguments[i])
      }
      console.log('总和为：' + sum)
    }

    fn(1,3,5,8,10)

剩余参数

剩余参数

允许我们将一个不定数量的参数表示为一个数组

... 是语法符号，置于函数最后一个形参之前，用于获取多余的实参

借助 ... 获取的剩余实参，是个真数组

function fn (a, b , ...c) {
      console.log(a, b, c)//1 3 [5,8,10]
    }

    fn(1,3,5,8,10)

    function getSum (...arr) {
      let sum = 0
      for (let i = 0; i < arr.length ; i++) {
        sum += arr[i]
      }
      console.log(sum)//27
    }

    getSum(1,3,5,8,10)

展开运算符

    const arr = [1, 3, 5, 8, 10]
    console.log(...arr)

    // 求最大值
    console.log(Math.max(...arr))
    // 合并数组

    const arr1 = [1, 3, 5, 8, 10]
    const arr2 = ['a', 'b', 'c']
    const arr3 = [11, 31, 51, 81, 100]

    const array = [...arr1, ...arr2, ...arr3]
    console.log(array)

注意:

• 剩余参数：用在函数最后一位形参前加...,在函数内部使用，作用：接收剩余实参，是个真数组

• 展开运算符：使用数组时，在数组前添加，作用：展开数组，使用场景有：

  求数组最大/小值

  合并数组

注：...不会修改原数组

箭头函数

基本语法

简单地说:箭头函数是函数语法简写

目的：引入箭头函数的目的是更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更简洁

使用场景：箭头函数更适用于那些本来需要匿名函数的地方或者说回调函数

语法1：基本写法

    /* 
    //普通函数
    const fn =  function () {
      console.log(123)
    } 
    */

    // 箭头函数
    const fn = () => {
      console.log(123)
    }

语法2：只有一个参数可以省略小括号

/* 
    //普通函数
    const fn2 =  function (x) {
      return x
    } 
    */

    // 箭头函数
    const fn2 = x => {
      return x * x
    }

    console.log(fn2(2))

语法3：如果函数体只有一行代码，可以写到一行上，并且无需写 return 直接返回值

 /* 
    //普通函数
    const fn3 =  function (x, y) {
      return x + y
    } 
    */

    // 箭头函数
    const fn3 = (x, y) => x + y

    console.log(fn3(1, 2))

语法4：加括号的函数体返回对象字面量表达式

 /* 
    //普通函数
    const fn4 =  function (uname) {
      return {uname:uname}
    } 
    */

    // 箭头函数
    const fn4 = uname => ({uname: uname})

    console.log(fn4('小明'))

总结：

1. 箭头函数属于表达式函数，因此不存在函数提升

2. 箭头函数只有一个参数时可以省略圆括号 ()，其他情况不可省略

3. 箭头函数函数体只有一行代码时可以省略花括号 {}，并自动做为返回值被返回

4. 加小括号的函数体返回对象字面量表达式

箭头函数参数

1. 普通函数有arguments 动态参数

2. 箭头函数没有 arguments 动态参数，但是有 剩余参数 ..args

    const getSum = (...other) => {
      
      let sum = 0

      for (let i = 0; i < other.length; i++) {
        sum += other[i]
      }

      console.log(sum)
    }

    getSum(1, 4, 6)

箭头函数this

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。

• 普通函数中，this是指调用者
• 箭头函数中，this是沿用自己的作用域链的上一层的this

在开发中【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window，因此

DOM事件回调函数为了简便，还是不太推荐使用箭头函数

//普通函数
const btn = document.querySelector('input')

    btn.addEventListener('click',function () {
      console.log(this)//调用者
    })


    let obj = {
      name : '小明',
      fei : function () {
        console.log(this)//调用者
      }
    }
    obj.fei()

//箭头函数
    btn.addEventListener('click',() => {
      console.log(this)//window
    })
    //箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。
    let obj = {
      name : '小明',
      fei :  () => {
        console.log(this)//window
      }
    }
    obj.fei()