我更喜欢在任何不需要访问local this的时候使用箭头函数，因为箭头函数不绑定自己的this、参数、super或new.target。

除了到目前为止的精彩回答之外，我还想提出一个非常不同的原因，为什么箭头函数在某种意义上从根本上优于“普通”JavaScript函数。

为了便于讨论，让我们暂时假设我们使用TypeScript或Facebook的“Flow”之类的类型检查器。考虑下面的玩具模块，它是有效的ECMAScript 6代码加上流类型注释(我将在这个答案的末尾包括未类型化的代码，它实际上是由Babel产生的，所以它实际上可以运行):

导出类C { N:数字; F1: number => number; F2: number => number; 构造函数(){ 这一点。N = 42; 这一点。F1 = (x:number) => x + this.n; 这一点。F2 =函数(x:number){返回x + this.n;}; ｝ ｝

现在看看当我们使用来自不同模块的类C时会发生什么，就像这样:

let o = {f1: new C()。f1, f2: new C()。F2, n: "foo"}; 设n1: number = o.f1(1);// n1 = 43 Console.log (n1 === 43);/ /正确的 设n2: number = o.f2(1);// n2 = "1foo" Console.log (n2 === "1foo");// true，不是字符串!

正如您所看到的，类型检查器在这里失败了:f2应该返回一个数字，但它返回了一个字符串!

更糟糕的是，似乎没有任何类型检查器可以处理普通(非箭头)JavaScript函数，因为f2的“this”不会出现在f2的参数列表中，因此“this”的所需类型不可能作为注释添加到f2。

这个问题也会影响不使用类型检查器的人吗?我认为是这样的，因为即使我们没有静态类型，我们也认为它们就在那里。(“第一个参数必须是一个数字，第二个参数必须是一个字符串”等等)一个隐藏的“this”参数可能在函数体中使用，也可能不使用，这使得我们的心理簿记更加困难。

下面是可运行的非类型化版本，由Babel生成:

C类{ 构造函数(){ 这一点。N = 42; 这一点。F1 = x => x + this.n; 这一点。F2 =函数(x){返回x + this.n;}; ｝ ｝ let o = {f1: new C()。f1, f2: new C()。F2, n: "foo"}; 设n1 = o.f1(1);// n1 = 43 Console.log (n1 === 43);/ /正确的 设n2 = o.f2(1);// n2 = "1foo" Console.log (n2 === "1foo");// true，不是字符串!

创建箭头函数是为了简化函数范围，并通过简化this关键字来解决它。它们使用了=>语法，它看起来像一个箭头。

备注:不替换已有功能。如果你用箭头函数替换所有的函数语法，它不会在所有情况下都有效。

让我们看一看现有的ES5语法。如果this关键字在对象的方法(属于对象的函数)中，它指的是什么?

var Actor = {
  name: 'RajiniKanth',
  getName: function() {
     console.log(this.name);
  }
};
Actor.getName();

上面的代码片段将引用一个对象并打印出名称“RajiniKanth”。让我们探索下面的代码片段，看看这里会指出什么。

var Actor = {
  name: 'RajiniKanth',
  movies: ['Kabali', 'Sivaji', 'Baba'],
  showMovies: function() {
   this.movies.forEach(function(movie) {
     alert(this.name + " has acted in " + movie);
   });
  }
};

Actor.showMovies();

如果this关键字在method的函数中呢?

这里this指的是窗口对象，而不是内部函数，因为它超出了作用域。因此，总是引用它所在函数的所有者，在这种情况下——因为它现在超出了作用域——是window/global对象。

当它在对象的方法内部时，函数的所有者就是该对象。因此，this关键字被绑定到对象。然而，当它在函数内部时，无论是单独的还是在另一个方法中，它总是引用窗口/全局对象。

var fn = function(){
  alert(this);
}

fn(); // [object Window]

我们的ES5本身就有解决这个问题的方法。让我们在深入ES6箭头函数之前研究一下如何解决它。

通常你会在方法的内部函数之外创建一个变量。现在' forEach '方法可以访问这个对象，从而访问对象的属性及其值。

var Actor = {
  name: 'RajiniKanth',
  movies: ['Kabali', 'Sivaji', 'Baba'],
  showMovies: function() {
   var _this = this;
   this.movies.forEach(function(movie) {
     alert(_this.name + " has acted in " + movie);
   });
  }
};

Actor.showMovies();

使用bind将引用该方法的this关键字附加到该方法的内部函数。

var Actor = {
  name: 'RajiniKanth',
  movies: ['Kabali', 'Sivaji', 'Baba'],
  showMovies: function() {
   this.movies.forEach(function(movie) {
     alert(this.name + " has acted in " + movie);
   }.bind(this));
  }
};

Actor.showMovies();

现在，使用ES6的箭头函数，我们可以以更简单的方式处理词汇范围问题。

var Actor = {
  name: 'RajiniKanth',
  movies: ['Kabali', 'Sivaji', 'Baba'],
  showMovies: function() {
   this.movies.forEach((movie) => {
     alert(this.name + " has acted in " + movie);
   });
  }
};

Actor.showMovies();

箭头函数更像函数语句，只是它们将this绑定到父作用域。如果箭头函数在顶部作用域，则this参数将引用窗口/全局作用域，而常规函数内部的箭头函数的this参数将与其外部函数相同。

对于箭头函数，它在创建时被绑定到外围作用域，并且不能更改。new操作符、bind、call和apply对此没有影响。

var asyncFunction = (param, callback) => {
  window.setTimeout(() => {
  callback(param);
  }, 1);
};

// With a traditional function if we don't control
// the context then can we lose control of `this`.
var o = {
  doSomething: function () {
  // Here we pass `o` into the async function,
  // expecting it back as `param`
  asyncFunction(o, function (param) {
  // We made a mistake of thinking `this` is
  // the instance of `o`.
  console.log('param === this?', param === this);
  });
  }
};

o.doSomething(); // param === this? false

在上面的例子中，我们失去了对它的控制。我们可以通过使用this的变量引用或bind来解决上面的例子。在ES6中，管理this变得更容易，因为它绑定到词法作用域。

var asyncFunction = (param, callback) => {
  window.setTimeout(() => {
  callback(param);
  }, 1);
};

var o = {
  doSomething: function () {
  // Here we pass `o` into the async function,
  // expecting it back as `param`.
  //
  // Because this arrow function is created within
  // the scope of `doSomething` it is bound to this
  // lexical scope.
  asyncFunction(o, (param) => {
  console.log('param === this?', param === this);
  });
  }
};

o.doSomething(); // param === this? true

何时不使用箭头函数

在一个对象文字的内部。

var Actor = {
  name: 'RajiniKanth',
  movies: ['Kabali', 'Sivaji', 'Baba'],
  getName: () => {
     alert(this.name);
  }
};

Actor.getName();

演员。getName是用一个箭头函数定义的，但在调用时它警告为未定义，因为this.name是未定义的，因为上下文仍然是窗口。

发生这种情况是因为箭头函数在词法上将上下文绑定到窗口对象…也就是外部作用域。执行this.name相当于window.name，而window.name是未定义的。

对象原型

同样的规则也适用于在原型对象上定义方法。而不是使用箭头函数来定义sayCatName方法，这会带来一个不正确的上下文窗口:

function Actor(name) {
  this.name = name;
}
Actor.prototype.getName = () => {
  console.log(this === window); // => true
  return this.name;
};
var act = new Actor('RajiniKanth');
act.getName(); // => undefined

调用构造函数

这在构造调用中是新创建的对象。当执行new Fn()时，构造函数Fn的上下文是一个新对象:this instanceof Fn === true。

这是从封闭上下文(即外部作用域)中设置的，这使得它没有分配给新创建的对象。

var Message = (text) => {
  this.text = text;
};
// Throws "TypeError: Message is not a constructor"
var helloMessage = new Message('Hello World!');

带有动态上下文的回调

箭头函数在声明时静态地绑定上下文，不可能使其动态。将事件监听器附加到DOM元素是客户端编程中的常见任务。事件以此作为目标元素触发处理程序函数。

var button = document.getElementById('myButton');
button.addEventListener('click', () => {
  console.log(this === window); // => true
  this.innerHTML = 'Clicked button';
});

这是在全局上下文中定义的箭头函数中的窗口。当单击事件发生时，浏览器尝试调用带有按钮上下文的处理程序函数，但箭头函数不会更改其预定义上下文。这一点。innerHTML相当于window。innerHTML，没有任何意义。

你必须应用一个函数表达式，它允许改变这取决于目标元素:

var button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log(this === button); // => true
  this.innerHTML = 'Clicked button';
});

当用户单击按钮时，处理程序函数中的这个就是按钮。因此这个问题。innerHTML = 'Clicked button'正确修改按钮文本，以反映单击状态。

参考文献

何时“不”使用箭头函数

简单来说，

var a = 20; function a() {this.a = 10; console.log(a);}
//20, since the context here is window.

另一个实例:

var a = 20;
function ex(){
    this.a = 10;
    function inner(){
        console.log(this.a); // Can you guess the output of this line?
    }
    inner();
}
var test = new ex();

答:控制台会打印20个。

原因是无论何时函数执行它自己的堆栈被创建，在这个例子中，ex函数使用new操作符执行，因此将创建一个上下文，而当inner被执行时，JavaScript将创建一个新的堆栈，并在全局上下文中执行内部函数，尽管有一个局部上下文中。

因此，如果我们想让内部函数有一个局部上下文，也就是ex，那么我们需要将上下文绑定到内部函数。

箭头可以解决这个问题。它们不采用全局上下文，而是采用本地上下文(如果存在的话)。在*给出的例子中，它将接受new ex()如下所示。

因此，在所有绑定是显式的情况下，箭头默认解决了这个问题。

我更喜欢在任何不需要访问local this的时候使用箭头函数，因为箭头函数不绑定自己的this、参数、super或new.target。

我仍然坚持我在第一个帖子中所写的一切。然而，从那时起，我对代码风格的看法有所发展，所以我对这个问题有了一个新的答案，它建立在我上一个问题的基础上。

关于词汇this

在我最后的回答中，我故意回避了我对这种语言的潜在信念，因为它与我所做的论点没有直接关系。尽管如此，如果没有明确地说明这一点，我可以理解为什么许多人在发现箭头如此有用时，只是拒绝我的不使用箭头的建议。

我的信念是:我们一开始就不应该使用它。因此，如果有人故意避免在代码中使用this，那么箭头的“词法上的this”特性几乎没有价值。此外，在这是一件坏事的前提下，arrow对它的处理并不是一件“好事”;相反，它更像是对另一种糟糕的语言功能的损害控制形式。

我认为有些人不会遇到这种情况，但即使遇到这种情况的人，他们也一定会发现自己在代码库中工作，每个文件都会出现100次这种情况，合理的人所希望的只是一点点(或很多)损害控制。所以箭头在某种程度上是好的，当它们让糟糕的情况变得更好的时候。

即使使用箭头比不使用箭头更容易编写代码，但使用箭头的规则仍然非常复杂(参见:current thread)。因此，正如您所要求的那样，指导方针既不“清晰”也不“一致”。即使程序员知道箭头的模糊性，我认为他们还是会耸耸肩接受它们，因为词汇的价值盖过了它们。

所有这些都是以下认识的序言:如果一个人不使用这个，那么箭头通常引起的关于这个的模糊性就变得无关紧要了。在这种情况下，箭头变得更加中性。

关于简洁的语法

当我写下我的第一个答案时，我认为即使是盲目地坚持最佳实践也是值得付出的代价，如果这意味着我可以生成更完美的代码。但我最终意识到，简洁可以作为一种抽象形式，也可以提高代码质量——这足以证明有时偏离最佳实践是正确的。

换句话说:该死，我也想要一行函数!

关于指导方针

考虑到中性箭头函数的可能性，以及简洁性值得追求，我提供了以下更宽松的指导原则:

ES6函数表示法指南:

不要用这个。 对按名称调用的函数使用函数声明(因为它们是提升的)。 回调时使用箭头函数(因为它们更简洁)。