手写 new、bind、call、apply：彻底搞懂 JavaScript 函数调用机制与 this 指向

前端面试无论是校招还是社招几乎都会有一道“手写题”环节。而手写 new、bind、call、apply 这四个方法是我见过出现频率最高的一组甚至可以说是前端八股文里的“钉子户”。我最早看到这个题目时只觉得无聊毕竟日常开发基本靠 ES6 的箭头函数、class、展开运算符谁还去折腾 this 呢但后来换到面试官的位置问过几十个候选人之后我慢慢意识到这道题考的根本不是你能不能背出四段代码而是你有没有真正理解 JavaScript 的函数调用机制、原型链和闭包。网上关于这四个方法的实现版本很多但大多数只给了最终代码没讲清楚每一步为什么这么写。这次我把自己的理解完整梳理一遍从原理到实现、从边界条件到面试追问尽量用大白话讲明白。如果你正在准备前端面试或者带团队时需要帮新人补基础这篇文章应该能省你不少事。1. 面试官为什么揪着这四个方法不放1.1 表面考 API实际考 JS 底层机制“new、bind、call、apply”看起来是四个独立 API但背后牵涉的是 JavaScript 最核心的几个机制函数调用时的 this 绑定规则、原型链的查找方式、闭包和参数传递。先从 this 说起。JS 里函数的 this 不是定义时确定的而是调用时由调用方式决定的。你可以理解为“谁调用了函数this 就指向谁”。直接调用fn()this 指向全局对象严格模式下是 undefinedobj.fn()这种调用this 就是 obj。call 和 apply 做的事情本质上就是“篡改调用方式”——把一个函数临时挂到目标对象上然后用obj.fn()的方式调用this 自然就指向了那个对象。这就不难理解为什么面试官喜欢考这道题了一个候选人如果能把 call 的实现原理讲清楚说明他理解隐式绑定如果能讲清 bind 返回函数和原函数的关系说明他理解闭包如果能讲清 new 的返回值规则说明他理解原型链。表面上在写代码实际上是在检验有没有把 JS 的底层运行逻辑串起来。1.2 从“会用”到“看懂”的分水岭说实话日常开发里直接手写这四个方法的机会非常少。现在的项目基本都有 Babel 转译class 语法、箭头函数、可选链、空值合并都用得很顺手我们甚至很少需要显式操作 this。但“会用”和“看懂”之间隔着一道分水岭。举个例子很多人知道 React 类组件里要 bind(this)但说不清 bind 到底做了什么知道 Vue 的 computed 不能写异步但理解不了背后的依赖收集和 this 绑定机制。再比如你写的组件里为什么频繁出现箭头函数如果只是“因为箭头函数没有自己的 this”那到了手写 bind 的时候你大概率不知道箭头函数为什么不能被 new也不知道 bind 返回的函数为什么能和 new 配合使用。手写题看起来“八股”但它逼迫你从“语法糖”退回到“语法本质”去思考。这不是怀旧而是前端进阶必须经历的一步。我见过太多写了好几年业务代码的开发者一碰到 this 指向就懵原因就是没在这类基础问题上较过真。1.3 这套题能顺带测出一条能力链从我面试候选人的实际经验来看手写 new、bind、call、apply 不是孤立考察而是一条能力链的入口第一层能不能写出最简单版本说明对 API 的基本使用是否有概念第二层能不能处理 null/undefined 的 context、返回值、参数边界说明有没有工程中踩坑后的总结第三层能不能想到用 Symbol 避免属性覆盖、能不能实现 bind 支持 new 调用说明有没有主动读规范、追底层第四层能不能解释每一步背后的 JS 机制并且回答后续追问说明是否具备把零散知识点串成体系的能力。这几个层级层层递进所以哪怕候选人只写得出最简单的版本我也能在追问里分辨出他的上限在哪。这也是为什么这道题在“前端八股文”里经久不衰的原因——它的信息量太密了。2. 手写之前先把这四个方法的原理吃透2.1 call 和 apply临时把函数“借”到目标对象身上call 和 apply 的用途几乎一样唯一区别是传参方式call 用逗号分隔参数apply 把参数放进一个数组或类数组里。原理可以用一个生活场景类比理解你手里有一支笔但你想在别人的桌子上写字。直接开写笔是你的桌子是别人的两者没建立关系。call 做的事就是“把笔暂时借给桌子”让你在调用时以桌子的身份去执行。具体到 JS 内部就是三步把当前函数赋值给 context 对象的一个属性通过context.属性()的方式调用这个函数触发隐式绑定让函数内部的 this 指向 context调用完删除这个临时属性避免污染原对象。这里有个容易被忽略的细节为什么要删除临时属性因为如果不删每次 call 都会给对象多留下一个方法。如果这个方法名是固定的比如就叫fn还可能覆盖掉对象原有的同名属性。所以优秀实现里会使用Symbol作为 key保证不冲突。2.2 bind闭包、延迟调用和参数固化bind 和前两者最大的区别是它不立即执行而是返回一个新函数并把原函数的 this 绑定到指定对象上同时支持“预置参数”。想象一下你预定了一个外卖订单下单时的地址this和备注部分参数已经固定了。之后不管你在哪里打开外卖 App这份订单的配送地址不会改变——除非你重新点一单。bind 返回的新函数就类似这个“已经固定好收货地址的订单”等你真正调用它的时候再补充剩余参数。技术视角看bind 的实现核心是闭包外层函数接收 context 和预置参数内层返回一个函数这个函数里保存着对外层作用域的引用当新函数被调用时再合并预置参数和调用时传入的参数用 apply 或 call 以正确的方式执行原函数。bind 还有一个特殊规则如果 bind 返回的函数被当作构造函数用 new 调用那么第一次绑定的 this 会被忽略this 指向新创建的对象。这个规则非常关键也是面试里最高频的追问点。2.3 new新对象、原型链接和返回值的三方博弈new 做的事情传统说法是四步创建一个空对象把这个空对象的原型指向构造函数的 prototype 对象以这个空对象为 this 执行构造函数如果构造函数返回了一个对象则返回该对象否则返回第一步创建的空对象。这四步里面第 2 步“原型链接”是新手最容易忽略的也正是它决定了new Person()出来的实例能访问Person.prototype上的方法。没有这一步实例和构造函数之间就没有任何继承关系。第 4 步的“返回值规则”也很有意思为什么构造函数返回一个基本类型字符串、数字、布尔时new 的结果仍然是新对象因为规范约定只有“对象类型”才能覆盖默认返回值。这也是为什么很多框架内部会用“返回对象”的构造函数来实现单例或特殊控制——这条规则给构造函数留了一个显式干预的出口。2.4 四个方法的行为差异对照方法是否立即执行参数传递方式this 绑定时机返回值典型场景call是逐个传入调用时原函数的返回值借用数组方法、类型判断apply是数组/类数组调用时原函数的返回值展开参数列表、动态传参bind否先逐个预置调用时再补充返回新函数时预先绑定返回一个新函数事件回调、React 绑定new是逐个传入调用时指向新对象新对象或构造函数显式返回的对象创建实例、模拟类这张表建议收藏面试紧张时快速过一遍能帮你避免把 call/apply/bind 的执行时机搞混。3. 手写实现从零到一写出可用的版本3.1 手写 call核心步骤与踩坑点先给一个能跑的版本然后再逐步解释每一步为什么这样写Function.prototype.myCall function(context, ...args) { // 处理 context 为空的情况浏览器环境指向 windowNode 环境指向 global context (context null || context undefined) ? globalThis : Object(context); // 使用 Symbol 生成唯一 key避免覆盖原对象的同名属性 const fnKey Symbol(fn); // 把当前函数挂到 context 对象上这样调用时 this 就是 context context[fnKey] this; // 通过隐式绑定调用函数 const result context[fnKey](...args); // 用完删除临时属性避免污染原对象 delete context[fnKey]; return result; };重点解释三处。第一Object(context)这一步。ES 规范里 call 的第一个参数如果不是对象会被装箱成对象。比如传入基本类型数字 1会变成new Number(1)函数内部的 this 也就能正常读取。不处理的话函数在严格模式下直接调用会拿到 undefined 或原始值容易出现各种匪夷所思的报错。第二为什么用Symbol(fn)而不是直接用context.fn this因为如果对象上已经有fn属性直接赋值会把它覆盖掉调用删除之后原来的值也回不来了。Symbol 是 ES6 提供的不重复的键这里是最佳选择。面试官如果看到你在这里主动用 Symbol通常会加分。第三delete context[fnKey]不是可选项。删不干净的话对象被“借”过一次之后就永远多了一个不可枚举的属性这在某些场景下会导致 JSON 序列化结果异常或 for...in 遍历多出内容。3.2 手写 apply边界条件处理apply 和 call 几乎一致只是参数形式不同Function.prototype.myApply function(context, argsArray) { context (context null || context undefined) ? globalThis : Object(context); const fnKey Symbol(fn); context[fnKey] this; // apply 的第二个参数可以是 null相当于没传参 let result; if (argsArray null || argsArray undefined) { result context[fnKey](); } else { if (!Array.isArray(argsArray)) { throw new TypeError(argsArray must be an array); } result context[fnKey](...argsArray); } delete context[fnKey]; return result; };这个版本里比较容易被忽视的是对argsArray的判断。原生apply是允许第二个参数传 null 的比如Math.max.apply(null, [1, 2, 3])很常见。所以我把null/undefined单独拎出来处理不抛错。传入非数组类型时抛TypeError也是符合规范的apply期望一个类数组对象如果你传了一个普通对象进来ES 引擎会报错 “CreateListFromArrayLike called on non-object”。这里用Array.isArray判断已经覆盖了常见情况对类数组对象比如 arguments的支持也可以扩展但手写层面做到这个程度已经能通过大多数面试考察。3.3 手写 bind连 new 一起支持的完整版bind 是这三个里最复杂的因为它返回的是一个新函数而且这个新函数还能当成构造函数使用。一个相对完整的实现如下Function.prototype.myBind function(context, ...bindArgs) { const fn this; if (typeof fn ! function) { throw new TypeError(Function.prototype.bind called on incompatible receiver); } const boundFn function(...callArgs) { // 关键判断当前函数是否通过 new 调用 const isNew this instanceof boundFn; // 如果被 new 调用this 指向新对象绑定的 context 失效 const finalThis isNew ? this : context; // 合并参数bind 时的参数在前调用时的参数在后 return fn.apply(finalThis, [...bindArgs, ...callArgs]); }; // 保持原型关系让 new boundFn() 能继承原函数 prototype 上的方法 if (fn.prototype) { boundFn.prototype Object.create(fn.prototype); } return boundFn; };这里最关键的是this instanceof boundFn这一句。它解决的是我第一次看到 bind 源码时的困惑bind 已经把 this 绑死了为什么 new 之后还能生效答案在于当new boundFn()执行时JS 引擎会创建一个新对象并把新对象的原型指向boundFn.prototype。这个新对象是boundFn的实例所以this instanceof boundFn为 true。此时我们就把 this 设置成新对象而不是之前绑定的 context。只有普通调用时才使用绑定的 context。原型链这块也不能省。boundFn.prototype Object.create(fn.prototype)的作用是让new boundFn()产生的新对象能继续访问原构造函数原型上的方法。如果不做这步新对象就只能访问boundFn.prototype自身的属性和方法原函数原型链上的方法全部丢失行为就会和原生 bind 不一致。3.4 手写 new五条规则一次说清手写 new 的代码相对短但需要把每一步的动作讲清楚function myNew(Fn, ...args) { // 1. 校验构造函数 if (typeof Fn ! function) { throw new TypeError(Fn must be a function); } // 2. 创建新对象并把原型指向 Fn.prototype const obj Object.create(Fn.prototype); // 3. 以 obj 为 this 执行构造函数 const result Fn.apply(obj, args); // 4. 构造函数显式返回对象类型时以它为准否则返回 obj const isObjectType (typeof result object result ! null) || typeof result function; return isObjectType ? result : obj; }对应原生 new 的规则规则一如果构造函数返回一个对象new 表达式的结果是那个对象规则二如果构造函数返回一个函数同样按对象处理结果也是那个函数规则三如果构造函数返回 null因为 null 不是对象类型所以结果仍然是新创建的对象规则四如果构造函数返回基本类型字符串、数字、布尔、Symbol、BigInt结果仍是新创建的对象规则五如果构造函数根本没写 returnresult 是 undefined最终返回的还是 obj。很多候选人会在“构造函数返回 null”这件事上翻车。他们知道要判断typeof result object但忘记typeof null object于是直接返回了 null导致 new 结果变成 null。所以判断里必须加上result ! null。4. 常见问题与排查技巧实录4.1 面试中最容易翻车的三个细节这些年我在面试里见过不少“代码写对了但解释不清楚”的候选人。手写题的隐形扣分点通常集中在三处。第一个是 context 为 null/undefined 时的默认值。很多人写context context || window这在浏览器里没问题但在 Node 环境、Web Worker 或严格模式下就不对了。更规范的做法是判断context null || context undefined然后使用globalThis。提到globalThis本身就是加分项因为它体现你对跨环境全局对象的了解。第二个是忘记处理 Symbol 属性遍历的问题。用 Symbol 做 key 虽然不会覆盖原有属性但有个副作用Symbol 属性不能用for...in遍历但可以被Object.getOwnPropertySymbols获取到。如果面试官追问“你删除了临时属性怎么证明删干净了”你得能说出这个细节。第三个是手写 bind 时忘记处理 new 调用。很多实现只写了“返回函数并合并参数”完全没考虑new boundFn()的场景。这样一旦面试官追加测试用例代码立刻崩。所以 bind 的实现一定要包含instanceof判断和原型链处理。4.2 追问环节怎么接招手写题本身只是开场更关键的是追问环节。我总结几个高频追问每个都有对应的回答思路问bind 返回的函数能不能被 new如果能this 指向谁 答能。当 new 调用时this 指向新创建的对象原绑定的 context 被忽略。实现里通过this instanceof boundFn判断。问箭头函数能不能用 call/apply/bind 改变 this 答不能。箭头函数没有自己的 this它捕获的是定义时外层作用域的 this。所以 call/apply/bind 对箭头函数无效最多只能传参。问apply 的第二个参数传 arguments 对象行不行 答原生 apply 支持类数组对象因为规范会做CreateListFromArrayLike转换。手写实现里如果要支持需要判断对象有 length 属性再用循环收集元素。问为什么 Symbol 属性不能通过 for...in 遍历 答因为for...in遍历的是对象的字符串可枚举属性而 Symbol 属性不是字符串 key需要使用Object.getOwnPropertySymbols才能拿到。问手写 new 时如果构造函数本身返回了一个 Promise 对象new 表达式返回什么 答返回 Promise 对象。因为 Promise 是对象类型符合“构造函数显式返回对象时以它为准”的规则。所以new Promise()拿到的就是 Promise 实例而不是执行完构造函数后的空对象。问name 和 length 属性怎么办 答原生 bind 返回的函数会调整 name 和 length比如fn.bind(obj, 1).name是bound fn。手写实现里通常不强制处理但能主动补充说明这一点会显得对规范更熟悉。4.3 一张速查表把疑问都收进表格场景常见错误正确做法context 传入 null/undefined直接用 context临时属性覆盖直接context.fn this覆盖原对象同名方法用Symbol(fn)作为临时 key用完删除apply 参数边界argsArray传 null 直接报错手动判断 null/undefined不传则执行无参调用bind 支持 new只合并参数没处理instanceof用this instanceof boundFn判断调用方式new 返回值判断typeof result object直接通过null 被错误返回判断条件加上result ! null箭头函数与 this误以为箭头函数能通过 call/apply 改变 this箭头函数 this 由定义时外层作用域决定无法改变5. 手写题背后影响力远不止一道面试5.1 从实现代码看一个人的 JS 基础作为面试官我其实不只看候选人写出的代码能不能跑更看他的实现里有没有“工程感”。比如有人写 call 时会直接写context.fn(...args)完全没考虑这个fn是从哪来的。但有人会先校验typeof this function再考虑 context 为原始类型时的装箱问题还会主动用 Symbol 做 key。这两人的基础差距就不是一星半点前者只是记住了某篇博客的代码后者是真正理解了函数调用的本质。基础扎实的候选人写出来的代码往往具备几个特点有明确的分支处理、不随意修改输入对象、考虑到运行环境差异、代码可读性好。这些习惯放在日常业务开发里同样能提高代码质量和可维护性。也正因如此手写 new、bind、call、apply 这类题目才不会过时。它考察的是“面对一个底层 API你有没有能力从零实现出可用版本”的能力这种能力可以直接迁移到 polyfill 编写、库函数封装、跨端兼容等多个工程场景。5.2 手写题练的其实是“读规范”的能力我刚开始准备这道题的时候只会对着别人的代码背。后来发现一个更高效的方法直接去读 MDN 或 ECMAScript 规范里Function.prototype.bind的描述。规范里把每个步骤写得很细比如“如果 Target 不可调用抛 TypeError”“如果 args 为空返回一个没有填充参数的绑定函数”。读完之后你对手写实现的理解会完全不一样。举个例子ES 规范里描述的 Bound Function 有内部槽[[BoundThis]]和[[BoundArguments]]前者存绑定的 this后者存预置参数。当你手写 bind 时这两个内部槽对应的就是闭包变量context和bindArgs。理解了“规范怎么定义代码就怎么对应”你甚至可以不看任何博客凭规范自己推出一套实现。很多前端开发对“读规范”有畏难情绪觉得那是语言专家才做的事。但 ECMAScript 规范虽然长针对单点功能去看并不难。从 apply 到 bind 到 new每个只需要看十几行伪代码。这比在论坛里刷一百个“面试必背”有效得多。5.3 这套原理在日常开发里的真实用处手写这四个方法并不是纯粹的面试演练它们对应的底层机制在真实项目里随处可见。React 类组件时代事件处理函数必须 bind(this)否则 this 丢失现在函数组件更流行了但useCallback的依赖数组思想和 bind 的闭包保存参数如出一辙。Vue 的响应式系统里Dep.target的切换也是依赖函数调用时机的控制。再比如函数节流、防抖、柯里化本质都是“把函数包一层控制它的执行时机和参数”这和 bind 的实现思路非常接近。还有一点理解了 new 的原理你再看 class 语法就不会觉得它是什么黑魔法了。class 的 constructor 本质上就是一个普通构造函数super()的调用规则也和原型链有关。很多“高级”用法比如装饰器、mixin 混入背后都是这些基础机制在支撑。所以我的建议是这四个方法不要只当面试题来背而是当成理解 JavaScript 函数执行机制的钥匙。你在实现过程中遇到的每个细节将来都可能在调试一个奇怪的 this 问题时派上用场。我自己现在带团队已经不会只满足于看候选人默写代码了。我会让他现场改一版业务里常见的场景比如给数组原型加一个myMap或者封装一个debounce函数。因为这些题目和 new、bind、call、apply 一样考察的都是同一个底层能力——对函数调用机制的理解。如果你能把“手写”背后的原理吃透这类变形题基本都能稳拿。最后再分享一个小技巧不要死记硬背别人写好的实现代码而是先自己用伪代码把流程写出来再对照规范逐步完善边界条件。这样过一遍比你背十遍效果都好。技术的乐趣本来就不是背出来的是想出来的。