1. 函数与作用域体系

• 函数定义方式：

  javascript// 函数声明function add(a, b) { return a + b; }// 函数表达式const multiply = function(x, y) { return x * y; }// 箭头函数const square = n => n * n;

• 调用模式对比：

  调用方式	this指向	适用场景
  普通调用	window/undefined	工具函数
  方法调用	调用对象	对象方法
  new调用	新创建对象	构造函数

2. 面向对象编程

• 类与继承实现：

  javascriptclass Animal {  constructor(name) { this.name = name; }  speak() { console.log(`${this.name} makes a noise.`); }}class Dog extends Animal {  speak() { super.speak(); console.log('Woof!'); }}

3. JSON数据处理

• 数据转换示例：

  javascript// 对象序列化const user = {name: 'John', age: 30};const json = JSON.stringify(user); // 数据解析const obj = JSON.parse('{"score":95}');

▍DOM编程实战模块

1. 节点操作技术

• 常用节点访问方法：

  javascriptdocument.getElementById('header');          // ID精确查找document.querySelector('.menu-item');      // CSS选择器document.getElementsByTagName('p');         // 标签集合

2. 动态页面构建

• 元素创建与插入：

  javascriptconst newDiv = document.createElement('div');newDiv.className = 'alert';newDiv.innerHTML = '<strong>提示!</strong> 操作成功';document.body.appendChild(newDiv);

▍综合实战项目：俄罗斯方块开发

1. 核心算法实现

• 游戏矩阵处理：

  javascriptconst matrix = Array(20).fill().map(() => Array(10).fill(0));function rotate(piece) {  const N = piece.length;  const newPiece = piece[0].map((_, i) =>     piece.map(row => row[i]).reverse()  );  return newPiece;}

2. 键盘事件处理

• 控制逻辑实现：

  javascriptdocument.addEventListener('keydown', event => {  switch(event.keyCode) {    case 37: // 左移      currentPosX--;      break;    case 39: // 右移      currentPosX++;      break;    case 40: // 加速下落      dropInterval = 50;      break;  }});

3. 渲染性能优化

• Canvas绘制参数：

  javascriptconst canvas = document.getElementById('gameBoard');const ctx = canvas.getContext('2d');ctx.fillStyle = '#FF0000';ctx.fillRect(0, 0, 30, 30); // 绘制方块单元