有赞2019校招前端笔试（第一批）复盘：那些基础题背后的真实考察逻辑
2019年秋招投有赞前端岗的时候，我还没意识到这场笔试会让我后来在面试里少踩那么多坑。有赞当时已经是电商SaaS里体量不小的玩家，杭州技术团队的口碑也一直在线，笔试放在牛客网上，第一批，90分钟。考完我把题目逐题回忆整理了一遍，发现这套卷子的出题思路特别典型——不考偏题怪题，但把前端基础里最容易混淆、最需要真正理解的部分挖得很深。这篇文章不是简单摆答案，而是把每类题背后的考察逻辑、考场上的思考路径、以及后来我在实际业务里再次遇到这些知识点时的体会，一次性说清楚。
1. 笔试概况：一场90分钟的线上硬仗
1.1 考试形式与整体印象
有赞2019校招前端笔试（第一批）是线上笔试，牛客网平台，时长90分钟。从题量设置来看，单选、多选、填空题加两道编程题，时间给得不算宽裕，尤其是编程题需要完整跑通用例，对打字速度和思路清晰度都有要求。我当时答完还剩不到5分钟，几乎是压着交卷线提交的。
整体难度放在2019年的校招行情里属于中上。选择题部分不是那种一眼就能看出答案的送分题，很多选项之间的区别特别细微，比如Promise executor里throw error和reject的区别、map和forEach在稀疏数组上的行为差异这类，如果只是背过八股文而没亲手写过，很容易在两个选项之间反复横跳。编程题倒没有出特别恶心的算法，考的是基本功——大数相加、深拷贝这类，但越是这样越容易在边界条件上丢分。
1.2 题型分布与分值权重
按我的回忆，这套卷子大致是：单选10题左右、多选5题左右、填空若干，加上两道编程题。选择题覆盖的面比较广，从HTML语义化、CSS布局、JS基础到浏览器渲染和网络协议都有涉及，但重心明显在JS上，尤其是闭包、this指向、Event Loop、原型链这些。多选是重灾区，因为少选多选都不得分，而且有几个选项从单一角度看都说得通，必须对底层机制有完整认知才能全选对。
分值上，编程题占比不低，每道题的分值大概相当于4到5道选择题。所以我的策略是，遇到选择题拿不准的先标记跳过，保证编程题有充足时间写完。这个策略后来被证明是对的——两道编程题虽然不算难，但边界条件很抠，比如大数相加要考虑负数、小数、超长整数的情况，深拷贝要考虑循环引用和特殊对象类型，仓促下笔很容易漏。
1.3 有赞的考察倾向：基础优先、业务强关联
刷完卷子最大的感受是，有赞的出题方向非常务实。作为以电商SaaS为核心业务的公司，有赞前端每天面对的都是商品列表、订单状态、营销活动这种真实业务场景，所以笔试题目里看似在考基础，实际上处处埋着业务场景的影子。比如Event Loop的输出顺序题，表面是考察宏任务微任务的执行机制，实际对应的是接口请求后更新页面状态的顺序控制问题；跨域的考察对应的是前后端分离下调用开放平台接口的场景。
这也给后来备考的同学提了个醒：刷题不是目的，得想清楚每一道题在某类真实业务里落在哪里。单纯背答案应付笔试，即使过了，后续面试的深挖追问也会暴露短板。
2. JS基础与异步：校招笔试的“主战场”
2.1 闭包、this指向与变量提升的连环坑
有赞这套卷子里，闭包相关的题出现了不止一次，而且都和this指向、变量提升混在一起考。有一道题我印象很深，给了一段代码，问最终的输出顺序。代码大概长这样：
var name = 'global'; var obj = { name: 'obj', getName: function() { return function() { return this.name; }; } }; console.log(obj.getName()());答案是'global'。这道题考的是闭包函数里this的丢失问题，getName()执行完返回一个普通函数，这个函数被直接调用时，它内部的this指向window（非严格模式下），而不是obj。这个坑在真实业务里太常见了——回调函数里用this拿不到组件实例，所以才有var self = this、箭头函数、bind这些解法。有赞把这道题放在笔试里，大概率是想筛选出真正在业务里写过回调、踩过this坑的候选人，而不是只会做概念题的学生。
变量提升的部分考得更细，比如var声明提升但赋值不提升，let有暂时性死区，函数声明与变量声明的优先级等。我记得有一道判断题专门考typeof在变量声明前后的表现差异：
console.log(typeof a); var a = 10; console.log(typeof b); let b = 20;第一个输出undefined，第二个直接报错。这道题如果只记住“var会提升、let不会提升”这种口诀是不够的——它需要你理解引擎在预处理阶段的整个工作过程：var的声明会被提升到作用域顶部，初始化默认为undefined；let也会被提升，但进入暂时性死区，直到声明语句执行前都无法访问。这种细节层面的考察，比单纯问“var和let区别”要深入得多，也更能检验你是不是真的写过代码。
2.2 Event Loop输出顺序题的完整推演
有赞这道Event Loop题属于常规中的常规，但很有代表性。代码大致是：
setTimeout(() => { console.log('timeout'); }, 0); Promise.resolve().then(() => { console.log('promise1'); }).then(() => { console.log('promise2'); }); console.log('sync');输出顺序是：sync、promise1、promise2、timeout。这种题我在考前准备时刷到过无数次，但真正在考场限时环境下做，还是得一步步推：同步代码先执行，输出sync；Promise的then回调属于微任务，会在当前宏任务结束后立即执行；setTimeout是宏任务，在下一轮事件循环才轮得到。所以微任务总是先于宏任务执行。
但这里有一个细节值得展开：Promise.resolve().then(...)里面，第一个then回调是在微任务队列里执行，执行完毕后返回的是一个新的resolved Promise，所以第二个then会立刻再进微任务队列。两个微任务在同一个宏任务周期内依次执行完，最后才轮到setTimeout。如果这段代码里再加一层setTimeout嵌套，输出顺序就会变得更有意思，不过笔试没那么狠。
这个知识点在实际开发中的应用场景非常直接：比如页面初始化时需要先渲染数据再展示交互状态，如果数据获取是异步的，后续UI更新代码就应该放在同一个微任务链里，而不是另起一个setTimeout，否则会出现闪烁或者顺序错乱。有赞这种重度依赖异步数据流的业务类型，对这个考察点的偏好不是偶然。
2.3 原型链：到底考到什么深度
在选择题里，原型链相关的题考了构造函数的prototype、实例的__proto__、instanceof的原理这三个层面。有一道题问的是：
function Person(name) { this.name = name; } Person.prototype.sayHi = function() { console.log('hi'); }; var p = new Person('xiaoming');问p.__proto__ === Person.prototype是否正确、Person instanceof Function是否正确、p instanceof Person是否正确。这些都还好，关键是一道多选里混了一个“Function instanceof Object为true，Object instanceof Function为true”的选项，这道题让很多人翻车了。
这两个表达式确实都是true。原型链的顶端是Object.prototype，而Function.prototype本身也是一个对象，Object是函数，Function也是函数，所以它们互相在对方的原型链上。这种绕来绕去的关系，光靠死记硬背很容易记混，得画图理清。有赞考到这个深度，说明对基础的要求不是停留在“知道”层面，而是要求“理解并且能推理”。
原型链在实际业务中最常见的应用是组件继承、方法复写和类数组的处理。比如在React或者Vue项目里，如果基于父类扩展一个子类组件，需要理解子类实例的原型链是怎么串联到父类的prototype上的，才能正确判断方法和属性的归属。这个考察点放在校招笔试里，是为了筛掉那些只会用框架、不关心底层机制的候选人。
3. 浏览器与网络：看着基础，实际决定下限
3.1 HTTP缓存相关考法：字段、优先级与流程
有赞笔试里HTTP缓存考得不算难，但很细，主要围绕Cache-Control和ETag的配合使用。有一道选择题问：当响应头同时包含Cache-Control: max-age=3600和Expires: Wed, 21 Oct 2019 07:28:00 GMT时，浏览器以哪个为准？答案是Cache-Control，因为它的优先级更高。这个知识点现在很多前端也说不清楚，2019年的时候更是如此。
缓存这块如果想答全，需要把整个强缓存和协商缓存的流程理清楚。浏览器第一次请求资源时，服务器返回带Cache-Control和ETag的响应头；第二次请求时，浏览器判断Cache-Control: max-age是否过期，没过期就直接用本地缓存，不发请求；过期了再带上If-None-Match字段，里面是ETag的值，去服务器协商，服务器返回304就走缓存，返回200就重新下载。
有赞是电商SaaS系统，页面里的商品图片、JS脚本、CSS文件都依赖这套缓存机制来降低服务器压力和提升加载速度。笔试考这个，实际是希望候选人入职后能读懂线上性能问题——为什么用户看到的是旧页面？为什么某个资源明明改了文件名还是走缓存？这些排查工作都跟HTTP缓存强相关。
3.2 跨域方案：CORS、JSONP、postMessage
跨域这道题在2019年的前端笔试里基本是必考的，有赞出的版本是让候选人判断哪些场景属于跨域，以及如何解决。判断跨域的边界是个坑，比如http://a.com和https://a.com端口不同也算跨域，a.com和www.a.com域名不同也算跨域。
方案上，CORS是标准方案，但需要服务器配合设置响应头；JSONP只支持GET请求，而且有安全隐患，只能作为兼容方案；postMessage主要用于iframe窗口和window.open打开的窗口之间的通信。有赞的真实场景里，前端有多个子应用部署在不同域名下，还会涉及和第三方小程序、H5页面的通信，跨域的处理非常普遍，所以这个考点其实是在为后续的微前端架构做铺垫。
这里有一个答题技巧：遇到跨域题，除了列出几种方案，一定要说出各自的适用场景和优缺点。只写“可以用CORS解决”是不完整的，要说明在哪种情况下用CORS、哪种情况下不得不用JSONP（比如对接不支持CORS的旧接口）、哪种情况下用postMessage更合适。这种答题方式能直接体现出你是在做技术选型，而不是在背概念。
3.3 渲染机制与性能优化：从URL输入到页面展示的完整链路
有一道多选题考察了从输入URL到页面展示的过程中，哪些步骤会阻塞首次渲染。选项里涉及DNS解析、TCP连接、HTML解析、CSSOM构建、JavaScript执行等。正确的理解是：DNS和TCP是网络层的准备，不直接阻塞渲染；但HTML解析过程中，遇到同步的<script>标签会暂停DOM解析，先下载并执行脚本，这就是经典的“脚本会阻塞渲染”。
CSSOM的构建也会阻塞渲染，因为渲染树需要DOM和CSSOM合并之后才能生成。但是如果把CSS放在<link>里异步加载，或者把JS用defer/async修饰，情况又不一样了。这道题考的是对整个渲染链路是否清晰。
我当时能答对，很大程度上是因为之前手动实现过一个简单的浏览器性能优化方案：把首屏用到的CSS内联，JS拆分并按需加载，图片懒加载，然后观察Lighthouse的指标变化。这种实践经历让知识点落地了，而不是停留在“知道”。有赞的页面在移动端流量占比高，性能优化是他们的刚需，考察这个方向非常合理。
4. 手写代码题：考场上的“照妖镜”
4.1 手写new、防抖、节流：基础中的必答项
编程题里有一道是手写new操作符的实现。这道题猛一看很简单，但真正写起来有几个关键点容易漏。我当时的实现是：
function myNew(Constructor, ...args) { // 1. 创建一个新对象，原型指向构造函数的prototype const obj = Object.create(Constructor.prototype); // 2. 执行构造函数，绑定this const result = Constructor.apply(obj, args); // 3. 如果构造函数返回了对象，返回这个对象，否则返回新对象 return (typeof result === 'object' && result !== null) || typeof result === 'function' ? result : obj; }这里的第三步最容易丢。如果构造函数内部显式返回了一个对象，比如return { custom: true }，那么new出来的结果应该是这个对象而不是步骤一创建的新对象。很多人在写实现的时候只做了前两步，丢掉了返回值判断，这就丢分了。
防抖和节流也是手写题的热门。有赞考的是防抖，并且要求给出立即执行版本和非立即执行版本。其实防抖的核心就是clearTimeout加setTimeout的配合：
function debounce(fn, wait, immediate = false) { let timer = null; return function(...args) { const callNow = immediate && !timer; clearTimeout(timer); timer = setTimeout(() => { timer = null; if (!immediate) fn.apply(this, args); }, wait); if (callNow) fn.apply(this, args); }; }注意两条：一是clearTimeout要放在判断callNow之前，否则第一次触发时没有清理掉上一次的定时器（虽然第一次没有上一次，逻辑上还是要一致）；二是要用function而不是箭头函数，才能让this指向调用方，而不是定义时的环境。这两点写代码时很容易被忽略。
4.2 超大数相加：边界条件的“细节地狱”
第二道编程题是JS超大数相加。题目说两个字符串形式的数字可能超出Number能安全表示的范围，要求实现加法函数，返回字符串结果。基础思路是模拟竖式加法，从低位到高位逐位相加，记录进位。
function addBigNumbers(a, b) { let i = a.length - 1; let j = b.length - 1; let carry = 0; let result = ''; while (i >= 0 || j >= 0 || carry > 0) { const digitA = i >= 0 ? parseInt(a[i], 10) : 0; const digitB = j >= 0 ? parseInt(b[j], 10) : 0; const sum = digitA + digitB + carry; result = (sum % 10) + result; carry = Math.floor(sum / 10); i--; j--; } return result; }这段代码的核心在于循环条件的设置。while里的carry > 0是最后一道保险——如果最高位相加之后还产生了进位，比如999 + 1，最高位计算完后carry是1，这个1也必须写入结果。我当时第一版只写了i >= 0 || j >= 0，测999 + 1的时候就漏了最前面的1，幸好测试用例暴露了问题，赶紧补上。考场上时间紧张，这种细节最容易翻车。
如果题目再加一层难度，让处理负数和浮点数，边界条件会更多。我当时猜到了可能有负数用例，但因为时间关系没有实现完整版，只加了提示说“如果传入负数，当前实现不适用”。这种做法在笔试里可以接受，但如果面试官追问负数怎么处理，得能答上来：先判断符号，再比较绝对值大小决定是否借位，核心还是模拟竖式。
4.3 深拷贝：循环引用与特殊对象的处理
有赞笔试题里的深拷贝，常规版本用递归就能做到，但完全写对不容易。
function deepClone(target, map = new WeakMap()) { if (target === null || typeof target !== 'object') return target; if (target instanceof Date) return new Date(target); if (target instanceof RegExp) return new RegExp(target.source, target.flags); if (map.has(target)) return map.get(target); const clone = Array.isArray(target) ? [] : {}; map.set(target, clone); Reflect.ownKeys(target).forEach(key => { clone[key] = deepClone(target[key], map); }); return clone; }这个版本处理了三类问题：一是Date和RegExp这样的特殊对象，直接走普通递归会变成空对象；二是循环引用，比如const a = {}; a.self = a;，如果没有WeakMap记录已克隆对象，递归会无限循环导致栈溢出；三是Symbol作为键的情况，用Reflect.ownKeys而不是Object.keys才能遍历到。
考场上我没有写完整版，只写了递归加循环引用的处理，Date和RegExp的判断没写上，后来复盘才发现丢分点在这里。后来在业务里遇到深拷贝，我直接用structuredClone这个原生API，它已经完全兼容深拷贝的处理了，但在2019年还要自己实现。
5. 框架与工程化：了解深浅的分水岭
5.1 React与Vue的考察深度：有赞实际用的是哪条技术路线
有赞2019年前端主要用的是React技术栈，但笔试里并没有直接限定框架，而是通过一些偏原理性的选择题来考察候选人是否理解框架的核心机制。
其中有一道题考的是React中setState后组件什么时候重新渲染，选项里涉及了shouldComponentUpdate、PureComponent、useMemo、useCallback这些。这道题其实是在考察对React渲染流程的理解：setState是异步批处理的，多个setState会合并为一个更新，但如果放在Promise回调里，React 18之前的版本又不会自动批处理。2019年的时候React还处于16.x时代，对于考试来说，知道setState是异步的、合并的，并且shouldComponentUpdate返回false可以阻止重渲染，基本就能答对。
Vue那边虽然没有直接考，但有一道题问到了“数据响应式”，选项里提到了Object.defineProperty和Proxy的区别。这其实是在考察候选人对Vue 2和Vue 3差异的理解。虽然当时Vue 3还没有正式发布，但了解Proxy可以监听对象属性的新增和删除，而Object.defineProperty做不到，已经是加分项。
这个考察方向对准备者来说是一个提示：不要只学一个框架，至少要理解其他框架的核心思路，并且能说出彼此的优缺点。尤其在有赞这种技术栈以React为主的公司，如果候选人只在简历上写了Vue，笔试里体现出的原理深度会直接影响筛选结果。
5.2 组件通信类问题：业务场景下的实际选型
组件通信是框架题里和实际业务最贴近的。有赞这套卷子里有一道多选题，描述了一个实际场景：列表页点击某一条数据，详情页需要知道用户点的哪一条。选项给了props传递、中央事件总线、Redux/Vuex、Context/PROVIDE_INJECT等方案。
正确的判断是，最简单的场景用props逐层传递就够了，但一旦层级很深，或者多个兄弟组件需要共享同一份数据，就应该用全局状态管理，而不是把所有组件都强行props串联起来。2019年的时候，React生态里Redux还是主流，但Context API也已经可以用了；Vue生态里就是Vuex。
这个场景在有赞的后台管理系统里非常常见：商品列表、订单列表、营销活动列表，所有的列表页到详情页的跳转，都涉及数据传递的问题。而且有赞的SaaS系统是面向商家端的，后台功能模块多、组件嵌套深，如果不选好通信方案，维护成本非常高。笔试把这种业务场景包装进框架题里，目的就是考察候选人是不是真的做过大型项目，而不是只写过todo list。
5.3 工程化：我印象中的webpack与构建优化
工程化部分的题目不多，但有一道关于webpack的题很典型。它给了一段webpack.config.js的配置，里面有entry、output、resolve.alias、plugins等配置项，让判断哪个配置是错误的。这道题本身不难，难点在于alias里配置路径别名时，用了相对路径还是绝对路径、有没有配置@符号，以及output里的publicPath设置是否合理，这些细节很容易混淆。
我印象比较深的是还有一道问tree-shaking生效条件的题。答案是只有ES Module的静态import语法能被正确分析，CommonJS的require无法静态分析，所以不能tree-shaking。当时我正好在本地demo里验证过这个特性，所以答得比较快。如果只是背过“tree-shaking可以摇掉没用到的代码”，未必能选对。
有赞作为电商SaaS，前端项目一般都比较庞大，构建速度和产物体积直接影响CI/CD效率。笔试考察webpack，不是为了让候选人记住配置项，而是希望候选人入职后能独立排查构建问题、优化打包策略。所以备考的时候，我建议真实地搭一个webpack项目，把常见优化手段都手动配置一遍，光看文档效果很差。
6. 考后复盘：一次笔试暴露出的真实水平
6.1 我的时间分配失误：选择填空花太久，编程题差点没写完
考完之后我第一件事就是复盘时间分配。说实话，我前面20分钟在选择题上耗了太久，特别是多选，每道题都反复斟酌，结果做到编程题的时候只剩35分钟。第一道大数相加还算顺利，第二道深拷贝就有点仓促了，循环引用的问题是写完以后才想起来补上，导致代码里出现了一处逻辑判断的重复，虽然能跑通测试用例，但可读性明显下降了。
如果再来一次，我会给自己定一个硬性规则：选择题每题最多1分钟，拿不准的先标一个最可能的答案，然后果断跳过或者用排除法选一个，把时间留给编程题。因为选择题的分值再高，一道也就一两分，编程题动辄10分起步。这个策略在后来的其他笔试中帮我拿到了不少offer，算是一次踩坑换来的经验。
6.2 值得反复咀嚼的题目细节：多选的“少选多选都不给分”
有赞这套卷子里多选占了不少分值，而且提示很清楚：少选、多选都不得分。这其实比很多笔试要严格，有些平台是多选少选按比例给分的，全对才稳。这个规则带来的直接影响是：不确定的选项不要去赌。我当时的策略是，只选我有十足把握的，不确定的选项宁可漏掉，也不要因为多选一个而全盘皆输。
这个策略在后面几道涉及Event Loop和原型的多选题里救了命。比如有一道题，其中一个选项描述的是“微任务中嵌套微任务会插入当前队列尾部”，我当时对这个表述没有完全把握，最终没有选它。后来查资料确认这个表述是对的，但我依然认为在“少选不扣分，多选扣全分”的规则下，保守是对的。笔试不追求完美，追求的是总分最大化。
6.3 给后来者的备考建议：把基础题练到“肌肉记忆”
如果时间倒流，让我重新准备有赞这套笔试，我会把重心放在几个方向上，也分享给准备类似校招笔试的同学：
第一，JS基础不能只靠背，要亲手列一遍输出结果并解释原因。闭包、this、Event Loop、原型链、Promise这些，给自己出几道变式题，比如把function改成箭头函数，把var改成let，看输出是否变化。这种刻意练习能让理解真正深入。
第二，网络基础和浏览器渲染要画图理解，不能只看文章。《图解HTTP》加上自己画一张从URL输入到页面展示的流程图，把每一步阻塞点标出来，比刷十篇文章都管用。
第三，手写代码题一定要在纸上或者无IDE提示的编辑器里练。牛客网笔试没有智能提示，完全靠记忆写API，比如Reflect.ownKeys这个写法，如果平时IDE自动补全用惯了，考场上很可能卡壳。我在考前专门用VS Code的纯文本模式练手写，效果不错。
第四，多花时间研究目标公司的业务场景，把基础题往业务上靠。有赞做电商SaaS，所有工程题都可能包一层业务外衣。理解了这个逻辑，做题的时候就知道出题人想考什么，答题时也能有的放矢地带上“这个知识点在XX场景下是这样用的”。
第五，也是最重要的一点，平时写代码时多问一个“为什么”。为什么setState要设计成异步的？为什么浏览器会限制并发请求数？为什么ES Module能被静态分析而CommonJS不行？这些问题在笔试里不会直接考，但它们背后的知识网络会以各种形式出现在选择题和编程题的边界条件里。真心建议新手不要只刷题，去折腾一些小项目，把每个报错都搞明白，笔试自然就稳了。
