2023前端面试题-前端Js面试题-如何理解 JS 中箭头函数的 this 指向

357 阅读1分钟

在 JavaScript 中,箭头函数中的 this 指向的是其定义时的上下文,而不是调用时的上下文。这意味着,在箭头函数中,this 的值不会被改变,无论在什么地方调用该函数。

具体来说,箭头函数中的 this 始终指向它所在的词法作用域中的 this,而不是调用它的对象。例如,如果在一个对象中使用箭头函数作为该对象的一个属性值,那么该箭头函数中的 this 就是定义该对象时的上下文,而不是调用该函数时的对象。

下面是一个简单的示例,演示了箭头函数中的 this 指向:

const person = {
  name: 'Alice',
  greet: function() {
    setTimeout(() => {
      console.log(`Hello, my name is ${this.name}`);
    }, 1000);
  }
};

person.greet(); // 输出 "Hello, my name is Alice",因为箭头函数中的 this 指向 person 对象的上下文

相比之下,如果 setTimeout 中使用的是普通函数,那么 this 的指向将会被改变,因为该函数中的 this 指向的是全局对象 window(浏览器环境下)或 global(Node.js 环境下)。

总结:箭头函数常常用于需要保留定义时上下文的场景,例如在 React 组件中定义事件处理函数。
更多前端面试题请看:存图,扫

daan-s.png