巧用 this 指向，指点迷津，引领编程捷径

2023-12-12 14:10:19

在 JavaScript 中，this 代表当前执行代码的对象。它可以是全局对象、函数对象、DOM 元素等等。this 指向在 JavaScript 中起着至关重要的作用，它决定了函数内部的 this 关键字所指向的对象。

一、对象中的方法

在 JavaScript 中，对象可以拥有自己的方法。当我们调用对象的方法时，this 指向该对象本身。例如：

const person = {
  name: "John",
  age: 30,
  greet: function () {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  },
};

person.greet(); // 输出: Hello, my name is John and I am 30 years old.

在上面的示例中，当我们调用 person 对象的 greet 方法时，this 指向 person 对象本身。因此，我们可以在 greet 方法内部访问 person 对象的属性 name 和 age。

二、事件绑定

在 JavaScript 中，我们可以通过事件绑定来监听 DOM 元素的事件。当事件发生时，浏览器会触发相应的事件处理函数。在事件处理函数中，this 指向触发事件的 DOM 元素。

行内绑定

行内绑定是最简单的一种事件绑定方式。它直接将事件处理函数写在 HTML 元素的属性中。例如：

<button onclick="alert('Hello, world!')">Click me</button>

当我们点击按钮时，浏览器会触发 onclick 事件，并执行 alert('Hello, world!') 函数。此时，this 指向触发事件的按钮元素。

动态绑定

动态绑定是通过 JavaScript 代码来绑定事件处理函数。它使用 addEventListener() 方法将事件处理函数绑定到 DOM 元素。例如：

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

button.addEventListener('click', function () {
  alert('Hello, world!');
});

当我们点击按钮时，浏览器会触发 click 事件，并执行事件处理函数。此时，this 指向触发事件的按钮元素。

事件监听

事件监听是一种特殊的事件绑定方式。它使用 EventTarget 对象的 addEventListener() 方法来绑定事件处理函数。EventTarget 对象是所有 DOM 元素的父类，因此它可以用于绑定任何 DOM 元素的事件。例如：

document.addEventListener('click', function () {
  alert('Hello, world!');
});

当我们点击任何 DOM 元素时，浏览器会触发 click 事件，并执行事件处理函数。此时，this 指向触发事件的 DOM 元素。

三、构造函数

在 JavaScript 中，构造函数用于创建对象。当我们调用构造函数时，this 指向新创建的对象。例如：

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

const person = new Person('John', 30);

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

在上面的示例中，当我们调用 Person 构造函数时，this 指向新创建的 person 对象。因此，我们可以在构造函数内部访问 person 对象的属性 name 和 age。

四、执行步骤

当我们调用一个函数时，JavaScript 引擎会执行以下步骤：

创建一个新的空对象。
将构造函数中的 this 指向本对象。
执行构造函数中的代码，为新对象添加属性。

例如：

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

const person = new Person('John', 30);

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