以下是 JavaScript 核心概念（原型链、闭包、事件循环）的深度解析及手写代码示例，结合高频面试题场景设计：
一、原型链实现与手写题
1. 原型链本质
-
机制：通过 proto 隐式原型链向上查找属性，终点为 Object.prototype.proto（null）
-
手写继承（ES5 组合继承）：
function Parent(name) {
this.name = name;
}
Parent.prototype.sayName = 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; // 修复构造函数指向
2. 高频面试题
- 实现 instanceof：
function myInstanceof(obj, Constructor) {
let proto = obj.__proto__;
while (proto) {
if (proto === Constructor.prototype) return true;
proto = proto.__proto__;
}
return false;
}
二、闭包应用与内存管理
1. 闭包核心
-
定义：函数嵌套 + 内部函数引用外部变量，形成持久词法作用域
-
经典场景：
-
模块化（私有变量）
-
防抖/节流函数
-
2. 手写题示例
·实现计数器：
function createCounter() {
let count = 0;
return {
increment: () => ++count,
getCount: () => count
};
}
const counter = createCounter();
counter.increment(); // 1
- 内存泄漏风险：未使用的闭包变量需手动解除引用（如 counter = null）
三、事件循环与异步编程
1. 执行机制
-
宏任务：script、setTimeout、setInterval
-
微任务：Promise.then、MutationObserver
-
执行顺序：同步代码 → 微任务队列清空 → 宏任务
2. 手写题示例
·输出顺序分析：
console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
// 输出：1 → 4 → 3 → 2
- 实现 Promise.all：
function promiseAll(promises) {
return new Promise((resolve, reject) => {
let results = [];
let completed = 0;
promises.forEach((promise, i) => {
Promise.resolve(promise)
.then(res => {
results[i] = res;
if (++completed === promises.length) resolve(results);
})
.catch(reject);
});
});
}
四、综合面试题
1. 原型链 + 闭包
function Foo() {
this.name = 'foo';
this.say = function() { console.log(this.name); };
}
Foo.prototype.name = 'prototype';
const foo = new Foo();
foo.say(); // 'foo'（实例属性优先）
foo.__proto__.say(); // TypeError（原型链无此方法）
2. 事件循环 + 闭包
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 0);
}
// 输出：3, 3, 3（var 无块级作用域）
// 修复：改用 let 或 IIFE 创建闭包作用域
五、核心要点总结
| 概念 | 关键点 | 面试重点 |
|---|---|---|
| 原型链 | 继承实现、instanceof 原理、属性查找优先级 | 手写继承/new 实现 |
| 闭包 | 词法作用域、内存泄漏、模块化应用 | 防抖/节流实现 |
| 事件循环 | 宏/微任务优先级、Promise 链式调用、async/await 转换 | 输出顺序分析 |
通过手写代码可验证对底层机制的理解深度，建议结合具体业务场景（如性能优化、状态管理）进行实践。
