箭头函数

一、函数的定义方式

1、function

const aa = function(){
}

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

const objc = {
  bbb:function(){
  },
  aa(){//这里为function的增强型写法
  }
}

3、ES6中的箭头函数

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

二、箭头函数参数和返回值

2.1、参数问题

• 放入两个参数

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

• 放入一个参数，()可以省略

// const power = (num) => {
//     return num * num
// }
可以写成下面这样
const power = num => {
  return num * num
}

2.2、返回值（函数内部）

• 1、函数中代码块中有多行代码

const test = () =>{
  console.log("hello zzz")
  console.log("hello vue")
}

• 2、函数代码块中只有一行代码，可以省略return

// const mul = (num1,num2) => {
//   return num1 * num2
// }
const mul = (num1,num2) => num1* num2
// const log = () => {
//   console.log("log")
// }
const log = () => console.log("log")

三、箭头函数的this使用

什么时候使用箭头函数？
=>当一个函数在另一个函数中作为参数的时候

setTimeout(function () {
    console.log(this)
} , 1000);
setTimeout(() => {
    console.log(this)//这里this找的是window的this
}, 1000);

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

结论：箭头函数中的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()