ES2015中的箭头函数提供了更简洁的语法。

• 我现在可以用箭头函数替换所有函数声明/表达式吗？
• 我要注意什么？

例子：

构造函数

function User(name) {
  this.name = name;
}

// vs

const User = name => {
  this.name = name;
};

原型方法

User.prototype.getName = function() {
  return this.name;
};

// vs

User.prototype.getName = () => this.name;

对象（文字）方法

const obj = {
  getName: function() {
    // ...
  }
};

// vs

const obj = {
  getName: () => {
    // ...
  }
};

回呼

setTimeout(function() {
  // ...
}, 500);

// vs

setTimeout(() => {
  // ...
}, 500);

可变函数

function sum() {
  let args = [].slice.call(arguments);
  // ...
}

// vs
const sum = (...args) => {
  // ...
};

tl; dr： 不！箭头函数和函数声明/表达式不等效，不能盲目替换。
如果要替换的函数未使用this，arguments并且未使用调用new，则为是。

如此频繁：这取决于。箭头函数的行为与函数声明/表达式的行为不同，因此让我们首先看一下它们之间的区别：

1.词法this和arguments

箭函数没有自己的this或arguments结合。相反，这些标识符像任何其他变量一样在词法范围内解析。这意味着，一个箭头函数内部，this并且arguments指的值this和arguments在箭头功能环境定义中（即，“外”的箭头功能）：

// Example using a function expression
function createObject() {
  console.log('Inside `createObject`:', this.foo);
  return {
    foo: 42,
    bar: function() {
      console.log('Inside `bar`:', this.foo);
    },
  };
}

createObject.call({foo: 21}).bar(); // override `this` inside createObject

// Example using a arrow function
function createObject() {
  console.log('Inside `createObject`:', this.foo);
  return {
    foo: 42,
    bar: () => console.log('Inside `bar`:', this.foo),
  };
}

createObject.call({foo: 21}).bar(); // override `this` inside createObject

在函数表达式的情况下，this指的是在中创建的对象createObject。在箭头功能的情况下，this指的this是createObject自身。

如果需要访问this当前环境，这使箭头功能很有用：

// currently common pattern
var that = this;
getData(function(data) {
  that.data = data;
});

// better alternative with arrow functions
getData(data => {
  this.data = data;
});

请注意，这也意味着无法this通过.bind或设置箭头功能.call。

如果您不太熟悉this，请考虑阅读

• MDN-此
• YDKJS-此和对象原型

2.不能使用调用箭头功能 new

ES2015区分了可调用的功能和可构造的功能。如果函数是可构造的，则可以使用调用它 new，即new User()。如果一个函数是可调用的，则可以不进行调用new（即正常的函数调用）。

通过函数声明/表达式创建的函数是可构造的和可调用的。
箭头函数（和方法）只能调用。 class构造函数只能是可构造的。

如果您试图调用不可调用的函数或构造一个不可构造的函数，则会出现运行时错误。

知道了这一点，我们可以陈述以下内容。

可更换的：

• 不使用this或的函数arguments。
• 用于的功能 .bind(this)

不可更换：

• 构造函数
• 添加到原型的函数/方法（因为它们通常使用this）
• 可变参数函数（如果使用）arguments（请参见下文）

让我们使用您的示例仔细看一下：

构造函数

这将无法使用，因为无法使用调用箭头函数new。继续使用函数声明/表达式或使用class。

原型方法

很有可能不是，因为原型方法通常用于this访问实例。如果他们不使用this，则可以替换它。但是，如果您主要关注简洁语法，请使用class其简洁方法语法：

class User {
  constructor(name) {
    this.name = name;
  }

  getName() {
    return this.name;
  }
}

对象方法

对于对象文字中的方法类似。如果方法要通过引用对象本身this，请继续使用函数表达式，或使用新的方法语法：

const obj = {
  getName() {
    // ...
  },
};

回呼

这取决于。如果要别名外部this或正在使用，则绝对应该替换它.bind(this)：

// old
setTimeout(function() {
  // ...
}.bind(this), 500);

// new
setTimeout(() => {
  // ...
}, 500);

但是：如果调用回调的代码显式设置this为特定值（如事件处理程序，尤其是jQuery），并且回调使用this（或arguments），则不能使用箭头函数！

可变函数

由于箭头函数没有自己的功能arguments，因此不能简单地用箭头函数替换它们。但是，ES2015引入了一种替代方法arguments：rest参数。

// old
function sum() {
  let args = [].slice.call(arguments);
  // ...
}

// new
const sum = (...args) => {
  // ...
};

相关问题：

• 什么时候应该在ECMAScript 6中使用Arrow函数？
• ES6箭头函数是否有自己的参数？
• ES6箭头功能和与Function.prototype.bind绑定的功能之间有什么区别（如果有）？
• 如何使用箭头函数（公共类字段）作为类方法？

更多资源：

• MDN-箭头功能
• YDKJS-箭头功能

箭头功能=>迄今为止最好的ES6功能。它们是我不断使用的ES6的强大补充。

等等，您不能在代码中的任何地方使用箭头功能，它在所有情况下this都无法正常工作，例如箭头功能不可用。毫无疑问，箭头功能是一个伟大的附加功能，它使代码更简单。

但是，当需要动态上下文时，不能使用箭头功能：定义方法，使用构造函数创建对象，在处理事件时从中获取目标。

不应使用箭头功能，因为：

1. 他们没有 this

   它使用“词法作用域”来确定“”的值this。用简单的词法作用域定义，它this在函数主体内部使用“ ”。

2. 他们没有 arguments

   箭头函数没有arguments对象。但是使用rest参数可以实现相同的功能。

   let sum = (...args) => args.reduce((x, y) => x + y, 0) sum(3, 3, 1) // output - 7 `

3. 它们不能与 new

   Arrow函数不能为构造函数，因为它们没有原型属性。

何时使用箭头功能，何时不使用：

1. 不要使用将函数作为对象文字中的属性添加，因为我们无法访问它。
2. 函数表达式最适合对象方法。箭头功能是最好的回调或方法，如map，reduce或forEach。
3. 对要通过名称调用的函数使用函数声明（因为它们已被吊起）。
4. 使用箭头函数进行回调（因为它们倾向于更短）。

要将箭头函数与一起使用function.prototype.call，我在对象原型上创建了一个辅助函数：

  // Using
  // @func = function() {use this here} or This => {use This here}
  using(func) {
    return func.call(this, this);
  }

用法

  var obj = {f:3, a:2}
  .using(This => This.f + This.a) // 5

编辑

您不需要帮手。您可以这样做：

var obj = {f:3, a:2}
(This => This.f + This.a).call(undefined, obj); // 5