JavaScript 探索之路：JavaScript 中的 this

ERIC_s
123 阅读7分钟

引言

在 JavaScript 中，this 是一个强大且灵活的关键字，但它的行为有时也会让人困惑。this 的值并不是在定义时确定的，而是在函数调用时绑定的。理解 this 的工作原理对于编写正确且可维护的 JavaScript 代码至关重要。在这篇文章中，我们将深入探讨 this 的指向规则、常见的使用场景、以及 call、apply 和 bind 方法的使用，并涵盖事件处理、模块化、严格模式下的特殊行为。

1. 什么是 this？

this 是 JavaScript 中的一个特殊变量，它的值在函数调用时确定，并且指向调用该函数的对象。它使得函数可以根据不同的执行环境（即上下文）动态地访问和操作数据。

比喻： this 就像是一个动态指针，根据函数的调用方式指向不同的对象，使得同一个函数能够灵活地在不同的上下文中工作。

在 JavaScript 中，this 的指向可以分为以下四种主要场景：

  • 函数直接调用
  • 方法调用
  • 构造函数调用
  • 显式绑定调用

此外，严格模式（strict mode）也会影响到 this 的指向。弄清 this 指向的关键是理解函数的调用方式和上下文。

2. this 的指向规则

this 的指向取决于函数的调用方式。理解这些规则可以帮助我们预测和控制 this 的值。

2.1 全局上下文中的 this

在全局上下文中，this 通常指向全局对象。在浏览器中，全局对象是 window，在 Node.js 中，全局对象是 global。

示例：

console.log(this === window); // 浏览器中为 true

扩展说明： 在严格模式下（'use strict';），全局上下文中的 this 是 undefined 而不是全局对象。

"use strict";
console.log(this === undefined); // true
2.2 函数直接调用中的 this

在函数直接调用时，this 通常指向全局对象（在浏览器中为 window）。如果使用严格模式，则 this 会变为 undefined。

示例：

function sum(a, b) {
  console.log(this === window); // true
  this.myNumber = 20; // 将 'myNumber' 属性添加到全局对象中
  return a + b;
}

sum(10, 20); // 30
console.log(window.myNumber); // 20

在这个例子中，this 被绑定到了全局对象 window 上，因此可以通过 this 访问或修改全局对象的属性。

严格模式下的行为：

function multiply(a, b) {
  "use strict";
  console.log(this === undefined); // true
  return a * b;
}

multiply(2, 5); // 10

严格模式使得函数直接调用时，this 不再指向全局对象，而是 undefined，这也更符合面向对象编程的设计思想。

2.3 对象方法中的 this

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

示例：

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

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

扩展说明： 如果你将方法从对象中提取出来单独调用，this 将不再指向最初调用它的对象，而是指向全局对象（在浏览器中为 window，在严格模式下为 undefined）。

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

解释： 当 greet 方法被从对象中提取并单独调用时，this 失去了原本的上下文，因此在非严格模式下，this 指向全局对象，this.name 会返回 undefined。在严格模式下，this 的值为 undefined，因此访问 this.name 会导致错误。

常见陷阱：提取方法后 this 的丢失

如果我们将对象的方法提取出来然后单独调用，那么 this 的指向会丢失。这种情况下，我们可以使用 bind 方法或箭头函数来保持 this 的指向。

示例：

function Pet(type, legs) {
  this.type = type;
  this.legs = legs;
  this.logInfo = function () {
    console.log(`The ${this.type} has ${this.legs} legs`);
  };
}

const myCat = new Pet("Cat", 4);
setTimeout(myCat.logInfo, 1000); // 输出: The undefined has undefined legs

在上述例子中，this 在 setTimeout 中指向了全局对象，因此输出的内容是 undefined。可以通过 bind 方法来解决这个问题。

解决方案：

setTimeout(myCat.logInfo.bind(myCat), 1000); // 输出: The Cat has 4 legs

3. 构造函数中的 this

当使用 new 关键字创建对象时，this 指向新创建的对象。

示例：

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

const alice = new Person("Alice");
console.log(alice.name); // 输出: Alice

扩展说明： 使用 new.target 可以判断函数是否被 new 调用，从而确保 this 的正确使用。

function Person(name) {
  if (!new.target) {
    throw new Error("Person() 必须通过 new 调用");
  }
  this.name = name;
}

const alice = new Person("Alice"); // 正常执行
const bob = Person("Bob"); // 抛出异常

常见陷阱：忘记使用 new

当我们忘记使用 new 关键字来调用构造函数时，this 会指向全局对象或 undefined（在严格模式下）。我们可以通过 new.target 来确保正确使用 this。

function Vehicle(type, wheelsCount) {
  if (!(this instanceof Vehicle)) {
    throw Error("Error: Incorrect invocation");
  }
  this.type = type;
  this.wheelsCount = wheelsCount;
}

const car = new Vehicle("Car", 4);

4. 显式绑定中的 this

通过 call、apply 或 bind 方法，可以显式地绑定 this 到特定对象。

示例：

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

const person = { name: "Alice" };

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

call 和 apply 允许你在调用函数时显式指定 this，它们之间的区别在于参数的传递方式：call 逐个传递参数，而 apply 接受一个参数数组。

使用 bind 绑定 this：

bind 方法与 call 和 apply 不同，它返回一个新的函数，并永久绑定 this 到指定的对象，而不是立即执行函数。

const boundGreet = greet.bind(person);
boundGreet(); // 输出: Hello, my name is Alice

常见陷阱：间接调用中的 this

在间接调用中，this 的指向可以通过 call 或 apply 来显式指定。例如在类的继承中，我们可以通过 call 方法来调用父类的构造函数。

示例：

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

function Rabbit(name, countLegs) {
  Runner.call(this, name); // 调用父类构造函数
  this.countLegs = countLegs;
}

const myRabbit = new Rabbit("White Rabbit", 4);
console.log(myRabbit); // 输出: { name: 'White Rabbit', countLegs: 4 }

5. 箭头函数中的 this

箭头函数没有自己的 this，它会继承来自外层作用域的 this。这一特性使得箭头函数在处理回调或嵌套函数时特别有用。

示例：

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

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

**扩展说明：**
箭头函数中的 `this` 在定义时就被绑定，无法通过 `call`、`apply` 或 `bind` 方法更改。

```javascript
const anotherPerson = { name: "Bob" };
person.greet.call(anotherPerson); // 输出: Hello, my name is undefined

深入探讨：箭头函数与普通函数中的 this

在类方法或回调函数中，箭头函数能够有效地避免 this 的丢失问题。

示例：

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  log() {
    setTimeout(() => {
      console.log(`${this.x}, ${this.y}`);
    }, 1000);
  }
}

const point = new Point(10, 20);
point.log(); // 1秒后输出: 10, 20

在这个例子中，使用箭头函数可以确保 this 指向 Point 类的实例，而不是 setTimeout 内部的执行上下文。

6. this 在事件处理中的使用

在事件处理函数中，this 通常指向触发事件的 DOM 元素。

示例：

const button = document.querySelector("button");
button.addEventListener("click", function () {
  console.log(this.textContent); // 输出按钮的文本内容
});

扩展说明： 如果使用箭头函数作为事件处理程序，this 将继承自外层作用域，而不是指向触发事件的元素。

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

解决方案： 使用普通函数（非箭头函数）来确保 this 指向事件触发的元素。

7. this 在模块化和严格模式下的行为

在模块化和严格模式下，this 的行为有所不同，特别是在 ES6 模块中，this 默认是 undefined。

示例：

// module.js (严格模式下)
export function logThis() {
  console.log(this);
}

logThis(); // 输出: undefined

扩展说明： 在 CommonJS 模块中，this 默认指向 module.exports，而在 ES6 模块中，this 为 undefined。

// CommonJS
console.log(this === module.exports); // true

8. this 绑定的替代方案

除了 call、apply 和 bind，你还可以使用箭头函数或其他模式来控制 this 的行为。

示例：

class Counter {
  constructor() {
    this.count = 0;
    document.querySelector("button").addEventListener("click", () => {
      this.count++;
      console.log(this.count);
    });
  }
}

const counter = new Counter();

解释： 在这个例子中，使用箭头函数确保了 this 指向类实例，而不是按钮元素。

9. this 在异步函数中的行为

在异步函数如 setTimeout 或 Promise 中，this 的行为可能与预期不同。

复杂示例：嵌套异步函数中的 this

const manager = {
  tasks: [],
  addTask(task) {
    this.tasks.push(task);
    setTimeout(function () {
      console.log(this.tasks.length); // 输出: undefined 或错误 (严格模式)
      setTimeout(() => {
        console.log(this.tasks.length); // 输出: undefined 或错误
      }, 1000);
    }, 1000);
  },
};

manager.addTask("Learn JavaScript");

解释： 在这个示例中，第一个 setTimeout 中的 this 指向全局对象（在浏览器中为 window）或 undefined（严格模式下）。因此，this.tasks 是未定义的。在第二个嵌套的 setTimeout 中，使用了箭头函数，this 继续指向第一个 setTimeout 中的 this，即 window 或 undefined，同样导致 this.tasks 未定义。

正确示例及解释

如果你想要在第二个 setTimeout 中访问 manager 对象，可以使用箭头函数或 bind 来确保 this 正确指向 manager 对象：

const manager = {
  tasks: [],
  addTask(task) {
    this.tasks.push(task);
    setTimeout(() => {
      console.log(this.tasks.length); // 输出: 1
      setTimeout(() => {
        console.log(this.tasks.length); // 输出: 1
      }, 1000);
    }, 1000);
  },
};

manager.addTask("Learn JavaScript");

正确解释： 在这个修正后的示例中，两个 setTimeout 都使用了箭头函数，使得 this 始终指向 manager 对象，因此可以正确访问 tasks 数组，并输出 1。

10. 最佳实践

10.1 小心回调中的 this

在回调函数中，要特别注意 this 的指向，可以使用箭头函数或者显式绑定 this。

10.2 避免过度使用 this

尽量减少对 this 的依赖，特别是在函数式编程中，使用纯函数和明确的参数传递可以避免 this 带来的复杂性。

10.3 使用 bind 提前绑定 this

在构造函数或类方法中，如果你需要在多个地方使用同一个函数，提前使用 bind 绑定 this 是一种好习惯。

结论

理解 this 在 JavaScript 中的行为是编写健壮代码的关键。通过掌握 this 的指向规则、事件处理、箭头函数、异步函数中的使用，以及 call、apply 和 bind 的使用，你将能够更加灵活地控制函数的执行上下文，避免常见的陷阱。继续深入学习 this，你将发现更多优化代码的技巧和方法！

社区与资源

如果你想进一步探索 this 的用法，以下是一些推荐的资源：

avatar
文章
阅读
粉丝