JS中的"this"知多少？它到底是什么？解析"this"的始末真相

前端

2023-12-25 08:09:09

在JavaScript中，"this"是一个特殊的，它指向函数运行时所执行的环境，即当前执行代码的对象。理解"this"对于理解JavaScript代码的执行流程非常重要。

"this"的绑定机制

"this"的绑定机制决定了在函数运行时，"this"所指向的对象。JavaScript中的"this"绑定机制主要包括以下三种：

静态绑定： 静态绑定发生在函数定义的时候，"this"被绑定到函数所属的对象。这意味着，无论函数在何时何地被调用，"this"总是指向函数所属的对象。
动态绑定： 动态绑定发生在函数被调用的时候，"this"被绑定到调用函数的对象。这意味着，"this"的值根据函数的调用方式而改变。
隐式绑定： 隐式绑定发生在使用某些特定关键字（如"new"、"bind"、"apply"）调用函数的时候，"this"被绑定到特定的对象。

"this"在不同情况下的值

"this"的值根据函数的调用方式和绑定机制而有所不同。以下是一些常见的"this"值：

作为对象的方法调用时： "this"指向调用该方法的对象。例如：

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

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

作为构造函数调用时： "this"指向新创建的对象。例如：

function Person(name) {
  this.name = name;
}

const person = new Person("John");

console.log(person.name); // 输出: John

作为事件处理程序调用时： "this"指向触发事件的元素。例如：

document.addEventListener("click", function () {
  console.log(this); // 输出: HTMLDivElement
});

作为箭头函数调用时： "this"的值与它的父级作用域相同。例如：

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

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