头函数（Arrow Function）是ES6新增的特性，在网上看了一篇个人博客的讲解，写的例子里面居然还有声明的变量没有被使用，却还在招揽学生做IT培训，真的误人子弟。

一个简单的例子

为了说明箭头函数，我们先写个简单的代码：

const domain_list=[
  'www.abot.cn',
  'www.tseo.cn',
  'www.weiduke.com',
  'yanyubao.tseo.cn'
];

console.log(domain_list.map(domain_item=> domain_item.length));
// expected output: Array [11, 11, 15, 16]

关于JavaScript中map函数的使用，这里不赘述，不懂的抓紧恶补。

重点看第8行。

domain_item=> domain_item.length

等价于以下写法：

function(domain_item) {return domain_item.length}

所以以上代码的ES5的写法为：

const domain_list=[
  'www.abot.cn',
  'www.tseo.cn',
  'www.weiduke.com',
  'yanyubao.tseo.cn'
];

console.log(domain_list.map(function(domain_item) {
	return domain_item.length;
}));
// expected output: Array [11, 11, 15, 16]

箭头函数基本语法

总结总结一下，ES6的基本语法

(param1, param2, …, paramN)=> { statements }

(param1, param2, …, paramN)=> expression

//相当于：(param1, param2, …, paramN)=>{ return expression; }

// 当只有一个参数时，圆括号是可选的：

(singleParam)=> { statements }

singleParam=> { statements }

// 没有参数的函数应该写成一对圆括号。

()=> { statements }

对照以上的例子，什么是箭头函数应该一目了然了。

箭头函数没有单独的this值

this一般是这样被定义的：

• 如果是该函数是一个对象的方法，则它的this指针指向这个对象
• 在严格模式下的函数调用下，this指向undefined
• 如果是该函数是一个构造函数，this指针指向一个新的对象

this的弊端

function Person() {
  // Person() 构造函数定义 `this`作为它自己的实例.
  this.age=0;

  setInterval(function growUp() {
    // 在非严格模式, growUp()函数定义 `this`作为全局对象,
    // 与在 Person()构造函数中定义的 `this`并不相同.
    this.age++;
  }, 1000);
}

var p=new Person();

在ECMAScript 3/5中，通过将this值分配给封闭的变量，可以解决this问题。

function Person() {
  var that=this;
  that.age=0;

  setInterval(function growUp() {
    // 回调引用的是`that`变量, 其值是预期的对象.
    that.age++;
  }, 1000);
} 

或者，可以创建绑定函数，以便将预先分配的this值传递到绑定的目标函数（上述示例中的growUp()函数）。

箭头函数的解决方案

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。因此，在下面的代码中，传递给setInterval的函数内的this与封闭函数中的this值相同：

function Person(){
  this.age=0;

  setInterval(()=> {
    this.age++; // |this| 正确地指向 p 实例
  }, 1000);
}

var p=new Person();

如果不理解以上代码，那么再强调一遍：因为箭头函数没有this，所以setInterval函数中的箭头函数的this，只能是他的上一级函数的this。如果说到这样还不理解，建议恶补语文。

高级语法和进阶

箭头函数的进阶知识，包括：

• 1、高级语言规则
• 2、严格模式下的使用
• 3、call和apply的调用

感兴趣的小伙伴可以自个去研究。

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

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

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

例如：

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

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

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

一、箭头函数没有 “this”

正如我们在 对象方法，"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() {
    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() {
      return f.apply(ctx, args);
    }, ms);
  };
}

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

三、总结

箭头函数：

• 没有 this
• 没有 arguments
• 不能使用 new 进行调用
• 它们也没有 super，但目前我们还没有学到它。我们将在 类继承 一章中学习它。

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