ES6 --- 深度理解箭头函数

箭头函数，基础知识

创建函数还有另外一种非常简单的语法，并且这种方法通常比函数表达式更好。

它被称为“箭头函数”，因为它看起来像这样：

let func = (arg1, arg2, ..., argN) => expression;

这里创建了一个函数 func，它接受参数 arg1..argN，然后使用参数对右侧的 expression 求值并返回其结果。

换句话说，它是下面这段代码的更短的版本：

let func = function(arg1, arg2, ..., argN) {
  return expression;
};

让我们来看一个具体的例子：

let sum = (a, b) => a + b;

/* 这个箭头函数是下面这个函数的更短的版本：

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

可以看到 (a, b) => a + b 表示一个函数接受两个名为 a 和 b 的参数。在执行时，它将对表达式 a + b 求值，并返回计算结果。

• 如果我们只有一个参数，还可以省略掉参数外的圆括号，使代码更短。

  例如：

  let double = n => n * 2;
  // 差不多等同于：let double = function(n) { return n * 2 }
  
  alert( double(3) ); // 6
  

• 如果没有参数，括号将是空的（但括号应该保留）：

  let sayHi = () => alert("Hello!");
  
  sayHi();
  

箭头函数可以像函数表达式一样使用。

例如，动态创建一个函数：

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  () => alert('Hello') :
  () => alert("Greetings!");

welcome();

一开始，箭头函数可能看起来并不熟悉，也不容易读懂，但一旦我们看习惯了之后，这种情况很快就会改变。

箭头函数对于简单的单行行为（action）来说非常方便，尤其是当我们懒得打太多字的时候。

多行的箭头函数

上面的例子从 => 的左侧获取参数，然后使用参数计算右侧表达式的值。

但有时我们需要更复杂一点的东西，比如多行的表达式或语句。这也是可以做到的，但是我们应该用花括号括起来。然后使用一个普通的 return 将需要返回的值进行返回。

就像这样：

let sum = (a, b) => {  // 花括号表示开始一个多行函数
  let result = a + b;
  return result; // 如果我们使用了花括号，那么我们需要一个显式的 “return”
};

alert( sum(1, 2) ); // 3

总结

对于一行代码的函数来说，箭头函数是相当方便的。它具体有两种：

1. 不带花括号：(...args) => expression — 右侧是一个表达式：函数计算表达式并返回其结果。
2. 带花括号：(...args) => { body } — 花括号允许我们在函数中编写多个语句，但是我们需要显式地 return 来返回一些内容。

深入理解箭头函数

让我们深入研究一下箭头函数。

箭头函数不仅仅是编写简洁代码的“捷径”。它还具有非常特殊且有用的特性。

JavaScript 充满了我们需要编写在其他地方执行的小函数的情况。

例如：

• arr.forEach(func) —— forEach 对每个数组元素都执行 func。
• setTimeout(func) —— func 由内建调度器执行。
• ……还有更多。

JavaScript 的精髓在于创建一个函数并将其传递到某个地方。

在这样的函数中，我们通常不想离开当前上下文。这就是箭头函数的主战场啦。

箭头函数没有 “this”

箭头函数没有 this。如果访问 this，则会从外部获取。

例如，我们可以使用它在对象方法内部进行迭代：

let group = {
  title: "Our Group",
  students: ["John", "Pete", "Alice"],

  showList() {
    this.students.forEach(
      student => alert(this.title + ': ' + student)
    );
  }
};

group.showList();

这里 forEach 中使用了箭头函数，所以其中的 this.title 其实和外部方法 showList 的完全一样。那就是：group.title。

如果我们使用正常的函数，则会出现错误：

let group = {
  title: "Our Group",
  students: ["John", "Pete", "Alice"],

  showList() {
    this.students.forEach(function(student) {
      // Error: Cannot read property 'title' of undefined
      alert(this.title + ': ' + student);
    });
  }
};

group.showList();

报错是因为 forEach 运行它里面的这个函数，但是这个函数的 this 为默认值 this=undefined，因此就出现了尝试访问 undefined.title 的情况。

但箭头函数就没事，因为它们没有 this。

不能对箭头函数进行 new 操作

不具有 this 自然也就意味着另一个限制：箭头函数不能用作构造器（constructor）。不能用 new 调用它们。

箭头函数 VS bind

箭头函数 => 和使用 .bind(this) 调用的常规函数之间有细微的差别：

• .bind(this) 创建了一个该函数的“绑定版本”。
• 箭头函数 => 没有创建任何绑定。箭头函数只是没有 this。this 的查找与常规变量的搜索方式完全相同：在外部词法环境中查找。

箭头函数没有 “arguments”

箭头函数也没有 arguments 变量。

当我们需要使用当前的 this 和 arguments 转发一个调用时，这对装饰器（decorators）来说非常有用。

例如，defer(f, ms) 获得了一个函数，并返回一个包装器，该包装器将调用延迟 ms 毫秒：

function defer(f, ms) {
  return function() {
      //  这里的this 跟 arguments 都是return 的function获取的
    setTimeout(() => f.apply(this, arguments), ms);
  };
}

function sayHi(who) {
  alert('Hello, ' + who);
}

let sayHiDeferred = defer(sayHi, 2000);
sayHiDeferred("John"); // 2 秒后显示：Hello, John

不用箭头函数的话，可以这么写：

function defer(f, ms) {
  return function(...args) {
    let ctx = this;
    setTimeout(function() {
        //  如果不用ctx 保存function 中的this的话，setTimeout里的this将会是window而不是外部函数的this
        //  不在外部函数中接受参数，并且传进内部函数的apply的话，直接用arguments接受也是undefined
      return f.apply(ctx, args);
    }, ms);
  };
}

//  错误例子
function defer(f, ms) {
  return function() {
		console.log(arguments);  //  "John"
    setTimeout(function() {
			console.log(arguments); //   undefined
			f.apply(this, arguments)
		}, ms);
  };
}

在这里，我们必须创建额外的变量 args 和 ctx，以便 setTimeout 内部的函数可以获取它们。

总结

箭头函数：

• 没有 this
• 没有 arguments
• 不能使用 new 进行调用
• 它们也没有 super，但目前我们还没有学到它。

这是因为，箭头函数是针对那些没有自己的“上下文”，但在当前上下文中起作用的短代码的。并且箭头函数确实在这种使用场景中大放异彩。