面试官：一道程序阅读题难倒了这么多候选人？

引言

在前端面试中，程序阅读题是考察JS基础最常见的题型，设计巧妙的程序题目可以同时考察很多知识点，如JS作用域、变量提升、let、var、const使用、this指向、箭头函数等，另外通过局部小幅度的改动又可以考察候选人的临场应变能力，可以说非常简洁高效。

虽然很多时候这类题目本身没有任何意义，但是目前就业形势严峻，多懂一些套路与技巧，在面试中就多一些优势，本文将通过一道经典的程序阅读题目来为大家拆解其中的知识点，同时帮助大家弄清楚面试官设计这样的题型到底是为了考察哪些能力。

题目解析

首先，让我们来看一下这道程序阅读题目：

function example() {
  console.log(x);
  var x = 10;
  let y = 20;
  const z = 30;

  console.log(this);
  
  function innerFunction() {
    console.log(this);
    const arrowFunction = () => {
      console.log(this);
    };
    arrowFunction();
  }

  innerFunction();
}

example();

这段代码涉及到多个JavaScript核心概念，接下来会我们逐步拆解，看看到底会问哪些问题，又该如何回答呢？

变量提升与作用域

在运行这段代码时，第一个 console.log(x) 会输出什么？

console.log(x);
var x = 10;

答案是 undefined，这是因为变量 x 通过 var 声明时会发生变量提升。在代码执行之前，JavaScript引擎会将所有使用 var 声明的变量提升到其作用域的顶部，但不会提升赋值操作。因此，代码在执行时实际上是这样的：

var x;
console.log(x); // undefined
x = 10;

然而，如果我们将 var x = 10 更改为 let x = 10 或 const x = 10，情况会如何呢？

console.log(x);
let x = 10;

答案是会抛出一个 ReferenceError 错误，因为使用 let 或 const 声明的变量不会被提升。它们在声明之前是不可访问的，这是由于暂时性死区（Temporal Dead Zone, TDZ）的存在，这里一般会顺便询问你对于暂时性死区的理解。

this 指向

接下来，他会问 example() 函数执行会输出什么呢？

很明显这里在考察 this 关键字的理解：

function example() {
  console.log(this);
}

当直接调用 example() 函数时，this 指向全局对象，在浏览器环境中就是 window，在严格模式下是 undefined，然后面试官肯定会问什么是JS严格模式？

紧接着，还没结束，既然弄清楚了example() 函数中this的指向，那么innerFunction() 函数呢？

function example() {
  console.log(this);
  
  function innerFunction() {
    console.log(this);
  }

  innerFunction();
}

example();

innerFunction 直接调用，它的 this 仍然指向全局对象，这是因为在非严格模式下，函数的 this 默认指向全局对象。但是如果在严格模式下，this 会是 undefined。

最后，关于innerFunction()函数中的 arrowFunction 函数很明显会考察箭头函数中this的指向问题

function innerFunction() {
  console.log(this);
  const arrowFunction = () => {
    console.log(this);
  };
  arrowFunction();
}

当 innerFunction 中的 arrowFunction 被调用时，this 的值保持不变。箭头函数不绑定自己的 this，它捕获的是其定义位置的 this，这里如果大家对于JS的执行原理有深入了解的话就会明白所谓的定义位置的this（JS在解释阶段确定作用域等相关知识）

面试官视角

大厂的前端初面时间往往要求在40-60分钟内结束，所以在有限的时间内，面试官为了更全面的了解候选人，就需要设计这类综合性强的题目，因为它可以考察：

1. JS基本语法与概念的理解：如变量提升、作用域、函数声明、严格模式等。
2. JS中this 的理解与掌握：包括普通函数和箭头函数中 this 的指向。
3. 全面细致的代码阅读能力：复杂代码来考察候选人的逻辑思维和分析能力。

所以这道题目它不仅需要候选人理解每个单独的知识点，它还需要候选人能够灵活串联这些知识点，并深入理解背后的机制。

串联学习建议

建议先搞懂JS变量作用域，然后理解什么是变量提升，紧接着通过 var、let 和 const 使用来了解提升机制，this的指向需要你理解执行上下文这个概念，然后要深刻理解JS解释与执行的区别，箭头函数只是对这些概念灵活考察的一种方式，多练习几道同类题型即可。

结语

程序阅读题目不仅是对技术知识点的考察，更是对候选人代码阅读和理解能力的全方位检测。希望通过这篇文章，你能掌握如何应对这些问题的方法，让你更了解面试官的面试套路。