ES6：箭头函数

引言

ES6 提供了各种特性来使开发人员的生活更轻松。箭头函数是 ES6 或 ECMAScript 2015 提供的广泛使用的特性之一。

箭头函数是定义 JavaScript 函数的新 ES6 语法。它节省了几个按键，并且与 ES5 语法相比，使代码看起来更简洁。它通常被称为“胖箭头函数”，其语法类似于 C# 匿名函数。

它使用 =>  标记，被称为“映射到”或“指向”符号来定义函数。

使用箭头函数时，避免了 function 和 return 关键字。当定义包含多行时，则必须使用 {  } 花括号。

让我们看一些例子来更好地理解。

函数用法

无参数函数

ES5

function print()
{
   return 'Hello World'; // Output: 'Hello World'
}

ES6 

var print = () => 'Hello World';

带一个参数的函数

ES5

function print(name)
{
   return name; 
}

print('Hello World!'); // Output: 'Hello World'

ES6 

var print = (name) => name;

带多个参数的函数

ES5

function getProduct(a, b)
{
   return a * b; 
}

getProduct(5,6); // Output: 30

ES6 

var print = (name) => name;

对象字面量

箭头函数可用于返回包含变量和函数的对象字面量。但是，**this** 关键字的处理方式存在一些差异。箭头函数使用词法作用域（内部函数包含父函数的作用域，即使父函数已经返回）来确定 ‘this’ 关键字的值。

使用 ES5 语法时，this 关键字返回当前上下文，但在箭头函数的情况下，它返回全局上下文。

举个例子：

var calculate = {
	var multiplier: 10;
	getProduct: function(){
	console.log(this);
}

calculate.getProduct(); //  Object { multiplier: 10}

}

使用箭头函数

var calculate = {
	var multiplier: 10;
	getProduct: () => console.log(this);
}

calculate.getProduct(); //  Window{}
}

返回函数的函数

Var calculate = {
	Var multiplier: 10;
	getProduct: function(){
		return () => console.log(this.multiplier);
}
}

calculate.getProduct()(); // 10

它返回 10，因为 getProduct 是这里的函数，这就是我们正在处理的上下文。

Bind、Call 和 Apply 方法不适用于箭头函数，它会忽略更新对象而不报错。

var calculate = {
	var multiplier: 10;
	getProduct: function(){
		return () => console.log(this.multiplier);
}
}

var newObject = {
	multiplier: 20
}

calculate.getProduct().bind(newObject); //   10

处理事件处理程序

在 ES5 中，处理事件处理程序时，调用对象会将当前元素的上下文传递给被调用者，这使得访问全局 this 变得困难。

document.addEventListerner('click', function(){
	    console.log(this); // #document
    }
)

document.addEventListener('click', () => console.log(this)); // Window{ }