JS进阶-函数进阶

学习目标：

• 掌握函数进阶

---

学习内容：

1. 函数提升
2. 函数参数
3. 箭头函数

---

函数提升：

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

<script>
     var fun
      // 1. 会把所有函数声明提升到当前作用域的最前面
      // 2. 只提升函数声明，不提升函数调用
      // fn()
      // function fn() {
      //   console.log('函数提升')
      // }

      
      // fun()
      // var fun = function () {  //只提升了赋值，没有提升变量  报错
      //   console.log('函数表达式')
      // }
      // 函数表达式 必须先声明和赋值， 后调用 否则 报错
  </script>

总结：

1. 函数提升能够使函数的声明调用更灵活。
2. 函数表达式不存在提升的现象。
3. 函数提升出现在相同作用域当中。

---

函数参数：

• 动态参数：

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

 <script>
    function getSum() {
      // arguments 动态参数 只存在于 函数里面
      // 是伪数组 里面存储的是传递过来的实参
      // console.log(arguments)  [2,3,4]
      let sum = 0
      for (let i = 0; i < arguments.length; i++) {
        sum += arguments[i]
      }
      console.log(sum)
    }
    getSum(2, 3, 4)
    getSum(1, 2, 3, 4, 2, 2, 3, 4)
  </script>

总结：

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

• 小结：

1.当不确定传递多少个实参的时候，我们怎么办？

arguments动态参数。

2.arguments是什么？

伪数组。
它只存在函数中。

• 剩余参数：

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

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

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

<script>
    function getSum(a, b, ...arr) {
      console.log(arr)  // 使用的时候不需要写 ...
    }
    getSum(2, 3)
    getSum(1, 2, 3, 4, 5)
  </script>

开发中，还是提倡多使用剩余参数。

• 小结：

1.剩余参数主要的使用场景是？

用于获取多余的实参。

2.剩余参数和动态参数区别是什么？开发中提倡使用哪一个？

动态参数是伪数组。
剩余参数是真数组。
开发中使用剩余参数想必也是极好的。

• 展开运算符：

展开运算符...，将一个数组进行展开。

<script>
    const arr1 = [1, 2, 3]
    // 展开运算符 可以展开数组
    // console.log(...arr)

    // console.log(Math.max(1, 2, 3))
    // ...arr1  === 1,2,3
    // 1 求数组最大值
    console.log(Math.max(...arr1)) // 3
    console.log(Math.min(...arr1)) // 1
    // 2. 合并数组
    const arr2 = [3, 4, 5]
    const arr = [...arr1, ...arr2]
    console.log(arr)
  </script>

说明：不会修改原数组。

剩余参数	函数参数使用，得到真数组
展开运算符	数组中使用，数组展开

• 小结：

1.展开运算符主要的作用是？

可以把数组展开，可以利用求数组最大值以及合并数组等操作。

2.展开运算符和剩余参数有什么区别？

展开运算符主要是数组展开。
剩余参数在函数内部使用。

---

箭头函数：

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

使用场景：箭头函数更适用于那些本来需要匿名函数的地方。

• 基本语法：

语法1：基本写法。

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

 // 1. 箭头函数 基本语法
    const fn = () => {
      console.log(123)
    }
    fn()

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

     const fn = (x) => {
       console.log(x)
     }
     fn(1)

    // 2. 只有一个形参的时候，可以省略小括号
    const fn = x => {
      console.log(x)
    }
    fn(1)

    // 3.只有一行代码的时候，我们可以省略大括号
    const fn = x => console.log(x)
    fn(1)

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

//普通函数
    const fn = function (x) {
      return x + x
    }
    console.log(fn(1)) //2

 // 4. 只有一行代码的时候，可以省略return
    const fn = x => x + x
    console.log(fn(1)) //2

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

 // 5. 箭头函数可以直接返回一个对象
    const fn = (uname) => ({ uname: uname })
    console.log(fn('刘德华'))

总结：

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

    // 1. 箭头函数 基本语法
    // const fn = () => {
    //   console.log(123)
    // }
    // fn()

    // const fn = (x) => {
    //   console.log(x)
    // }
    // fn(1)

    // 2. 只有一个形参的时候，可以省略小括号
    // const fn = x => {
    //   console.log(x)
    // }
    // fn(1)

    // 3. 只有一行代码的时候，我们可以省略大括号
    // const fn = x => console.log(x)
    // fn(1)

    // 4. 只有一行代码的时候，可以省略return
    // const fn = x => x + x
    // console.log(fn(1))

    // 5. 箭头函数可以直接返回一个对象
    // const fn = (uname) => ({ uname: uname })
    // console.log(fn('刘德华'))

  </script>

• 小结：

1. 箭头函数属于表达式函数，因此不存在函数提升。
2. 箭头函数只有一个参数时可以省略圆括号( )。
3. 箭头函数函数体只有一行代码时可以省略花括号{ } ,并自动做为返回值被返回。
4. 加括号的函数体返回对象字面量表达式。

• 箭头函数参数：

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

<script>
     // 1. 利用箭头函数来求和
      const getSum = (...arr) => {
        let sum = 0
        for (let i = 0; i < arr.length; i++) {
          sum += arr[i]
        }
        return sum
      }
      const result = getSum(2, 3, 4)
      console.log(result) // 9
  </script>

• 小结：

1.箭头函数里面有arguments动态参数吗？可以使用什么参数？

没有arguments动态参数。
可以使用剩余参数。

• 箭头函数this：

在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值，非常令人讨厌。

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

 <script>
      // 以前this的指向：  谁调用的这个函数，this 就指向谁
        // console.log(this)  // window

        // // 普通函数
        // function fn() {
        //   console.log(this)  // window
        // }
        // window.fn()

        // // 对象方法里面的this
        // const obj = {
        //   name: 'andy',
        //   sayHi: function () {
        //     console.log(this)  // obj
        //   }
        // }
        // obj.sayHi()

        // 2. 箭头函数的this  是上一层作用域的this 指向
        // const fn = () => {
        //   console.log(this)  // window
        // }
        // fn()

        // 对象方法箭头函数 this
        // const obj = {
        //   uname: '雪碧宝宝',
        //   sayHi: () => {
        //     console.log(this)  // this 指向谁？ window
        //   }
        // }
        // obj.sayHi()

        const obj = {
          uname: '雪碧宝宝',
          sayHi: function () {
            console.log(this)  // obj
            let i = 10
            const count = () => {
              console.log(this)  // obj 
            }
            count()
          }
        }
        obj.sayHi()
  </script>

在开发中【使用箭头函数前需要考虑函数中this的值】，事件回调函数使用箭头函数时，this为全局的window，因此DOM事件回调函数为了简便，还是不太推荐使用箭头函数。

• 小结：

1.箭头函数里面有this吗？

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

2.DOM事件回调函数推荐使用箭头函数吗？

不太推荐。特别时需要用到this的时候。
事件回调函数使用箭头函数时，this为全局的window。