如何轻松玩转 JS 中的 this 指向？

2023-11-12 06:25:28

JavaScript 中的 this 指向

this 指向是 JavaScript 中的一个特殊变量，它指向当前执行代码的对象。this 指向可以是全局对象、函数对象、DOM 元素对象等。

在 JavaScript 中，this 指向是如何确定的呢？这取决于函数的调用方式。

当函数作为对象的方法调用时，this 指向该对象。例如：

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

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

当函数作为独立函数调用时，this 指向全局对象。例如：

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

greet(); // Hello, my name is undefined.

当函数使用 bind()、call() 或 apply() 方法调用时，this 指向可以显式地绑定到指定的值。例如：

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

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

greet.call(person); // Hello, my name is John Doe.

轻松处理 this 指向的方法

在 JavaScript 中，有几种简单的方法可以轻松地将 this 绑定到所需的值。

1. 使用箭头函数

箭头函数是一种简写形式的函数，它没有自己的 this 指向。箭头函数中的 this 指向与外层函数的 this 指向相同。例如：

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

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

2. 使用 `bind()` 方法

bind() 方法可以将函数的 this 指向绑定到指定的值。例如：

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

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

const boundGreet = greet.bind(person);

boundGreet(); // Hello, my name is John Doe.

3. 使用 `call()` 和 `apply()` 方法

call() 和 apply() 方法也可以将函数的 this 指向绑定到指定的值。call() 方法接受参数列表，而 apply() 方法接受参数数组。例如：

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

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

greet.call(person, 'Jane Doe'); // Hello, my name is Jane Doe.

greet.apply(person, ['Jane Doe']); // Hello, my name is Jane Doe.