ECMAScript6语法：箭头函数

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

1、箭头函数的语法

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

javascript 复制代码

let count = price => price;

console.log(count(6.6));//6.6

//相当于
function count(price){
    return price;
}

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

javascript 复制代码

let count = (price,number) => `${price},${number}`;

console.log(count(6.6, 10));	//6.6,10

//相当于
function count(price,number){
    return price + "," + number;
}

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

javascript 复制代码

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

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

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

javascript 复制代码

let count = (price,number) => {
    let total = price * number;
    return total;
};

console.log(count(6.6, 10));	//66

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

javascript 复制代码

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 会被设置为全局对象。示例代码如下：

javascript 复制代码

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

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