ECMAScript6语法：箭头函数

在 ES6 中，可以使用箭头“=>”定义函数。根据不同的使用场景，箭头函数有多种不同的语法。箭头函数的基本组成包括函数参数、箭头和函数体。

1、箭头函数的语法

第一种情况：箭头函数中只有一个参数，函数体中只有一条语句，示例代码如下：

let count = price => price;console.log(count(6.6));//6.6//相当于
function count(price){return price;
}

第二种情况：箭头函数中参数多于一个，需要使用小括号将参数包含起来，示例代码如下：

let count = (price,number) => `${price},${number}`;console.log(count(6.6, 10));	//6.6,10//相当于
function count(price,number){return price + "," + number;
}

第三种情况：箭头函数中没有参数，需要使用一对空的小括号，示例代码如下：

let count = () => "商品名称：品牌相机";console.log(count());//商品名称：品牌相机

第四种情况：箭头函数中函数体中有多条语句，需要使用大括号将函数体包含起来，示例代码如下：

let count = (price,number) => {let total = price * number;return total;
};console.log(count(6.6, 10));	//66

第五种情况：箭头函数中返回值是一个对象字面量，需要使用小括号将对象字面量包含起来，示例代码如下：

let count = (price,number) => ({price:price,number:number});console.log(count(6.6, 10));	//{price: 6.6, number: 10}

2、箭头函数中的 this

在 JavaScript 中，this 关键字的指向是可以改变的，它会根据当前上下文的变化而变化。为了解决 this 关键字指向的问题，可以使用 bind() 方法将 this 绑定到某个对象上。而在箭头函数中并没有 this 绑定，如果箭头函数包含在非箭头函数中，那么箭头函数中的 this 指向的是最近的非箭头函数中的 this，否则，this 会被设置为全局对象。示例代码如下：

var type = "手机";
var obj = {type: "电脑",show: function(){setTimeout(() => console.log(this.type), 3000);}
}
obj.show();      //电脑

上述代码中，在调用 setTimeout() 方法时使用了箭头函数，箭头函数中的 this 和 show() 方法中的 this 一致，而这个 this 指向的是 obj 对象，所以在调用 obj 对象的 show() 方法时显示的结果是“电脑”。