箭头函数

箭头函数的基本使用

<script>
    //  箭头函数：也是一种定义方式 
    // 1.定义函数的方式 function
    const fun = function () {
      
    }

    // 2.对象字面量中定义函数
    const obj = {
      fun: function() {

      },
      fun1() {

      }
    }

    // 3.ES6中的箭头函数
    const abc = (参数列表) => {

    }
    // 无参数:
    const abc = () => {

    }
  </script>

箭头函数参数和返回值

<script>
    // 1.参数问题
    // 1.1放入两个参数:
    const sum = (num1, num2) => {
      return num1 + num2;
    }

    // 1.2放入一个参数
    const mul = (num) => {
       return num * num
    }

    const mul = num => {
      return num * num
    }

    // 2.函数中
    // 2.1函数代码块中有多行代码时
    const test = () => {
      console.log('Hello World');
      console.log('Hello Vue.js');
    }

    // 2.2函数代码块中只有一行代码时
    const mul1 = (num1, num2) => {
      return num1 * num2
    }
    // ①:有返回值
    const mul1 = (num1, num2) => num1 * num2
    console.log('mul' + mul1(200, 3));
    // ②:无返回值:
    const mul2 = () => console.log('Hello Demo');
    console.log('mul2==' + mul2);
  </script>

箭头函数的this使用

<script>
    // 问题：箭头函数中的this是如何查找的
    // 答案：向外层作用域中，一层层查找this，直到有this的定义
    // 结论：箭头函数中的this引用的就是最近作用域中的this
    const obj = {
      aaa() {
        setTimeout(function () {
          setTimeout(function () {
            console.log(this); //window  
          })

          setTimeout(() => {
            // 外层的setTimeout函数指向的就是window
            console.log(this); //window
          })
        })

        setTimeout(() => {
          setTimeout(function () {
            console.log(this); //window  
          })

          setTimeout(() => {
            // 外层的setTimeout函数指向的就是obj对象
            console.log(this); //obj对象
          })
        })
      }
    }

    obj.aaa()
  </script>