javascript - 'Arrow Functions' 和 'Functions' 是否等效/可互换？

Question

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

我现在可以用箭头函数替换我所有的函数声明/表达式吗？

我需要注意什么？

例子:

构造函数

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

// vs

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

原型(prototype)方法

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) => {
  // ...
};

Answer 1

tl;博士: 不! 箭头函数和函数声明/表达式不是等价的，不能盲目替换。
如果要替换的函数不使用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 - this

YDKJS - this & Object prototypes

2.箭头函数不能用new调用
ES2015 区分了可调用函数和可构造函数。如果函数是可构造的，则可以使用 new 调用它，即 new User() .如果一个函数是可调用的，它可以在没有 new 的情况下被调用(即正常的函数调用)。
通过函数声明/表达式创建的函数既可构造又可调用。
箭头函数(和方法)只能调用。 class构造函数只能构造。
如果您尝试调用不可调用的函数或构造不可构造的函数，则会出现运行时错误。

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

不使用的函数 this或 arguments .

与 .bind(this) 一起使用的函数

不可更换:

构造函数

添加到原型(prototype)的函数/方法(因为它们通常使用 this )

可变函数(如果他们使用 arguments(见下文))

生成器函数，需要 function*符号

让我们用你的例子仔细看看这个:
构造函数
这将不起作用，因为无法使用 new 调用箭头函数.继续使用函数声明/表达式或使用 class .
原型(prototype)方法
很可能不是，因为原型(prototype)方法通常使用 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 parameter .

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

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

相关问题:

When should I use arrow functions in ECMAScript 6?

Do ES6 arrow functions have their own arguments or not?

What are the differences (if any) between ES6 arrow functions and functions bound with Function.prototype.bind?

How to use arrow functions (public class fields) as class methods?

更多资源:

MDN - Arrow functions

YDKJS - Arrow functions