与this共舞：箭头函数中的this，走近箭头函数的魅力

2024-01-14 22:38:36

我们正步入新的JavaScript时代，崭露头角的箭头函数闪耀着独特的光芒，本文将带领你领略箭头函数中this的魅力。

在传统的函数定义中，this指向函数的宿主环境，也就是函数在何处执行，this就指向哪里。但箭头函数颠覆了这个传统，它没有自己的this，而是采用词法作用域来获取this，这就意味着，箭头函数中的this永远指向创建它的函数或者块级作用域内的this。

箭头函数让this的获取更加清晰，减少了在代码中编写bind()的麻烦，避免了this的意外变化。同时，箭头函数的简洁语法也为代码带来了更强的可读性和可维护性。

箭头函数与传统函数的this之别

function traditionalFunction() {
  console.log(this); // 指向window
}

const arrowFunction = () => {
  console.log(this); // 指向父级作用域中的this
};

// 在某个对象上调用传统函数
const obj = {
  name: "John Doe",
  traditionalFunction: traditionalFunction,
  arrowFunction: arrowFunction,
};

obj.traditionalFunction(); // 指向obj
obj.arrowFunction(); // 指向window

在传统的函数定义中，this指向函数的宿主环境，也就是函数在何处执行，this就指向哪里。但在箭头函数中，情况却截然不同，箭头函数的this是词法作用域决定的，因此，箭头函数中的this永远指向创建它的函数或块级作用域内的this。

箭头函数中this的应用场景

箭头函数的this特性在许多场景中都有着独特的优势：

简化事件处理函数中的this绑定：

const button = document.getElementById("my-button");

// 使用箭头函数绑定this，避免编写bind()
button.addEventListener("click", () => {
  console.log(this); // 指向button元素
});

// 使用传统函数绑定this
button.addEventListener("click", function () {
  console.log(this); // 指向window
}.bind(button));

在嵌套函数中保持this的一致性：

function outerFunction() {
  const obj = {
    name: "John Doe",
    innerFunction: () => {
      console.log(this.name); // 指向obj
    },
  };

  obj.innerFunction(); // 指向obj
}

// 使用传统函数会导致innerFunction中的this指向window
function outerFunction() {
  const obj = {
    name: "John Doe",
    innerFunction: function () {
      console.log(this.name); // 指向window
    },
  };

  obj.innerFunction(); // 指向window
}

作为回调函数时，避免this的意外变化：

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

// 使用箭头函数作为回调函数，this始终指向array
const sum = array.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
});

// 使用传统函数作为回调函数，this可能指向window
const sum = array.reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
});