ES6箭头函数简析

01-箭头函数的基本使用

02-箭头函数的参数和返回值的问题

03-箭头函数中this的使用

•           箭头函数：一种定义函数的方式*
  

01-箭头函数的基本使用

    //1.定义函数的方式：function
    const aaa = function () {

    }
    //2.对象字面量中定义函数
    const obj = {
      bbb() {

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

    // }
    const ccc = () => {

    }

02-箭头函数的参数和返回值问题

1.参数问题

1.1放入两个参数

    const sum = (num1, num2) => {
      return num1 + num2
    }

1.2放入一个参数

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

2.返回值的问题

2.1函数代码块中有多行代码时

    const test = () => {
      //1.打印一个hello world
      console.log('hello world');

      // 2.打印hello vuejs
      console.log('hello Vuejs');
    }

2.2函数代码块中只有一行代码

     // const mul=(num1,num2)=>{
    //   return num1*num2
    // }
    const mul = (num1, num2) => num1 * num2

    // const demo=()=>{
    //   console.log('hello demo');
    // }
    const demo = () => console.log('hello demo');
    demo()    //hello demo
    console.log(demo());   //undefined

3.箭头函数中this的使用

        什么时候使用箭头函数

示例一：

    // setTimeout(function () {
    // console.log(this)   //window
    // },1000)

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

示例二：

    // const obj = {
    //   aaa() {
    //     setTimeout(function () {
    //       console.log(this); //Window
    //     })

    //     setTimeout(() => {
    //       console.log(this); //{aaa: ƒ}   obj对象
    //     })
    //   }
    // }
    // obj.aaa()

箭头函数中的this引用的是最近作用域中的this（来自stank overflow）
即：箭头函数中的this是向外层作用域中一层层查找this，直到有this定义

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

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

    obj.aaa();