获得完整访问权限
测验

箭头 => 函数语法有什么用例？

这种新语法与其他函数有何不同？
主题
JavaScript
在GitHub上编辑

TL;DR

箭头函数为用 JavaScript 编写函数提供了一种简洁的语法。它们对于在方法和回调中维护 this 上下文特别有用。例如，在事件处理程序或像 map 这样的数组方法中，箭头函数可以简化代码并避免 this 绑定问题。

const numbers = [1, 2, 3];
const doubled = numbers.map((n) => n * 2);
console.log(doubled); // [2, 4, 6]

新箭头 => 函数语法的用例

简化语法

箭头函数提供了一种更简洁的编写函数的方式。这对于短函数或回调特别有用。

// Traditional function
const add = function (a, b) {
  return a + b;
};


// Arrow function
const anotherAdd = (a, b) => a + b;


console.log(add(2, 3)); // Output: 5
console.log(anotherAdd(2, 3)); // Output: 5

词法 this 绑定

箭头函数没有自己的 this 上下文。相反，它们从周围的范围继承 this。这在 this 上下文可能很棘手的方法和回调中特别有用。

function Timer() {
  this.seconds = 0;
  this.increment = () => {
    this.seconds++; // 'this.seconds' is inherited from the outer scope
    console.log(this.seconds);
  };
}


const timer = new Timer();
timer.increment(); // 1
timer.increment(); // 2

在上面的例子中，在 setInterval 中使用传统函数需要额外的步骤来维护正确的 this 上下文。

在数组方法中使用箭头函数

箭头函数通常用于 map、filter 和 reduce 等数组方法中，以获得更简洁、更易读的代码。

const numbers = [1, 2, 3, 4, 5];


// Traditional function
const doubledTraditional = numbers.map(function (n) {
  return n * 2;
});


// Arrow function
const doubled = numbers.map((n) => n * 2);


console.log(doubled); // [2, 4, 6, 8, 10]

事件处理程序

箭头函数可用于事件处理程序，以维护类或对象的 this 上下文。

class Button {
  constructor() {
    this.count = 0;
    this.button = document.createElement('button');
    this.button.innerText = 'Click me';
    this.button.addEventListener('click', () => {
      this.count++;
      console.log('count:', this.count);
    });
    document.body.appendChild(this.button);
  }
}


const myButton = new Button();
myButton.button.click(); // count: 1
myButton.button.click(); // count: 2

延伸阅读

在GitHub上编辑