JS经典面试题详解：透过一道题，吃透JS基础

前言

在 JavaScript（JS）开发领域，有一道经典面试题因其对基础知识点的全面考察而闻名。这道题堪称 JS 基础的试金石，能完整解答它才算真正过关。本文将带领大家深入剖析这道题，吃透 JS 基础。

题目解析

这道题的题目通常为：

已有以下代码：

var a = 10;
(function() {
  var a = 20;
  function fn() {
    var a = 30;
    console.log(a); // 30
  }
  fn();
  console.log(a); // 20
})();
console.log(a); // 10

回答以下问题：

1. 解释代码中三个变量 a 的值为什么分别为 30、20、10。
2. 说明代码中函数 fn 的作用域链是什么。
3. 解释 this 在 fn 函数中的值是什么。
4. 解释 new 关键字在 fn 函数中的值是什么。

详解

1. 变量 a 的值

代码中共有三个变量 a，分别声明在全局作用域、内部函数的作用域和内部函数的嵌套函数的作用域中。根据 JS 的作用域提升机制，所有变量声明都会提升到作用域的头部，因此这三个变量在代码执行前就已经声明。

• 第一个变量 a 声明在全局作用域，因此其值始终为 10。
• 第二个变量 a 声明在内部函数的作用域，因此其值仅在该作用域内有效，为 20。
• 第三个变量 a 声明在内部函数的嵌套函数的作用域，因此其值仅在该作用域内有效，为 30。

2. 函数 fn 的作用域链

函数 fn 的作用域链如下：

fn() ->
  [fn] ->
  [匿名内部函数] ->
  [全局作用域]

作用域链是从内向外的，因此 fn 函数首先可以在自己的作用域中找到变量 a，然后在匿名内部函数的作用域中找到，最后在全局作用域中找到。

3. this 关键字的值

在 fn 函数中，this 关键字的值为 undefined。这是因为 fn 函数是一个普通函数，没有使用 new 关键字调用，因此 this 关键字没有指向任何对象。

4. new 关键字的值

在 fn 函数中，new 关键字的值为 undefined。这是因为 fn 函数是一个普通函数，没有使用 new 关键字调用，因此 new 关键字的值没有指向任何构造函数。

总结

通过对这道经典面试题的解析，我们深入理解了 JS 中变量的作用域、函数的作用域链、this 关键字和 new 关键字的基本概念。这些知识点是 JS 开发的基础，掌握它们对于理解更高级的 JS 特性至关重要。