JavaScript 中的 this – 深入浅出

2023-10-04 00:17:30

JavaScript 中的 this

this 是 JavaScript 中一个特殊且强大的关键字，它在不同情况下具有不同的含义。在 Java 等面向对象的语言中，this 关键字的含义是明确且具体的，即指代当前对象。一般在编译期确定下来，或称为编译期绑定。而在 JavaScript 中，this 是动态绑定，或称为运行期绑定的，这就导致 JavaScript 中的 this 关键字有能力具备多重含义。

this 的值如何确定

JavaScript 中的 this 的值是在运行时决定的，而不是在编译时。这给了 JavaScript 程序员很大的灵活性，但也增加了理解和使用 this 的难度。

1. 在方法中

在方法中，this 的值是该方法所属的对象。例如，以下代码中，this 的值是对象 person：

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

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

2. 在函数中

在函数中，this 的值是全局对象 window。例如，以下代码中，this 的值是 window 对象：

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

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

3. 在构造函数中

在构造函数中，this 的值是正在创建的新对象。例如，以下代码中，this 的值是新对象 person：

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

const person = new Person("John Doe");

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

4. 在事件处理程序中

在事件处理程序中，this 的值是触发该事件的元素。例如，以下代码中，this 的值是按钮元素：

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

button.addEventListener("click", function() {
  console.log(this.textContent); // 输出: "Click me!"
});

5. 在回调函数中

在回调函数中，this 的值是回调函数被调用的对象。例如，以下代码中，this 的值是对象 person：

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

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

this 的应用场景

this 在 JavaScript 中的应用场景非常广泛，以下是一些常见的场景：

访问对象属性和方法：在方法中，this 的值是该方法所属的对象，因此可以使用 this 来访问该对象的属性和方法。例如，以下代码中，this.name 是对象 person 的属性：

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

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

作为对象的参数：this 可以作为对象的参数传递给函数。例如，以下代码中，this 被作为参数传递给函数 greet：

function greet(person) {
  console.log(`Hello, ${person.name}.`);
}

const person = {
  name: "John Doe"
};

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

作为构造函数：this 可以作为构造函数来创建新对象。例如，以下代码中，this 被用作构造函数来创建新对象 person：

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

const person = new Person("John Doe");

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

在事件处理程序中：this 可以用在事件处理程序中来访问触发该事件的元素。例如，以下代码中，this 是触发 click 事件的按钮元素：

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

button.addEventListener("click", function() {
  console.log(this.textContent); // 输出: "Click me!"
});