javascript的剪头表达式

问题背景

最近在学习前段开发，react框架，笔者本身是c/c++语系的软件从业人员，学习js是为了做跨端开发，学习的时候并没有选择先学习语法，而是选择大概的预览了一遍语法，然后开始框架的学习，为了提高学习的速度，当然是因为有之前语言的功底才敢这样子，在学习react的时候看到了js的箭头函数。之前没有了解过，所以特地的学习记录一下。

箭头函数

箭头函数表达式是传统函数表达式的紧凑替代方案，但受到限制且不能在所有情况下使用。

箭头函数和传统函数有区别，限制主要有：

1. 箭头函数没有自己的 this、arguments 或 super 绑定，不应该用作方法。
2. 箭头函数无权访问 new.target 关键字。
3. 箭头函数不适用于调用、应用和绑定方法，这些方法通常依赖于建立作用域。
4. 箭头函数不能用作构造函数。
5. 箭头函数不能在其体内使用 yield。

• 传统js函数和箭头函数对比

// Traditional Anonymous Function
(function (a) {
  return a + 100;
})

// Arrow Function Break Down

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
  return a + 100;
}

// 2. Remove the body braces and word "return" — the return is implied.
(a) => a + 100;

// 3. Remove the argument parentheses
a => a + 100;

箭头函数的 函数体： {} 参数列表： () 都是在可选的。

语法：

// 1. 
param => expression

// 2. 
(param1, paramN) => expression

// 3.
(param1, paramN) => {
  const a = 1;
  return a + param1 + paramN;
}

• 特殊语法

// 无限参数个数
(a, b, ...r) => expression

// 默认值
(a=400, b=20, c) => expression

// 某人构造参数
([a, b] = [10, 20]) => a + b;  // result is 30
({ a, b } = { a: 10, b: 20 }) => a + b; // result is 30

如前所述，箭头函数表达式最适合非方法函数。让我们看看当我们尝试将它们用作方法时会发生什么：

'use strict';

const obj = { // does not create a new scope
  i: 10,
  b: () => console.log(this.i, this),
  c: function () {
    console.log(this.i, this);
  },
}

obj.b(); // prints undefined, Window {...} (or the global object)
obj.c(); // prints 10, Object {...}

箭头函数没有自己的 this:

const obj = {
  a: 10,
};

Object.defineProperty(obj, 'b', {
  get: () => {
    console.log(this.a, typeof this.a, this); // undefined 'undefined' Window {...} (or the global object)
    return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined'
  },
});

因为类的主体具有 this 上下文，箭头函数作为类字段关闭在类的 this 上下文上，并且箭头函数主体内的 this 将正确指向实例（或类本身，对于静态字段）。但是，因为它是一个闭包，而不是函数自己的绑定，所以 this 的值不会根据执行上下文而改变。

箭头函数属性通常被称为“自动绑定方法”，因为与普通方法等效的是：

class C {
  a = 1;
  constructor() {
    this.method = this.method.bind(this);
  }
  method() {
    console.log(this.a);
  }
}

call、apply 和 bind 方法不适合用作箭头函数——因为它们被设计为允许方法在不同的范围内执行——因为箭头函数是根据定义箭头函数的范围来建立 this 的。

b

参考

• 箭头函数
• react 箭头函数的作用