this 关键字剖析

2023-10-03 18:19:08

this 的定义和基本用法

在 JavaScript 中，this 关键字指向当前正在执行的函数的作用域，它是一个运行时动态决定的值。在函数被调用时，this 会被自动绑定到一个对象上，这个对象被称为 this 对象。this 对象可以是全局对象、函数对象、DOM 元素或任何自定义对象。

以下是一些常见的 this 指向的对象：

在全局作用域中，this 指向 window 对象。
在函数作用域中，this 指向函数所属的对象。
在方法作用域中，this 指向调用该方法的对象。
在事件处理程序中，this 指向触发该事件的元素。

this 关键字的绑定规则

this 关键字的绑定规则主要有以下几种：

默认绑定：如果一个函数没有显式指定 this 对象，那么它的 this 对象就是全局对象（在严格模式下为 undefined）。
隐式绑定：如果一个函数被作为对象的方法调用，那么它的 this 对象就是该对象。
显式绑定：可以使用 call()、apply() 或 bind() 方法来显式指定函数的 this 对象。

this 关键字的常见用法

this 关键字在 JavaScript 中有许多常见的用法，其中包括：

访问对象属性和方法：可以使用 this 关键字来访问对象属性和方法，例如：

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

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

调用父类的方法：可以使用 this.super() 来调用父类的方法，例如：

class Parent {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log("Hello, my name is " + this.name);
  }
}

class Child extends Parent {
  constructor(name) {
    super(name);
  }

  greet() {
    super.greet(); // 调用父类的方法
    console.log("I am a child class");
  }
}

const child = new Child("Jane Doe");
child.greet(); // 输出: "Hello, my name is Jane Doe\nI am a child class"

事件处理程序：可以使用 this 关键字来访问触发事件的元素，例如：

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

button.addEventListener("click", function() {
  console.log(this); // 输出: <button id="button">...</button>
});