2020-12-24

关于ES6中箭头函数之箭头函数简介与语法

一、箭头函数简介

在ECMAScript中，箭头函数是最有趣的新增特性。顾名思义，箭头函数就是一种使用箭头（=>）定义函数的新语法。与传统的JavaScript函数有些不同，主要集中在以下几个方面：

1. - 没有this、super、argument和new.target绑定 箭头函数中的这些值由外围最近一层非箭头函数决定。
2. - 不能通过new关键字调用箭头函数中没有[[Construct]]方法，所以不能被用作构造函数。如果用new关键字调用箭头函数，则程序会抛出错误。
3. - 没有原型由于不可以通过new关键字调用箭头函数，因而没有构造原型的需求，所以箭头函数不存在prototype这个属性。
4. - 不可以改变this的绑定 函数内部的this值不可以被改变，在函数生命周期内始终保持一致
5. - 不支持arguments对象 箭头函数没有arguments绑定，所以必须通过命名参数和不定参数这两种形式访问函数的参数。
6. - 不支持重复的命名参数 无论在严格还是非严格模式下，箭头函数都不支持重复的命名参数，而在传统函数的规定中，只有在严格模式下才不能有重复的的命名参数。

这些差异的产生有几个原因：首先，也是最重要的，this绑定是JavaScript程序中一个常见的错误来源，在函数内很容易就对this的值失去控制，经常导致程序出现意想不到的行为，箭头函数就是为了消除这方面的烦恼，而没有this绑定；其次，如果限制箭头函数的this值，简化代码执行过程，则JavaScript引擎可以更轻松地优化这些操作，而常规函数往往同时会作为构造函数使用或者以其他方式对其修改。
在箭头函数内，其余的差异主要是减少错误以及理清模糊不清的地方。这样一来，JavaScript引擎就可以更好地优化箭头函数的执行过程。

箭头函数同样也有一个name属性，这与其他函数的规则相同。

二、箭头函数语法

箭头函数的语法多变，根据实际的使用场景有多种形式。所有变种都由函数参数、箭头、函数体组成，根据使用的需求，参数和函数体可以分别采取多种不同的形式。举个例子，下边这段代码中，箭头函数中采用了单一参数，并且只是简单的返回了参数的值：

let reflect = value => value;

//实际相当于：
let reflect = function(value) {
  return value;
};

当箭头函数只有一个参数时，可以直接写参数名，箭头函数紧随其后，箭头右侧的表达式被求值后立即返回。即使没有显式的返回语句，这个箭头函数也可以返回传入的第一个参数，不需要更多的语法铺垫。

如果要传入两个或这两个以上的参数，就要在参数两侧添加一对小括号，像这样：

let sum = (num1,num2) => num1 + num2;

//实际上相当于：
let sum = function(num1,num2) {
	return num1 + num2;
};

这里的sum()函数接受两个参数，将他们简单相加后返回最终结果，它与reflect()函数唯一不同是：它的参数时被包裹在小括号中，并用逗号隔开的。

如果函数没有参数，也要在声明时写一组没有内容的小括号，就像样：

let getName = () => "你好";

//实际相当于：
let getName = function() {
	return "你好";
};

如果你希望为函数编写由多个表达式组成的更传统的函数体，那么需要用花括号包裹函数体，并显式地定义一个返回值，就像这个版本的sum()函数一样：

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

//实际相当于：
let sum = function(num1,num2) {
	return num1 + num2;
};

除了arguments对象不可用以外，某种程度上你都可以将花括号里的代码视作传统的函数体定义。

如果想创建一个空函数，需要写一对没有内容的花括号，像这样：

let doNothing = () => {};

//实际相当于：
let doNothing = function() {};

花括号代表函数体的部分，到目前为止一切运行良好。但是如果想让箭头函数返回一个对象字面量，则需要将字面量包裹在小括号里。举个例子：

let getTempItem = id => ({id: id,name: "Temp"});

//实际相当于：
let getTempItem = function(id) {
	return {
		id: id;
		name: "Temp"
	};
};

将对象字面量包裹在小括号中是为了将其与函数体区分开来。