ES6箭头函数

一、定义函数的方式

1.function
const aaa = function （） {}

2.对象字面量中定义函数

const obj = {
	   bbb：function（）{
	   }，//第一种
	   bbb（）{
	   } //第二种
   }

3.ES6中的箭头函数
格式：

const ccc = （参数列表）=>{
   }
   const ccc = () =>{
   //没有参数和返回值
   }

二、参数和返回值问题

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
  console.log(mul(20, 30));

  // const demo = () => {
  //   console.log('Hello Demo');
  // }
  const demo = () => console.log('Hello Demo')
  console.log(demo());

代码块中只有一行代码时，大括号和return可以省去。

三、什么时候选用箭头函数

把一个函数当作另一个函数的参数：

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

箭头函数中的this

如何查找箭头函数中的this?
答: 向外层作用域中, 一层层查找this, 直到有this的定义.

例：

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

两个函数打印出来都是window

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

第一个函数打印出的是window
第二个函数打印出的是obj对象

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