(五) 箭头函数

1. 箭头函数的基本使用

基本使用

let arr = [1, 2, 3, 4]
arr.forEach((item, index) => {
  console.log(item, index)
})

只有一个参数时, 小括号可以省略, 没有参数时, 小括号需要加上

let arr = [1, 2, 3, 4]
arr.forEach(item => {
  console.log(item)
})

箭头函数的函数体只有一行代码时, 花括号可以省略, 如果是return语句, return也可以省掉

let arr = [1, 2, 3, 4]
arr.forEach(item => console.log(item))

let newArr = arr.map(item => item*2)

2. 箭头函数中的this指向问题

• 箭头函数中的this是在定义函数的时候绑定, 而不是在执行函数的时候绑定
• 实际上, 箭头函数根本没有自己的this, 导致内部的this就是外层代码块的this, 所谓的外层代码块, 是指继承自父执行上下文的this
• 正因为它没有this, 所以也就不能作为构造函数

    var x = 11
    var obj = {
      x: 22,
      say: () => {
        console.log(this.x)
      }
    }
    obj.say()     // 11

• 本案例中, 箭头函数与say平级, 也就是箭头函数所在的对象为obj, 而obj的父执行上下文是window

    var obj = {
      birth: 1990,
      getAge: function() {
        var b = this.birth
        var fn = () => new Date().getFullYear() - this.birth
        return fn
      }
    }
    obj.getAge()    // 

• 例子中箭头函数时在getAge中定义的, getAge的父执行上下文是obj, 因此这里的this指向obj对象