“箭头功能”和“功能”是等效/可交换的吗？

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

看看这个Plnkr的例子每次调用按钮时，变量的增量this都是非常不同的timesCalled增量。这回答了我的个人问题：.click( () => { } )和.click(function() { })从Plnkr中的Guid计数可以看出，在循环中使用时都会创建相同数量的函数。

Answer 2

JavaScript箭头函数只是定义函数的另一种方式。箭头函数不仅使您的代码看起来更干净，更具体，更易于阅读。它还提供了隐含回报的好处。下面我将分享一些简单的示例，这些示例自我解释函数的声明以及如何定义JavaScript箭头函数。/*----------------------------------    JavaScript Arrow Functions   ----------------------------------*/// Defining a function.function addNumbers(a, b) {    return a + b;}addNumbers(10, 6);  // 16// Using anonymous function.var addNumbers = function(a, b) {    return a + b;}addNumbers(10, 6); // 16// using Arrow Functions or Fat Arrow functions.var addNumbers = (a, b) => {    return a + b; // with return statement}addNumbers(10, 6); // 16// Using Arrow Functions or Fat Arrow functions without return statements and without curly braces.var addNumbers = (a, b) => a + b; // this is a condensed way to define a function.addNumbers(10, 6); // 16在这里，我将为您提供有关JavaScript箭头功能的链接：如何，为什么，何时（以及何时）使用它们将向您提供示例和详细信息...