你不知道的js -- this的箭头函数

逃离我推掉我的手 2022-05-14 09:56 258阅读 0赞

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

(参数1, 参数2, …, 参数N) => { 函数声明 }
    (参数1, 参数2, …, 参数N) => 表达式（单一）
    //相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
    
    // 当只有一个参数时，圆括号是可选的：
    (单一参数) => {函数声明}
    单一参数 => {函数声明}
    
    // 没有参数的函数应该写成一对圆括号。
    () => {函数声明}

//加括号的函数体返回对象字面表达式：
    参数=> ({foo: bar})
    
    //支持剩余参数和默认参数
    (参数1, 参数2, ...rest) => {函数声明}
    (参数1 = 默认值1,参数2, …, 参数N = 默认值N) => {函数声明}
    
    //同样支持参数列表解构
    let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
    f();  // 6

代码实例：

![70][]

foo函数内部创建的箭头函数会捕获到foo函数调用时的绑定对象，所以bar的this也会绑定到obj1对象上，所以后面再次call（obj2）的时候已经无法解除this的绑定了，new 也不行。

箭头函数用于回调函数：

![70 1][]

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/function
[this]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this
[arguments]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments
[super]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/super
[new.target]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new.target
[70]: /images/20220514/df75317a34d042ca8b5d1fd8b62238bc.png
[70 1]: /images/20220514/847f922291e14310b8b346f726b5832c.png