📖 基础知识
JavaScript 核心概念
JavaScript 是一种轻量级、解释型的编程语言，是 Web 开发的核心技术之一。深入理解其核心机制对于写出高质量代码至关重要。
闭包（Closure）
闭包是函数与其词法环境的组合。它使得函数可以"记住"并访问其定义时的作用域，即使在外部函数执行完毕后。
- 闭包可以访问外部函数的变量
- 闭包可以延长外部变量的生命周期
- 闭包广泛应用于模块化、数据封装等场景
原型链与继承
JavaScript 使用原型链实现继承。每个对象都有一个内部属性 [[Prototype]]，指向其原型对象。
异步编程
JavaScript 是单线程语言，异步编程是其核心特性之一：
- 回调函数：最早的异步处理方式
- Promise：更优雅的异步解决方案
- async/await：基于 Promise 的语法糖，代码更易读
- 事件循环：理解宏任务和微任务的执行顺序
📸 图文教程
步骤一：理解闭包
function createCounter() {
let count = 0;
return {
increment: function() { count++; return count; },
decrement: function() { count--; return count; },
getCount: function() { return count; }
};
}
const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount()); // 2
步骤二：Promise 的使用
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = { id: 1, name: 'John' };
resolve(data);
}, 1000);
});
};
fetchData()
.then(data => console.log(data))
.catch(err => console.error(err));
步骤三：async/await 语法
async function getUserData() {
try {
const response = await fetch('/api/user');
const user = await response.json();
return user;
} catch (error) {
console.error('获取用户数据失败:', error);
}
}
💻 代码实操
阅读以下代码，理解实现原理，然后尝试修改并运行
实践任务：手写 Promise
class MyPromise {
constructor(executor) {
this.state = 'pending';
this.value = undefined;
this.callbacks = [];
const resolve = (value) => {
if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
this.callbacks.forEach(cb => cb.onFulfilled(value));
}
};
const reject = (reason) => {
if (this.state === 'pending') {
this.state = 'rejected';
this.value = reason;
this.callbacks.forEach(cb => cb.onRejected(reason));
}
};
try {
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
then(onFulfilled, onRejected) {
return new MyPromise((resolve, reject) => {
if (this.state === 'fulfilled') {
try {
const result = onFulfilled(this.value);
resolve(result);
} catch (err) {
reject(err);
}
} else if (this.state === 'rejected') {
if (onRejected) {
try {
const result = onRejected(this.value);
resolve(result);
} catch (err) {
reject(err);
}
}
} else {
this.callbacks.push({ onFulfilled, onRejected });
}
});
}
}
练习任务
- 为 MyPromise 添加 catch 方法
- 实现 Promise.all 方法
- 添加 finally 方法支持