深入浅出，前端人员必备的 this 用法指南

2023-09-04 07:22:00

this 的本质

this 是 JavaScript 中一个至关重要的，经常让初学者感到困惑。但深入理解其本质和用法至关重要，因为它能帮助你写出更健壮、更可维护的代码。

this 是一根指向当前执行代码作用域中对象的指针。 它的值在运行时确定，具体指向什么对象取决于函数的调用方式和上下文。

this 的用法

1. 方法中的 this

当 this 出现在方法中时，它指向调用该方法的对象。考虑以下示例：

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

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

在这里，当 greet() 方法被调用时，this 指向 person 对象，允许方法访问 person 对象的属性 name。

2. 函数中的 this

当 this 出现在函数中时，它的值取决于函数的调用方式。有四种常见情况：

普通函数调用： this 指向全局对象（通常是 window）。
对象方法调用： this 指向调用该方法的对象。
构造函数调用： this 指向新创建的对象。
使用 call()、apply() 或 bind() 方法： this 可以显式指定。

让我们通过代码示例来说明：

// 普通函数调用
function sayHello() {
  console.log(`Hello, world!`);
}

sayHello(); // 输出: Hello, world!

// 对象方法调用
const person = {
  name: "John Doe",
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

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

// 构造函数调用
function Person(name) {
  this.name = name;
  this.greet = function() {
    console.log(`Hello, my name is ${this.name}.`);
  };
}

const person1 = new Person("John Doe");
person1.greet(); // 输出: Hello, my name is John Doe.

// 使用 call() 方法
function sayHello() {
  console.log(`Hello, my name is ${this.name}.`);
}

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

3. 事件处理函数中的 this

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

<button onclick="greet()">Greet</button>

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

当按钮被点击时，greet() 函数被调用，this 指向触发该事件的按钮元素。

this 的陷阱

this 是一个非常规的关键字，很容易造成困惑。 常见的陷阱包括：

1. 箭头函数中的 this

箭头函数没有自己的 this，而是继承外层函数的 this。考虑以下示例：

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

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

person.greet();

在这里，箭头函数 arrowGreet() 没有自己的 this，它继承了外层函数 greet() 的 this。但是，由于 greet() 函数中的 this 指向 person 对象，而箭头函数中的 this 指向 undefined，因此输出的结果是 undefined。

2. this 的动态绑定

this 的值在运行时动态绑定，这意味着它可能会在函数执行过程中发生变化。考虑以下示例：

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

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

在这里，当 greet() 函数被调用时，this 指向 person 对象。但是，setTimeout() 函数中的箭头函数是一个独立的函数，它没有自己的 this，它继承了外层函数 greet() 的 this。然而，由于 setTimeout() 函数在 1 秒后才执行，此时的 person 对象的 this 可能会发生变化，导致输出的结果是 undefined。