小开

最佳答案

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

经常：这取决于。箭头函数与函数声明/表达式有不同的行为，所以让我们先看看差异：

1.词汇this和arguments

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

// 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指的是createObject本身的this。

如果您需要访问当前环境的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，请考虑阅读

2.箭头函数不能用new调用

ES2015区分了打电话able和构建able的函数。如果一个函数是可构造的，它可以用new调用，即new User()。如果一个函数是可调用的，它可以在没有new（即普通函数调用）的情况下调用。

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

如果您尝试调用不可调用的函数或构造不可构造的函数，您将收到运行时错误。

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

可更换：

不使用this或arguments的函数。
与.bind(this)一起使用的函数

不是可替换：

构造函数
添加到原型的函数/方法（因为它们通常使用this）
可变函数（如果它们使用arguments（见下文））
生成器函数，需要function*符号

让我们用你的例子仔细看看这个：

构造函数

这将不起作用，因为无法使用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的替代方案：休息参数。

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


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

不应该使用箭头函数，因为：

他们没有this

它使用“词法范围”来计算“this”的值应该是。在简单的单词词法范围中，它使用来自在函数的主体中。
他们没有arguments

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

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

它们不能用于new

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

何时使用箭头函数，何时不使用：

不要使用在对象文字中添加函数作为属性，因为我们无法访问此。
函数表达式最适合对象方法。箭头函数最适合回调或map、reduce或forEach等方法。
对按名称调用的函数使用函数声明（因为他们被吊起）。
使用箭头函数进行回调（因为它们往往更简洁）。

小开

为了在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

小开

它们并不总是等价的。在这种情况下，您不能简单地使用箭头函数而不是常规函数。

箭头函数不能用作构造函数

TLDR：

这是因为箭头函数如何使用这个关键字。如果JS看到箭头函数被调用为“构造函数”，它将简单地抛出错误。使用常规函数来修复错误。

更长的解释：

这是因为对象“构造函数”依赖于这个关键字才能被修改。

通常，这个关键字总是引用全局对象（在浏览器中是窗口对象）。

当你做这样的事情：

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


const person1 = new personCreator('John');

新的关键字发挥了一些魔力，使个人创作者内部的这个关键字最初成为一个空对象，而不是引用全局对象。之后，在那个空的这个对象中创建了一个名为姓名的新属性，其值将为'John'。最后，返回这个对象。

如我们所见，新的关键字将这个的值从引用全球对象更改为现在的空对象{}。

箭头函数不允许修改它们的这个对象。它们的这个对象始终是它们静态创建的作用域中的对象。这称为静态词法作用域。这就是为什么您不能使用箭头函数执行绑定、适用或打电话之类的操作。简单地说，它们的这个被锁定为创建它们时作用域的这个的值。这是按设计进行的。

正因为如此：D，箭头函数不能用作“构造函数”。

附注：

词法作用域只是创建函数的区域。例如：

function personCreator(name) {
this.name = name;


const foo = () => {
const bar = () => {
console.log(this); // Output: { name: 'John' }
}


console.log(this); // Output: { name: 'John' }
    

bar();
}


foo();
}


const person1 = new personCreator('John');

酒吧的词法范围是foo内的所有内容。因此，酒吧的这个值是foo的值，也是个人创作者的值。

“箭头函数”和“函数”是否等效/可互换？

不应该使用箭头函数，因为：

何时使用箭头函数，何时不使用：