this之玄学：面试官考题背后的秘密

前端

2023-12-23 01:07:14

this，作为 JavaScript 中的，不知何时已成为面试官眼中的必考题。理解并掌握它的大神们能侃侃而谈，而略知一二的半吊子们却把它视作玄学，难以琢磨。

揭开this的神秘面纱

this 的本质是一个指向当前执行代码的对象的指针。它在不同情况下指向不同的对象，这正是其令人捉摸不定的原因。

方法调用： 当在一个对象的方法内部调用时，this 指向该对象。
函数调用： 若在普通函数（非对象的方法）中调用，this 指向全局对象（浏览器中的 window，Node.js 中的 global）。
构造函数调用： 在构造函数中调用时，this 指向新创建的对象。
事件处理程序： 在事件处理程序中调用时，this 指向触发事件的元素。

面试官的刁难：this 的绑定

面试官们钟爱考查 this 的绑定机制，即理解 this 指向的对象如何确定。这有两种主要方式：

显式绑定： 使用 bind()、call() 或 apply() 方法显式绑定 this 到指定的对象。
隐式绑定： 在方法调用或事件处理程序中，this 根据调用上下文隐式绑定。

理解this，通关面试

掌握 this 的绑定机制对理解 JavaScript 代码至关重要。面试官通过考查 this 来评估候选人对语言基础的理解以及解决复杂问题的逻辑思维能力。

要征服 this，需要牢记以下关键点：

始终考虑调用上下文。
理解显式和隐式绑定的区别。
练习使用 bind()、call() 和 apply() 来控制 this 的绑定。

实战演练

举个例子，让我们编写一个函数，计算一个数组中所有偶数的和：

function sumEvenNumbers(arr) {
  let sum = 0;
  for (let num of arr) {
    // 如果 num 是偶数，将它加到 sum 中
    if (num % 2 === 0) {
      sum += num;
    }
  }
  return sum;
}

// 想象这个函数是在一个对象的方法内部调用的
let obj = {
  arr: [1, 2, 3, 4, 5, 6],
  sumEvenNumbers: sumEvenNumbers
};

// obj.sumEvenNumbers() 这里，this 指向 obj 对象
const result = obj.sumEvenNumbers();
console.log(result); // 输出：12