Vue之『箭头函数』

箭头函数:

一种定义函数的方式

直接定义函数

const aaa = function () {

  }
           

对象字面量中定义函数

const obj = {
    bbb() {

    }
  }
           

.ES6中的箭头函数

// const ccc = (参数列表) => {
  //
  // }
  const ccc = () => {

  }
           

箭头函数参数问题

一个参数

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

二个参数

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

箭头函数代码量问题

一行代码

const mul = (num1, num2) => num1 * num2
  console.log(mul(20, 30));
           

多行代码

const test = () => {
    console.log('Hello World');
    console.log('Hello Vuejs');
  }
           

什么时候使用箭头

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

箭头函数中的this是如何查找?

向外层作用域中， 一层层查找this，直到有this的定义。

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


  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()