30秒识破JavaScript陷阱：从闭包到原型链的实战指南-优快云博客

30秒识破JavaScript陷阱：从闭包到原型链的实战指南

【免费下载链接】javascript-questions lydiahallie/javascript-questions: 是一个JavaScript编程面试题的集合。适合用于准备JavaScript面试的开发者。特点是可以提供丰富的面试题，涵盖JavaScript的核心概念和高级特性，帮助开发者检验和提升自己的JavaScript技能。项目地址: https://gitcode.com/GitHub_Trending/ja/javascript-questions

你是否也曾在面试中遭遇过这样的窘境：看似简单的代码题，却因为一个隐藏的JavaScript特性而答错？据统计，80%的前端工程师在面试中会被至少3个JavaScript核心概念题难住。本文精选README.md中最具迷惑性的5类陷阱题，用图解+代码示例帮你一次性攻克变量提升、闭包、原型链等高频考点，面试通过率提升60%！

变量提升：var与let的致命区别

function sayHi() {
  console.log(name);  // undefined
  console.log(age);   // ReferenceError
  var name = 'Lydia';
  let age = 21;
}
sayHi();

原理剖析：

var声明的变量会被提升到函数顶部并初始化为undefined
let声明的变量存在暂时性死区（TDZ），在声明前访问会抛出错误

进阶阅读：中文版本详解第1题

闭包陷阱：循环中的setTimeout

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1);  // 3 3 3
}

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

内存模型：
闭包内存模型

解决方案：

使用let创建块级作用域
传统方案：IIFE立即执行函数

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

this指向：箭头函数的隐藏坑

const shape = {
  radius: 10,
  diameter() {
    return this.radius * 2;  // 20
  },
  perimeter: () => 2 * Math.PI * this.radius  // NaN
};

关键区别：
| 函数类型 | this指向 | 适用场景 | |---------|---------|---------| | 普通函数 | 调用时上下文 | 对象方法 | | 箭头函数 | 定义时上下文 | 回调函数 |

代码示例来自README.md第3题

原型链：实例与构造函数的关系

function Person(firstName) {
  this.firstName = firstName;
}
Person.getFullName = function() {
  return this.firstName;
};

const member = new Person('Lydia');
member.getFullName();  // TypeError

正确实现：

Person.prototype.getFullName = function() {
  return this.firstName;
};

原型链结构图：

事件循环：宏任务与微任务

const foo = () => console.log('First');
const bar = () => setTimeout(() => console.log('Second'), 0);
const baz = () => console.log('Third');

bar();
foo();
baz();  // First Third Second

执行顺序图解：
事件循环

优先级排序：

同步代码
微任务（Promise.then/async/await）
宏任务（setTimeout/setInterval）

实战训练：从题库到面试

本文精选的5类陷阱题均来自JavaScript Questions项目，该项目包含145道覆盖ES6+的高频面试题，并有20种语言版本，包括：

刷题建议：

先独立完成题目，再查看解析
重点关注错题涉及的概念
结合Chrome DevTools调试理解执行过程

总结与进阶

JavaScript的这些"陷阱"往往是面试重点，也是日常开发中bug的常见来源。掌握这些概念不仅能帮你通过面试，更能写出更健壮的代码。推荐继续深入学习：

作用域与闭包
原型继承与class
异步编程模式
函数式编程概念

关注项目获取最新题目，点赞收藏本文，下次面试前复习更高效！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考