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

以下是 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 转换 输出顺序分析

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

相关推荐
quan263119 分钟前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
GIS之路20 分钟前
GDAL 读取影像元数据
前端
qb1 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
小桥风满袖1 小时前
极简三分钟ES6 - 类与继承
前端·javascript
虫无涯1 小时前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
子兮曰1 小时前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f1 小时前
📦 qiankun微前端接入实战
前端·javascript·面试
小桥风满袖1 小时前
极简三分钟ES6 - Symbol
前端·javascript
子兮曰1 小时前
🚀Map的20个神操作,90%的开发者浪费了它的潜力!最后的致命缺陷让你少熬3天夜!
前端·javascript·ecmascript 6
NewChapter °1 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app