JavaScript ES6箭头函数

箭头函数

箭头函数，也是定义函数的一种方式

定义函数方式

方式一：function

const fn = function () {

}

方式二：对象字面量中定义函数

//const obj = {
//  fn: function () {
//  
//  }
//}

const obj = {
  fn() {
  
  }
}

方式三：ES6中的箭头函数

const fn = (参数列表) => {
  //函数体
}

箭头函数参数和返回值问题

1、无参数函数

const fn = () => {

}

2、一个参数函数

const fn = (a) => {
 console.log(a)
}

const fn = a => {
  console.log(a)
}

3、多个参数函数

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

4、箭头函数体只有一行代码的简写方式，下面函数定义等同于上面函数

const sum = (num1, num2) => num1 + num2

当箭头函数体没有return返回值，则返回undefined

const fn = () => console.log('Hello World')
console.log(fn())//先打印‘Hello World’，后打印fn函数的返回值‘undefined’

箭头函数中的this使用

箭头函数一般使用场景为，把箭头函数作为一个参数传入另外一个函数

setTimeout(function () {
  console.log('超时')
},1000)

//箭头函数方式
setTimeout(() => {
  console.log('超时')
}, 1000)

箭头函数中this问题

setTimeout(function () {
  console.log(this)//打印Window
}, 1000)

setTimeout(() => {
  console.log(this)//打印Window
}, 1000)

const obj = {
  fn() {
    setTimeout(function () {
      onsole.log(this)//打印Window
    }, 1000)

    setTimeout(() => {
      console.log(this)//打印obj
    }, 1000)
  }
}

结论：

箭头函数中的this引用的就是最近作用域中的this(向外层作用域中，一层层查找this，直到有this定义)，而普通function定义函数会通过call方式传入Window