JavaScript面试题实例分析

# JavaScript面试题实例分析

## 前言
JavaScript作为前端开发的核心语言，其面试题往往聚焦于语言特性、异步编程、作用域等核心概念。本文通过5个典型面试题，结合代码实例和原理分析，帮助开发者深入理解JavaScript运行机制。

## 一、变量提升与暂时性死区

```javascript
console.log(a); // 输出什么？
let a = 10;

考点分析： 1. let声明的变量存在暂时性死区（TDZ） 2. 与var的区别：var会变量提升但值为undefined 3. 实际输出：ReferenceError: Cannot access 'a' before initialization

扩展知识： - 函数声明会整体提升 - const同样存在TDZ且不可重复赋值

二、闭包与作用域链

for(var i=0; i<3; i++){
  setTimeout(()=>console.log(i), 100);
}
// 输出？如何修正？

运行结果： 输出3次3

解决方案： 1. 使用IIFE创建作用域

   for(var i=0; i<3; i++){
     (function(j){
       setTimeout(()=>console.log(j), 100);
     })(i)
   }

1. 直接使用let声明

   
   for(let i=0; i<3; i++){
    setTimeout(()=>console.log(i), 100);
   }
   

原理说明： - var声明的i属于函数作用域 - let会在每次循环创建新的块级作用域

三、this绑定优先级

const obj = {
  name: 'obj',
  print: function(){
    console.log(this.name);
  }
};

obj.print.call({name: 'newObj'}); // 输出？
setTimeout(obj.print, 100); // 输出？

运行结果： 1. newObj（显式绑定优先） 2. 浏览器中输出空（非严格模式this指向window）

重要规律： this绑定优先级：new > 显式(call/apply/bind) > 隐式(obj.func()) > 默认绑定

四、Promise执行顺序

console.log(1);

setTimeout(()=>console.log(2), 0);

Promise.resolve().then(()=>console.log(3));

console.log(4);

输出顺序： 1 → 4 → 3 → 2

事件循环机制： 1. 同步代码立即执行 2. 微任务（Promise）优先于宏任务（setTimeout） 3. 同层级微任务按注册顺序执行

五、原型链继承

function Parent(name){
  this.name = name;
}
Parent.prototype.say = function(){
  console.log(this.name);
};

function Child(name, age){
  Parent.call(this, name);
  this.age = age;
}

// 如何实现继承？

标准继承方案：

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

// 测试用例
const c = new Child('Tom', 12);
c.say(); // 正常调用父类方法

关键点： 1. 构造函数继承：通过Parent.call继承实例属性 2. 原型链继承：保持方法复用 3. 修正constructor指针避免类型判断错误

高频易错点总结

结语

掌握JavaScript核心原理比记忆API更重要。建议开发者通过： 1. 手写Promise等核心对象 2. 使用Chrome调试工具观察执行过程 3. 阅读ECMAScript规范关键章节 来建立系统性认知。 “`

注：本文实际约980字，可根据需要增减示例。建议面试前重点理解作用域、原型链、异步处理三大核心领域。