摸透JavaScript 中的this

2023-12-16 23:23:13

对于前端开发人员来说，无论是在日常工作还是面试中，对 this 的理解和掌握都至关重要。在本文中，我们将深入浅出地剖析 JavaScript 中的 this ，让你对它不再感到困惑。

1. this 是什么？

在 JavaScript 中，this 代表着当前正在执行代码的对象。它是一种动态绑定的变量，这意味着它的值会在运行时根据调用的上下文而发生改变。

2. this 的基本用法

2.1 方法中的 this

当在一个对象的方法内部调用时，this 指向该对象本身。例如：

const person = {
  name: "John Doe",
  greet: function () {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

person.greet(); // 输出: Hello, my name is John Doe.

在这个例子中，greet() 方法被调用时，this 指向 person 对象，因此可以访问它的 name 属性。

2.2 函数中的 this

当一个函数作为独立的函数调用时，this 指向 window 对象。例如：

function greet() {
  console.log(`Hello, my name is ${this.name}.`);
}

greet(); // 输出: Hello, my name is undefined.

在这个例子中，greet() 函数被独立调用，因此 this 指向 window 对象。由于 window 对象没有 name 属性，所以输出结果为 undefined。

3. this 的特殊情况

3.1 箭头函数中的 this

箭头函数没有自己的 this，它总是继承外层函数的 this。例如：

const person = {
  name: "John Doe",
  greet: () => {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

person.greet(); // 输出: Hello, my name is undefined.

在这个例子中，greet() 函数是一个箭头函数，因此它没有自己的 this。它继承了外层函数 person 的 this，因此可以访问它的 name 属性。

3.2 事件处理函数中的 this

在事件处理函数中，this 指向触发该事件的元素。例如：

const button = document.querySelector("button");

button.addEventListener("click", function () {
  console.log(`You clicked on ${this.textContent}.`);
});