关于箭头函数

发表于 分类于

前言

箭头函数的设计目的就是替代函数表达式及匿名函数在某些场景的应用，使用箭头函数能够更加简洁明了地描述匿名函数和函数表达式！

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

—— MDN

语法

总体语法是params => expression/statement；

箭头（=>）的左侧是函数形参，而右侧则是函数语句或者表达式；需要注意的是左侧参数部分和箭头要保持在同一行，不能进行换行！如：

1
2
(a, b)
 => {}

左侧形式

  1. 多个（两个及以上参数）或无参数时，用括号进行包裹：

    1
    (a, b, ..., z) => {}

  2. 仅一个参数时可以不用括号包裹：

    1
    a => {}

  3. 可以使用剩余参数（...），仅有一个参数且为剩余参数时必须加上括号：

    1
    2
    (a, ...other) => {}
    (...params) => {}

  4. 参数支持解构和默认值：

    1
    ([a, b] = [0, 1], c = 3) => a + b + c // 4

右侧形式

  1. 非对象字面量和一般表达式，不需要加大括号，作为返回值：

    1
    2
    3
    4
    let t1 = () => 1
    t1() // 1
    let t2 = (a, b) => a + b
    t2(1, 2) // 3

  2. 对象字面量，需要加括号，作为返回值：

    1
    2
    3
    4
    5
    6
    7
    let t = (name, age) => ({
        name: name,
        age: age,
        hello: `hello, I'm ${name}.`
    })

    t('xxx', 10) // { name: 'xxx', age: 10, hello: 'hello, I\'m xxx.' }

  3. 函数语句，加大括号，可以return：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    let t1 = (a, b) => {
        return a + b
    }
    t1(1, 2) // 3

    let t2 = (a, b) => {
        let c = a + b
    }
    t2(1, 2) // undefined

箭头函数的特性

  1. this的指向：箭头函数内this实际上指向的是声明时所处的最近一层作用域，因此如果将箭头函数作为某个对象的方法，那么this并不会指向该对象，而是该对象所处的作用域；如：

    1
    2
    3
    4
    5
    6
    7
    8
    let obj = {
      a: 'inner a',
      b: () => {
        return this.a
      }
    }

    console.log(obj.b()) // undefined

  2. 没有arguments对象；

  3. 不能作为构造函数，因此不能使用new关键字调用；

  4. 没有prototype属性；

参考文档

  1. 箭头函数 - JavaScript | MDN