javascript - “箭头功能”和“功能”是否等效/可互换？

Question

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

Answer 1

医生：不！箭头函数和函数声明/表达式不等价，不能盲目替换。
如果要替换的函数不使用this，arguments且未使用new调用，则为“是”。
像往常一样：这要看情况。箭头函数的行为与函数声明/表达式的行为不同，因此让我们先看一下它们之间的区别：
一。词汇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)一起使用的函数
不可替换：
构造函数函数
添加到原型的函数/方法（因为它们通常使用 this）
变量函数（如果它们使用 arguments（见下文））
让我们使用您的示例来更深入地了解这一点：
构造函数
这不起作用，因为箭头函数不能用 new调用。继续使用函数声明/表达式或使用 class。
原型方法
很可能不是，因为原型方法通常使用 this来访问实例。如果他们不使用 this，那么您可以替换它。但是，如果您主要关心简明语法，请使用 class及其简明方法语法：

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

  getName() {
    return this.name;
  }
}

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

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

回调
这要看情况。如果您正在给外部设置别名或正在使用 this，则绝对应该替换它：

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

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

但是：如果调用回调函数的代码显式地将 .bind(this)设置为特定值，就像事件处理程序（尤其是jQuery）通常的情况一样，并且回调函数使用 this（或 this），则不能使用箭头函数！
变量函数
由于箭头函数没有自己的 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