LuLu学前端-优快云博客

原创 js手撕代码8：浅拷贝和深拷贝

首先明白一句话：基本数据类型直接把值存储在变量的栈内存中，而引用类型的数据存储在堆中，变量本身在栈中存储的是指向堆的“地址”。然后看下面的手写代码。

2025-12-02 14:32:36 149

原创 js手撕代码7: Function.prototype.call & apply & bind (考察对this指向的理解)

本文介绍了JavaScript中call、apply、bind三个方法的核心作用：显式指定函数的this指向。三者区别在于：1) call立即执行函数，接收参数列表；2) apply立即执行函数，接收参数数组；3) bind返回新函数，接收参数列表但延迟执行。文章提供了手写实现代码，并通过示例展示了它们的用法：call和apply会立即执行函数并返回结果，而bind会返回一个永久绑定this的新函数。关键区别在于参数传递方式和执行时机，但本质上都是解决函数this指向问题的方法。

2025-11-26 15:22:50 393

原创 js手撕代码6: Object.create

本文介绍了如何手写实现Object.create()方法，其核心是通过临时构造函数将新对象的原型指向传入的对象。代码示例展示了如何使用自定义的myCreate()函数：首先定义一个空构造函数Temp，将其原型指向传入对象，然后返回Temp的新实例。文章还通过Person构造函数的实例演示了原型继承的实际应用，包括原型方法调用和原型链验证。最后说明了Object.create()可用于继承数组原型等场景，清晰地展示了原型链的继承关系。

2025-11-26 09:20:10 132

原创 js手撕代码5: new（考察对对象实例过程的理解）

本文实现了一个自定义的myNew函数来模拟new运算符的功能。该函数首先验证输入是否为构造函数，然后创建新对象并设置原型链，接着执行构造函数并绑定this指向。关键点在于处理构造函数的返回值：若返回对象或函数则直接返回，否则返回新创建的对象。通过多个示例（包括自定义构造函数和内置对象）验证了其正确性，涵盖了构造函数返回不同值类型的情况。

2025-11-25 11:35:29 102

原创 js手撕代码4: instanceof（考察对原型链的理解）

文章摘要：本文实现了一个自定义的myInstanceof函数来模拟JavaScript中的instanceof运算符功能。该函数通过检查对象的原型链是否包含构造函数的prototype属性来判断实例关系。关键点包括：1) 防御性处理非对象/函数类型；2) 使用Object.getPrototypeOf()获取原型；3) 循环遍历原型链进行比对。测试案例覆盖了普通对象、构造函数实例、数组、内置对象和函数对象等多种情况，验证了函数正确性。该实现有助于深入理解JavaScript的原型链机制。

2025-11-25 11:34:15 264

原创一文概览 React 的组件通信

React组件通信方法总结：1.props实现父子组件双向通信，需注意React与ReactDOM中props的区别；2.React通过props.children、自定义props传JSX和RenderProps三种方式模拟Vue的插槽功能；3.Context机制实现跨层级组件数据传递；4.此外还可使用Redux等状态管理库。

2025-11-02 12:41:18 254

原创一文概览 Vue 2 和 Vue 3 的组件通信及区别

Vue3与Vue2组件通信方式对比：父子组件主要通过props/$emit/v-model/slot等；祖孙组件使用$attrs/provide-inject；任意组件使用mitt/pinia。Vue3主要变化包括移除事件总线/改用mitt，vuex替换为pinia，合并.sync到v-model，$listeners并入$attrs，移除$children特性。Vue3在保持核心通信机制的同时，简化了部分API，引入更现代的状态管理方案。

2025-11-01 18:08:58 261

原创 js手撕代码3：树形结构和列表结构相互转化(.ts)

本文介绍了树形结构与列表结构相互转换的两种实现方法。在treeToList.ts中，使用深度优先搜索(DFS)将树形数据递归转换为列表结构。在listToTree.ts中提供了两种方案：O(n²)的简单实现通过双重循环构建树形结构；更高效的O(n)实现则利用哈希表存储节点，再通过两次遍历完成转换。文章还给出了TypeScript文件的传统运行方法：先安装TypeScript，编译.ts文件为.js，再用Node运行。两种数据结构转换是大厂常见面试题，对前端开发有重要实践意义。

2025-07-09 15:19:53 343

原创 js手撕代码2: render函数和一个场景题(树形菜单渲染)

摘要：文章剖析了Render函数作为连接数据与视图的核心机制，通过实现json2dom简化版演示了虚拟DOM到真实DOM的转换过程。重点展示了通用Render函数实现，包括节点类型处理、属性绑定、事件监听和递归子节点渲染，并应用于树形菜单场景。两种实现方式对比（直接操作给定普通对象与虚拟DOM渲染）揭示了底层原理的一致性，体现了声明式UI管理的核心思想。代码示例涵盖样式控制、事件处理和DOM操作等关键技术点。

2025-07-08 00:35:22 771

原创 js手撕代码1: Promise和Promise.all()

【摘要】本文系统介绍了ES6 Promise的核心概念与应用：1) Promise作为异步编程解决方案，具有pending、fulfilled、rejected三种状态；2) 详细解析实例方法（then/catch/finally）和静态方法（all/race）；3) 重点剖析Promise.all的实现原理，通过可迭代对象处理、异步结果收集等机制实现多任务并行处理；4) 提供三个随机数生成的Promise应用示例，演示Promise.all的实际使用场景。

2025-07-01 17:00:05 358

2501_91987533的博客