11-箭头符号

6.7　箭头符号

ES6引入了一个新的语法叫作箭头符号（也称为“大箭头”语法，因为这里的箭头使用了等于号，而非横线）。从本质上说这也是一种语法糖（却跟语法糖有很大的区别，稍后会讲到），它可以减少敲击function这个单词的次数，以及敲击花括号的次数。

箭头函数允许使用以下3种方式来简化语法：

• 可以省略 function 这个单词。
• 如果函数只有一个参数，则可以省略花括号。
• 如果函数体是一个单独表达式，则可以省略花括号和返回语句。

箭头函数大多是匿名的。但仍然可以把它们赋给变量，不过不能再使用 function 关键字创建一个具名函数。

以下这些例子都与函数表达式等效：

const f1 = function() { return "hello!"; }
// OR
const f1 = () => "hello!";
const f2 = function(name) { return 'Hello, ${name}!'; }
// OR
const f2 = name => 'Hello, ${name}!';
const f3 = function(a, b) { return a + b; }
// OR
const f3 = (a,b) => a + b;

这些例子看起来好像有点假。通常，如果需要一个具名函数，只要使用一般的函数声明就行了。当需要创建或者传递一个匿名函数时，箭头函数是最实用的，从第8章开始大家会经常见到这种用法。

箭头函数跟普通函数之间的主要区别是： this 是跟语句绑定起来的，就像其他变量一样。回想一下前面的 greetBackwards 的例子。通过箭头函数，可以在函数体中使用 this ：

const o = {
   name: 'Julie',
   greetBackwards: function() {
      const getReverseName = () => {
         let nameBackwards = '';
         for(let i=this.name.length-1; i>=0; i--) {
            nameBackwards += this.name[i];
         }
         return nameBackwards;
      };
      return '${getReverseName()} si eman ym ,olleH';
   },
};
o.greetBackwards();

箭头函数与普通函数还有两个小区别：不能把它们当作对象构造器（详情见第9章），同时，指定的参数变量在箭头函数中也不生效（这里就没有必要使用展开操作符了。）