新手最容易迷糊的 this，一文讲透！

在 JavaScript 中，this 的指向经常让初学者感到困惑。本文将从函数调用和箭头函数两个角度，带你彻底搞懂 this 的本质。

一、普通函数的 this

普通函数中的 this 取决于 调用方式：

1. 函数直接调用

   • 在非严格模式下，this 默认指向 window。
   • 在严格模式下，this 会是 undefined。

function fn() {
  console.log(this) // 非严格模式下 -> window
}
fn()

2. 作为对象的方法调用

   • 如果函数是某个对象的方法，那么 this 指向调用该方法的对象。

const obj = {
  name: '张三',
  sayHello() {
    console.log(this) // -> obj
  }
}
obj.sayHello()

本质上，this 永远指向调用该函数的对象。

二、箭头函数的 this

箭头函数没有自己的 this，它的 this 由外层作用域决定。

const person = {
  name: '赵四',
  sayHello() {
    // 普通函数
    function innerFn() {
      console.log(this)
    }
    innerFn() // 非严格模式下 -> window

    // 箭头函数
    const innerArrow = () => {
      console.log(this)
    }
    innerArrow() // -> person
  }
}
person.sayHello()

解释：

• 普通函数 innerFn 独立调用，this 指向 window。
• 箭头函数 innerArrow 的 this 来自 sayHello 的外层作用域，也就是 person。

三、关键总结

1. 普通函数：this 取决于调用方式。

   • 直接调用 → window（非严格模式）
   • 作为对象方法调用 → 调用的对象

2. 箭头函数：this 取决于定义时的外层作用域，与调用方式无关。