一、JavaScript 基础语法与核心概念

1.1 变量声明与数据类型

JavaScript 的变量声明主要通过 var、let 和 const 实现，三者存在关键差异：var 存在变量提升，作用域为函数级；let 和 const 引入块级作用域，避免变量污染。数据类型分为原始类型（number、string、boolean、null、undefined、symbol、bigint）和引用类型（object、array、function）。例如：

let count = 10; // 可重新赋值
const PI = 3.14; // 不可重新赋值
const obj = { name: "Alice" };
obj.name = "Bob"; // 允许修改对象属性

1.2 运算符与流程控制

JavaScript 支持算术、比较、逻辑等运算符，其中 ==（宽松相等）与 ===（严格相等）的差异需重点注意：== 会进行类型转换，而 === 要求类型和值均相同。流程控制包括 if-else、switch、for、while 等，其中 for...of 可遍历可迭代对象（如数组），而 for...in 遍历对象属性需谨慎使用，避免遍历原型链属性。

二、函数与作用域

2.1 函数定义与调用

函数是 JavaScript 的核心，可通过函数声明、函数表达式和箭头函数定义。箭头函数简化了 this 的绑定规则，且无独立 arguments 对象。例如：

// 函数声明
function add(a, b) {
  return a + b;
}
// 箭头函数
const multiply = (x, y) => x * y;
// 高阶函数示例：map
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]

2.2 闭包与作用域链

闭包指函数能访问其定义时的作用域，即使函数在其作用域外执行。这一特性常用于封装私有变量或实现模块化。例如：

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

三、异步编程与事件循环

3.1 回调函数与 Promise

异步操作（如 setTimeout、fetch）需通过回调函数处理结果，但多层嵌套会导致“回调地狱”。Promise 通过链式调用简化流程，结合 async/await 可进一步提升可读性。例如：

// 传统回调
setTimeout(() => {
  console.log("Callback executed");
}, 1000);
// Promise 示例
fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));
// async/await 示例
async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}

3.2 事件循环机制

JavaScript 的单线程特性依赖事件循环处理异步任务。任务分为宏任务（如 setTimeout、I/O）和微任务（如 Promise.then），微任务优先级高于宏任务。理解事件循环有助于避免性能问题，例如：

console.log("Start");
setTimeout(() => console.log("Timeout"), 0);
Promise.resolve().then(() => console.log("Promise"));
console.log("End");
// 输出顺序：Start → End → Promise → Timeout

四、面向对象与原型链

4.1 构造函数与原型

JavaScript 通过构造函数和原型实现继承。构造函数中的 this 指向新创建的对象，原型（prototype）用于共享方法。例如：

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  console.log(`Hello, ${this.name}!`);
};
const alice = new Person("Alice");
alice.greet(); // Hello, Alice!

4.2 ES6 类语法

ES6 引入 class 语法糖，底层仍基于原型链。extends 关键字实现继承，super 调用父类方法。例如：

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}
class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}
const dog = new Dog("Rex");
dog.speak(); // Rex barks.

五、现代 JavaScript 特性

5.1 模块化开发

ES6 模块通过 import/export 实现代码复用和依赖管理。模块默认严格模式，且变量作用域限于模块内部。例如：

// math.js
export const add = (a, b) => a + b;
export const PI = 3.14;
// app.js
import { add, PI } from "./math.js";
console.log(add(2, 3)); // 5
console.log(PI); // 3.14

5.2 Proxy 与 Reflect

Proxy 用于定义基本操作的自定义行为（如属性访问、赋值），Reflect 提供拦截 JavaScript 操作的方法。例如：

const target = { name: "Alice" };
const handler = {
  get(target, prop) {
    if (prop in target) {
      return `[Proxy] ${target[prop]}`;
    } else {
      return "Property not found";
    }
  }
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // [Proxy] Alice
console.log(proxy.age); // Property not found

六、最佳实践与调试技巧

6.1 代码规范与工具

使用 ESLint 规范代码风格，Prettier 统一格式。避免全局变量污染，优先使用 const 和 let。对于大型项目，采用 Webpack 或 Rollup 打包，结合 Babel 转译兼容旧浏览器。

6.2 调试与性能优化

浏览器开发者工具（DevTools）的 Sources 面板可设置断点调试，Performance 面板分析运行时性能。优化技巧包括：减少 DOM 操作、使用事件委托、防抖/节流控制高频事件。例如：

// 防抖函数
function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}
const input = document.querySelector("input");
input.addEventListener("input", debounce(() => {
  console.log("Input changed");
}, 300));

七、总结与学习资源

JavaScript 的灵活性使其成为前端开发的核心语言，但需注意其动态类型和单线程特性带来的潜在问题。推荐学习资源包括 MDN Web Docs、ECMAScript 规范、以及开源项目（如 React、Vue）的源码分析。持续实践和参与社区讨论是提升技能的关键。