1. 从“会用”到“懂它”为什么我们要模拟实现函数在编程这条路上我们经常会遇到一个分水岭你只是会调用一个函数还是真正理解这个函数是如何工作的。调用一个函数比如Array.prototype.map你只需要知道它接收一个回调函数返回一个新数组这很简单。但当你被问到“如果浏览器不支持这个函数你如何自己实现一个”时很多人就卡壳了。这就是“会用”和“懂它”之间的鸿沟。模拟实现一个函数本质上是一次深度的源码阅读和设计思维训练。它强迫你跳出“用户”的舒适区站到“设计者”和“实现者”的角度去思考。这个过程能帮你彻底吃透一个API的边界条件、性能考量和设计哲学。比如Array.prototype.map在遇到稀疏数组时行为是怎样的this的指向如何处理如果回调函数中抛出了错误原数组还会被继续遍历吗这些细节光靠调用是永远体会不到的。更重要的是在面试或解决一些棘手的兼容性问题时这种能力至关重要。老旧的浏览器环境、特殊的运行环境如某些小程序早期版本或封闭的嵌入式环境可能不支持最新的ES标准。这时如果你能徒手写出一个健壮的polyfill垫片问题就迎刃而解了。所以模拟实现不是炫技而是一项扎实的内功它能让你在面对任何黑盒时都有能力去拆解、理解和重建。2. 模拟实现的通用方法论与核心原则在动手写代码之前我们必须建立一套清晰的思考框架。盲目开始很容易遗漏关键细节写出一个有缺陷的实现。这个框架我称之为“四步拆解法”。2.1 第一步精确理解官方规范的行为这是最重要的一步也是大多数模拟实现出错的根源。你不能凭感觉必须依据标准。对于JavaScript内置函数最权威的参考是ECMAScript语言规范ECMA-262。虽然直接读规范很枯燥但我们可以通过高保真的方式去测试和归纳。具体做法是设计全面的测试用例。你需要像一个测试工程师一样思考覆盖所有可能的输入和边界情况。以函数为例你需要测试基础功能正常数组、正常回调。this绑定回调函数中使用了this且调用map时传入了第二个参数thisArg。稀疏数组[1, , 3]这样的数组中间的空位应该被跳过吗回调函数会被执行几次非数组对象如果一个对象拥有length属性和数字索引它能被当作“类数组”处理吗异常处理回调函数执行时抛出错误遍历是否立即停止副作用在回调函数中修改原数组增加、删除元素会对遍历过程产生什么影响你可以先在现代浏览器或Node.js中用原生方法运行这些测试记录下所有行为这就是你的“标准答案”。模拟实现的目标就是让你的函数输出与这些“标准答案”完全一致。2.2 第二步确定实现的核心算法与数据结构明确了行为接下来要设计实现路径。这里有几个关键决策点遍历方式用for循环、while循环还是for...in/for...of对于数组方法通常使用最基本的for循环并以length属性为界因为这样最能精确控制索引并且能正确处理可能被修改的length。结果收集结果存储在哪里通常需要预先创建一个空数组或对象在遍历过程中填充。回调调用如何调用用户传入的回调函数是直接callback(item, index)吗不还需要处理thisArg参数正确设置回调函数内部的this值。这里会用到Function.prototype.call或Function.prototype.apply。边界处理在遍历开始前是否需要校验调用者this是否为null或undefined是否需要校验第一个参数回调函数是否为函数类型这些防御性编程能让你的实现更健壮。2.3 第三步处理this绑定与上下文这是JavaScript特有的难点也是模拟实现中最容易出错的地方之一。你需要清楚地区分两个this方法调用者的this即调用myArray.map(...)中的myArray。在你的模拟函数内部它通过函数本身的this关键字访问。你需要确保你的函数在被各种对象调用时都能正确访问到目标数据。回调函数的this即用户传入的回调函数在执行时其内部的this指向谁。根据规范如果调用map时传入了第二个参数thisArg则回调中的this应指向thisArg否则在非严格模式下是全局对象如window在严格模式下是undefined。正确处理后者通常的代码模式是// 在循环内部 if (thisArg) { mappedValue callback.call(thisArg, currentValue, currentIndex, originalArray); } else { mappedValue callback(currentValue, currentIndex, originalArray); }使用Function.prototype.call可以显式地设置函数执行时的this值。2.4 第四步防御性编程与错误处理一个工业级的实现必须考虑鲁棒性。这意味着类型检查在函数开头检查this是否为null或undefined如果是通常应该抛出一个TypeError。参数校验检查第一个参数是否是函数。如果不是也必须抛出TypeError。安全遍历在遍历过程中原数组可能会被回调函数修改。一个常见的陷阱是如果你在回调里push了新元素到原数组基于初始length的简单for循环可能会导致无限循环或遗漏新增元素。更安全的做法是在循环的每一轮都重新获取this.length或者先将关键信息如初始长度缓存起来。但根据规范map方法在开始执行时就确定了遍历的范围后续对数组的修改不应影响本次遍历的项数。因此更正确的做法是在循环开始前将length转换为一个数字并固定下来var len this.length 0;。这里使用无符号右移操作符 0是一个经典技巧它可以将任何值转换为一个32位无符号整数这对于处理非数字的length或负数非常有效。3. 经典案例拆解一手写Array.prototype.map让我们将上述方法论应用到第一个经典案例上。map方法创建一个新数组其结果是该数组中的每个元素都调用一次提供的回调函数后的返回值。3.1 行为分析与测试用例设计首先我们通过测试明确原生map的行为// 测试用例 const arr [1, 2, 3]; const result arr.map((item, index, array) { console.log(item, index, array); return item * 2; }); console.log(result); // [2, 4, 6] // 测试 thisArg const obj { multiplier: 10 }; const result2 arr.map(function(item) { return item * this.multiplier; }, obj); console.log(result2); // [10, 20, 30] // 测试稀疏数组 const sparseArr [1, , 3]; // 中间是空位 const result3 sparseArr.map((item, index) { console.log(Index ${index} is visited.); // 只会打印 Index 0 和 Index 2 return item; }); console.log(result3); // [1, empty, 3] 结果数组同位置也是空位 // 测试在回调中修改原数组 const mutatingArr [1, 2, 3]; const result4 mutatingArr.map((item, index, array) { if (index 0) { array.push(4); // 修改原数组 } return item; }); console.log(result4); // [1, 2, 3] console.log(mutatingArr); // [1, 2, 3, 4] 已被修改从测试中我们可以总结出关键行为1) 回调接收三个参数2) 支持thisArg3) 跳过稀疏数组的空位4) 遍历的范围在方法开始时确定后续push不影响本次遍历次数。3.2 分步实现与代码详解现在我们根据规范一步步实现它。我们将把实现挂载到Array.prototype上但更推荐的做法是作为一个独立的函数以避免污染原生原型。// 独立函数形式更安全 function myMap(callback, thisArg) { // 1. 防御性检查确保调用者存在 if (this null) { // 同时检查 null 和 undefined throw new TypeError(Array.prototype.map called on null or undefined); } // 2. 防御性检查确保 callback 是可调用的 if (typeof callback ! function) { throw new TypeError(callback is not a function); } // 3. 获取调用对象O和其长度len // 使用 Object(this) 将原始值转换为对象保证方法通用性 const O Object(this); // 将 length 转换为 32 位无符号整数。 0 是关键 // 例如null 0 0, undefined 0 0, -1 0 4294967295 const len O.length 0; // 4. 初始化结果数组 // 根据规范结果数组的长度与原始数组的“长度”相同 const A new Array(len); // 5. 核心遍历逻辑 let k 0; while (k len) { // 关键点检查属性是否存在。这是处理稀疏数组的核心。 // in 操作符会检查原型链但数组索引通常为自有属性所以更精确的检查是 hasOwnProperty。 // 规范中使用的是 HasProperty 抽象操作这里用 in 是一个简化的近似实现。 if (k in O) { const kValue O[k]; // 调用回调正确处理 thisArg let mappedValue; if (thisArg) { mappedValue callback.call(thisArg, kValue, k, O); } else { mappedValue callback(kValue, k, O); } // 将结果赋值给新数组的对应索引 A[k] mappedValue; } else { // 如果当前索引不存在稀疏数组的空位则结果数组的同位置也保持为空。 // 在 JavaScript 中我们不需要显式地创建空位数组自动就是稀疏的。 // 但为了清晰我们可以选择不进行任何操作或者显式地赋值。 // 实际上新数组 A 在初始化时就已经有了长度 len所有未赋值的索引默认就是空位。 } k; } // 6. 返回新数组 return A; } // 可以将其挂载到原型上谨慎操作 // Array.prototype.myMap myMap;关键点解析const len O.length 0;这是整个实现的精髓之一。它确保了len是一个非负整数。即使O是一个{length: -1}的对象-1 0的结果是4294967295这虽然可能不是我们想要的但遵循了将非数字转换为无符号整数的规则避免了后续循环因负数或非数字而出错。if (k in O)这个检查至关重要。它确保了只对实际存在的元素调用回调函数。对于[1, , 3]1 in O为true2 in O为false因为索引1处是空位不存在属性‘1’3 in O为true。这样就完美跳过了稀疏数组的空位。callback.call(thisArg, ...)使用call方法显式绑定this值是实现thisArg参数功能的标准方式。3.3 常见陷阱与进阶思考性能在循环中频繁使用in操作符或hasOwnProperty检查会有一定的性能开销但这是为了符合规范行为必须付出的代价。在绝对性能优先且确定数组非稀疏的场景下可以省略检查。arguments对象我们的myMap函数也能正确处理arguments这类类数组对象因为Object(arguments)会返回一个包含length和索引属性的对象。严格模式我们的实现没有考虑严格模式对回调函数内this的默认绑定影响。因为在调用回调时我们使用了callback.call(...)或直接调用其this绑定由我们控制。如果thisArg未提供直接调用callback(...)在严格模式下回调内的this会是undefined这符合规范。Polyfill如果要作为一个真正的polyfill添加到Array.prototype上还需要先检查Array.prototype.map是否存在只有不存在时才进行添加避免覆盖原生实现。4. 经典案例拆解二手写Function.prototype.bindbind方法比map更复杂它涉及函数柯里化Currying和this的永久绑定。它创建一个新函数当被调用时将其this关键字设置为提供的值并在调用新函数时将给定参数列表作为原函数的参数序列的前若干项。4.1bind方法的特殊行为分析bind的核心特性可以概括为永久绑定this返回的新函数其内部的this被永久固定为bind的第一个参数。参数柯里化bind可以接收多个参数这些参数会预置到返回的新函数中。当调用新函数时传入的参数会接在预置参数后面。构造函数特性使用new操作符调用bind返回的函数时绑定的this值会被忽略原函数会被当作构造函数执行。这是最容易被忽略也最难实现的一点。原型链维护返回的函数实例应该继承自原函数的原型。4.2 实现一个基础版本的bind我们先实现一个满足前两个特性的基础版本暂时忽略new操作的情况。Function.prototype.myBind function(thisArg, ...presetArgs) { // 保存原函数因为返回的新函数需要调用它 const originalFunc this; // 如果 originalFunc 不是函数需要报错 if (typeof originalFunc ! function) { throw new TypeError(Function.prototype.bind called on non-function); } // 返回一个新的函数 const boundFunc function(...runtimeArgs) { // 合并预设参数和运行时参数 const finalArgs presetArgs.concat(runtimeArgs); // 使用 apply 调用原函数并绑定 thisArg 作为 this return originalFunc.apply(thisArg, finalArgs); }; return boundFunc; };这个版本很简单它用闭包保存了原函数originalFunc、绑定的thisArg和预设参数presetArgs。当boundFunc被调用时它合并参数并用apply调用原函数。4.3 攻克难点支持new操作符上面的实现在遇到new操作符时会出错。因为当我们new boundFunc(...)时boundFunc内部的this即thisArg应该是新创建的实例对象而不是bind时传入的那个thisArg。规范规定new操作符的优先级高于bind的硬绑定。为了检测函数是否被new调用我们需要在boundFunc内部进行判断。这可以通过检查this的构造函数链来实现一个更直接的方法是使用new.targetES6或者判断this是否是boundFunc的实例。使用new.target的实现ES6Function.prototype.myBind function(thisArg, ...presetArgs) { const originalFunc this; if (typeof originalFunc ! function) { throw new TypeError(Function.prototype.bind - target must be callable); } const boundFunc function(...runtimeArgs) { const finalArgs presetArgs.concat(runtimeArgs); // 关键判断如果 new.target 存在说明是通过 new 调用的 // new.target 在构造函数调用时指向正在被构造的函数即 boundFunc const isNewCall new.target ! undefined; if (isNewCall) { // 通过 new 调用忽略绑定的 thisArg原函数作为构造函数执行 // this 指向新创建的实例 return originalFunc.apply(this, finalArgs); } else { // 普通调用使用绑定的 thisArg return originalFunc.apply(thisArg, finalArgs); } }; // 维护原型链让 boundFunc 的 prototype 继承自 originalFunc 的 prototype // 这样通过 new boundFunc() 创建的实例能访问原构造函数原型上的方法 // 注意不能直接 boundFunc.prototype originalFunc.prototype这会导致修改相互影响 // 需要一个中间的空函数来连接原型链 const EmptyFunc function() {}; EmptyFunc.prototype originalFunc.prototype; boundFunc.prototype new EmptyFunc(); return boundFunc; };兼容 ES5 的实现使用instanceof判断Function.prototype.myBind function(thisArg) { var originalFunc this; if (typeof originalFunc ! function) { throw new TypeError(Function.prototype.bind - target not callable); } // 将预设参数从 arguments 中提取出来注意去掉第一个 thisArg var presetArgs Array.prototype.slice.call(arguments, 1); var boundFunc function() { // 合并运行时参数 var runtimeArgs Array.prototype.slice.call(arguments); var finalArgs presetArgs.concat(runtimeArgs); // 判断是否通过 new 调用检查 this 是否是 boundFunc 的实例 // 当通过 new boundFunc() 调用时this 指向新创建的对象其原型链上有 boundFunc.prototype var isNewCall this instanceof boundFunc; // 也可以通过 this.constructor boundFunc 判断但 instanceof 更可靠 return originalFunc.apply( isNewCall ? this : thisArg, finalArgs ); }; // 维护原型链 var EmptyFunc function() {}; EmptyFunc.prototype originalFunc.prototype; boundFunc.prototype new EmptyFunc(); return boundFunc; };4.4bind实现中的精妙之处与边界情况原型链桥接boundFunc.prototype new EmptyFunc()这行代码是精髓。EmptyFunc的原型指向originalFunc.prototype那么new EmptyFunc()创建的实例其__proto__就指向originalFunc.prototype。再将这个实例赋值给boundFunc.prototype就实现了boundFunc.prototype.__proto__ originalFunc.prototype。这样通过new boundFunc()创建的对象既能访问boundFunc.prototype上添加的属性又能通过原型链访问到原构造函数originalFunc.prototype上的方法。length属性规范的bind返回的函数其length属性应该是原函数的形参个数减去预绑定的参数个数最小为0。我们的简易实现没有处理这个细节一个完整的polyfill需要计算并设置boundFunc.length。不可覆写的属性caller,arguments等属性在严格模式下或某些环境下可能是不可写的完整的polyfill如 MDN 上提供的会使用Object.defineProperty来定义这些属性并设置其enumerable: false来模拟原生行为。5. 从模拟到创新Promise核心逻辑的模拟实现Promise的模拟实现是一个更大的挑战它涉及状态机、异步调度和链式调用。我们这里实现一个极简的、用于理解核心原理的版本不追求完全符合 A 规范。5.1 定义状态与基础结构一个Promise有三种状态pending等待、fulfilled成功、rejected失败。状态一旦改变就不可再变。const PENDING pending; const FULFILLED fulfilled; const REJECTED rejected; class MyPromise { constructor(executor) { this.state PENDING; this.value undefined; // 成功的结果值 this.reason undefined; // 失败的原因 this.onFulfilledCallbacks []; // 成功回调队列 this.onRejectedCallbacks []; // 失败回调队列 const resolve (value) { if (this.state PENDING) { this.state FULFILLED; this.value value; // 执行所有成功的回调 this.onFulfilledCallbacks.forEach(cb cb()); } }; const reject (reason) { if (this.state PENDING) { this.state REJECTED; this.reason reason; // 执行所有失败的回调 this.onRejectedCallbacks.forEach(cb cb()); } }; try { // 立即执行执行器函数 executor(resolve, reject); } catch (error) { // 如果执行器抛出异常直接 reject reject(error); } } }这个结构包含了状态、结果/原因以及两个回调队列。为什么需要队列因为then方法可以被多次调用在Promise未决pending时需要将回调函数存储起来等状态改变后再依次执行。5.2 实现then方法与链式调用then方法是Promise的灵魂。它接收两个可选参数onFulfilled和onRejected并返回一个新的Promise这是实现链式调用的关键。then(onFulfilled, onRejected) { // 参数可选如果不是函数则创建一个“透传”函数 onFulfilled typeof onFulfilled function ? onFulfilled : value value; onRejected typeof onRejected function ? onRejected : reason { throw reason; }; // 返回一个新的 Promise const promise2 new MyPromise((resolve, reject) { // 封装一个通用的处理函数 const handle (callback, valueOrReason, isFulfilled) { // 使用 setTimeout 模拟微任务简化处理。实际 Promise 使用微任务队列。 setTimeout(() { try { const result callback(valueOrReason); // 如果返回值是一个 Promise则等待它的状态 if (result instanceof MyPromise) { result.then(resolve, reject); } else { // 否则用返回值直接 resolve promise2 isFulfilled ? resolve(result) : reject(result); } } catch (error) { // 如果回调执行出错则 reject promise2 reject(error); } }, 0); }; if (this.state FULFILLED) { handle(onFulfilled, this.value, true); } else if (this.state REJECTED) { handle(onRejected, this.reason, false); } else if (this.state PENDING) { // 状态未决将回调包装后存入队列 this.onFulfilledCallbacks.push(() handle(onFulfilled, this.value, true)); this.onRejectedCallbacks.push(() handle(onRejected, this.reason, false)); } }); return promise2; }核心逻辑解析返回值穿透如果onFulfilled或onRejected不是函数我们将其替换为一个默认函数。对于onFulfilled默认函数将接收到的值原样返回value value对于onRejected默认函数将接收到的原因抛出reason { throw reason; }。这实现了值的穿透例如Promise.resolve(1).then().then(console.log)会打印出1。链式调用then方法返回一个新的promise2。promise2的状态由then中回调函数的执行结果决定。异步执行我们使用setTimeout将回调的执行放入任务队列模拟微任务的异步行为真实的Promise使用微任务如queueMicrotask或MutationObserver。这保证了then回调总是在当前同步代码执行完毕后才会执行。Promise 解析过程这是最复杂的一部分。如果回调函数返回了一个值x我们需要根据x的类型来决定promise2的状态。在我们的简化版中只判断了x是否是MyPromise实例。如果是则promise2的状态由x决定x.then(resolve, reject)如果不是则promise2直接resolve(x)。完整的 Promise A 规范有更复杂的[[Resolve]](promise2, x)过程用于处理thenable对象等。5.3 实现catch与finally有了thencatch和finally就很容易实现了。catch(onRejected) { // catch 就是 then(null, onRejected) 的语法糖 return this.then(null, onRejected); } finally(callback) { // finally 不关心 Promise 的最终状态它总是会执行回调 // 并且会将上一个 Promise 的结果或原因原样传递下去 return this.then( value MyPromise.resolve(callback()).then(() value), reason MyPromise.resolve(callback()).then(() { throw reason; }) ); } // 静态方法 resolve 和 reject static resolve(value) { // 如果 value 已经是 Promise直接返回 if (value instanceof MyPromise) return value; // 否则包装成一个成功的 Promise return new MyPromise(resolve resolve(value)); } static reject(reason) { // 直接返回一个失败的 Promise return new MyPromise((_, reject) reject(reason)); }finally的实现比较巧妙它返回一个新的 Promise这个 Promise 会等待callback()执行完毕无论成功失败然后根据原 Promise 的状态将原值或原因继续传递下去。注意callback()本身也可能返回一个 Promise所以需要用MyPromise.resolve包裹一下确保等待其完成。5.4 简易Promise实现的局限性与启示我们这个MyPromise是一个教学版本它清晰地展示了状态机、回调队列、链式调用和值穿透的核心思想。但它与真正的Promise还有很大差距微任务我们用了setTimeout宏任务模拟而规范要求是微任务这会导致执行时序的差异。完整的 Promise 解析我们没有实现完整的Promise Resolution Procedure无法处理复杂的thenable对象。静态方法只实现了resolve和reject缺少all,race,allSettled等。错误处理一些边界情况的错误处理可能不完善。尽管如此通过这个模拟实现你已经穿透了Promise这个黑盒理解了它如何管理状态、如何调度异步回调、如何实现链式“管道”。下次当你使用then和catch时你脑中将不再是一片模糊的“异步魔法”而是一个清晰的状态流转图。这才是模拟实现带来的最大价值——将未知变为已知将神秘变为清晰。当你再遇到任何复杂的 API这套“拆解-测试-实现-验证”的方法论就是你理解和掌握它的最强工具。