原型链、闭包、事件循环等概念，通过手写代码题验证理解深度

以下是 JavaScript 核心概念（原型链、闭包、事件循环）的深度解析及手写代码示例，结合高频面试题场景设计：

一、原型链实现与手写题

1. 原型链本质

机制 ‌：通过 proto 隐式原型链向上查找属性，终点为 Object.prototype.proto（null）
手写继承‌（ES5 组合继承）：

javascript 复制代码

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‌：

ini 复制代码

function myInstanceof(obj, Constructor) {

  let proto = obj.__proto__;

  while (proto) {

    if (proto === Constructor.prototype) return true;

    proto = proto.__proto__;

  }

  return false;

}

二、闭包应用与内存管理

1. 闭包核心

定义‌：函数嵌套 + 内部函数引用外部变量，形成持久词法作用域
经典场景‌：
- 模块化（私有变量）
- 防抖/节流函数

2. 手写题示例

·‌实现计数器‌：

ini 复制代码

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. 手写题示例

·‌输出顺序分析‌：

javascript 复制代码

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

console.log('4');

// 输出：1 → 4 → 3 → 2

实现 Promise.all‌：

ini 复制代码

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. 原型链 + 闭包

ini 复制代码

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. 事件循环 + 闭包

css 复制代码

for (var i = 0; i < 3; i++) {

  setTimeout(() => console.log(i), 0);

}

// 输出：3, 3, 3（var 无块级作用域）

// 修复：改用 let 或 IIFE 创建闭包作用域

五、核心要点总结

概念	关键点	面试重点
‌原型链‌	继承实现、instanceof 原理、属性查找优先级	手写继承/new 实现
‌闭包‌	词法作用域、内存泄漏、模块化应用	防抖/节流实现
‌事件循环‌	宏/微任务优先级、Promise 链式调用、async/await 转换	输出顺序分析

通过手写代码可验证对底层机制的理解深度，建议结合具体业务场景（如性能优化、状态管理）进行实践。