2019年秋招季我坐在在线笔试系统前面对这份《用友2019校招web前端笔试题一》第一反应是题量不大但每道题都踩在JavaScript基础的要害上。没有偏难怪也没有炫技式的算法题反而是闭包、原型链、事件循环、手写代码这些平时觉得“简单”的知识点被换着角度考了个遍。这套题放在今天来看依然很有代表性。坦白说每年校招前端笔试题目看起来五花八门但底层考察逻辑几乎没有变过基础实不实、思维清不清晰、代码规范不规范。用友作为国内老牌企业服务厂商前端团队要面对大量B端复杂业务他们的校招笔试题往往更偏重“能不能用扎实的语言基础去解决真实问题”而不是考你背了多少框架API。这篇文章不打算照搬题目流水账而是把这类笔试背后真正想考察的点拆开结合我自己的备考和面试经验聊一聊每类题该怎么答、为什么这么答、以及哪些地方最容易被扣分。需要先说清楚一个背景原文题目并没有给出完整试卷内容所以下面涉及的题型和示例是基于2019年前后端分离已经普及、Vue/React大规模落地那一阶段前端校招笔试中最高频、最典型的考点组合来还原推导的。换句话说这篇文章讲的是“这类题的标准解法和踩坑点”你把它当成一份校招前端笔试的实弹演练指南来看完全复用得上。1. 这份笔试题的选人逻辑不是考你会不会写代码而是看你基础牢不牢1.1 为什么校招笔试不愿意直接考框架很多同学拿到笔试邀请后第一反应是去刷Vue或React的源码分析、组件通信进阶、状态管理方案对比。但真到了校招笔试框架题占比通常很低反而是JavaScript基础、浏览器机制、网络基础占了绝大部分。原因很简单校招生在简历上写的项目面试官不知道水分有多少但JS基础题是骗不了人的。用友这类以B端产品为主的公司前端要处理表格、流程引擎、低代码配置、复杂表单校验这些重交互场景。这些业务表面上看是框架在支撑实际上拼的是对语言本身的掌控力变量提升、闭包、this指向、异步时序、事件冒泡、渲染性能。框架可以三个月换一个但ES规范、浏览器渲染原理、网络协议这些东西十年内都不会大变。所以你会发现笔试里所有题目都在围绕“你读代码能不能读懂你写代码能不能控制住副作用”这两个能力展开。1.2 整卷考点权重与时间分配建议根据我当时接触过的多套用友前端校招笔试题以及同批次同学的反馈这套题一大致可以归纳为以下几个模块。权重和优先级如下表所示。考点模块典型题型出现概率建议时间占比JavaScript语言特性闭包、this、原型链、继承极高35%异步与事件循环输出顺序、Promise、async/await高20%浏览器与渲染性能URL渲染过程、重排重绘较高15%CSS与布局双栏/三栏布局、盒模型、BFC中等10%手写代码防抖节流、深拷贝、事件总线极高20%这个分配不是随便拍的。语言特性和手写代码加起来超过一半说明这类笔试的核心目的就是要筛掉“只会调用API、不懂底层原理”的人。异步和浏览器机制是拉开差距的区分题答得好不好直接决定你进不进入下一轮。1.3 拿到试卷之后正确的答题顺序我见过太多人栽在答题顺序上先死磕一道手写深拷贝写了四十分钟还没处理循环引用后面基础题全来不及做。笔试时间有限必须讲究策略。我的习惯是先把所有题目扫一遍优先做选择题、判断题这类客观题快速拿稳基础分。遇到需要大段代码输出的题先写上核心思路再补细节。手写题如果卡住了先跳到下一道回头再补。另外代码题哪怕最后没写完整也一定要把关键步骤注释写在旁边阅卷官看的是你解决问题的路径不是一行不差的标准答案。这套策略我在好几场校招笔试里都验证过效果比埋头硬啃好得多。2. JavaScript基础题解法闭包、this与原型链的常见夺命追问2.1 闭包题先写结果再讲清除机制闭包是笔试中出镜率最高的概念没有之一。这道题的常见问法是给一段代码让你说出输出结果然后追问“怎么解决”。最经典的就是循环里放setTimeout。for (var i 0; i 5; i) { setTimeout(function () { console.log(i); }, 100); }答案不是0到4而是5个5。原因有两个var没有块级作用域i实际上是全局变量setTimeout的回调是异步执行的等事件循环走到回调时循环早就结束了i已经变成5。五个匿名函数共享同一个i所以全打印5。解决办法也很固定。第一是用let声明ifor循环的let会在每次迭代中绑定一个新的词法环境第二是用IIFE传参形成封闭作用域第三是抽一个工厂函数返回闭包。笔试时我建议把三种方案都写出来能明显看出你理解深度不同。真正拿分的关键在后面这个追问闭包导致的内存泄漏怎么解决。答案是当闭包不再需要时手动将引用置为null让外层函数的执行上下文可以被垃圾回收。比如返回的函数存到变量里用完之后执行fn null。2.2 this指向题别背规则学会找调用点this指向是另一类高频题。很多同学喜欢背口诀“谁调用就指向谁箭头函数指向外层”但一到改版题就翻车。原因在于口诀太简化了。规范的判断方法是先找调用点call-site也就是函数在代码中被调用的位置。举个例子这是某次笔试的变体题var name window; var obj { name: obj, getName: function () { return function () { return this.name; }; } }; console.log(obj.getName()());输出是window非严格模式下。查找调用点obj.getName()返回了一个匿名函数随后这个匿名函数是直接调用的没有对象前缀所以是默认绑定this指向全局对象。如果把匿名函数改成箭头函数结果就变成了obj。因为箭头函数不关心调用点它捕获的是定义时所在作用域的this也就是getName函数体内的this而getName当时是通过obj调用的this指向obj。答这种题把推导过程写出来比只写答案更安全。2.3 原型链与继承手写new操作符是必考题原型链题目通常分成两半一半是看代码说结果另一半是手写实现。手写new操作符几乎是必考的代码也不长。function myNew(Constructor, ...args) { // 1. 创建新对象并链接原型 const obj Object.create(Constructor.prototype); // 2. 绑定this并执行构造函数 const result Constructor.apply(obj, args); // 3. 构造函数返回引用类型时需特殊处理 return (result typeof result object) ? result : obj; }第三步经常被忽略但恰恰是出题人想考察的细节。构造函数如果显式返回了一个对象new出来的实例就是这个对象而不是我们创建的obj。字符串、数字这类原始值则被忽略还是返回obj。面试官看到你主动写这一步就知道你读过规范不只是在背模板。然后是继承方式对比。原型链继承的缺点是引用类型属性被所有实例共享借用构造函数继承解决了共享问题但方法得不到复用组合继承是两者的结合。ES6的class本质上还是组合继承的语法糖。笔试里如果时间充裕可以把原型链、组合继承、class三种方式都写一遍并标注各自适用场景。3. 异步与事件循环一道输出题就能看出你读懂了JS的运行机制3.1 从setTimeout和Promise的输出顺序说起异步题是笔试的“分水岭”基础好的同学几分钟写完还顺手画了张事件循环图基础薄弱的同学连题都读不懂。核心就是要搞懂宏任务与微任务。打个比方宏任务是一个大排队区微任务是队伍前面的一条优先通道每执行完一个宏任务系统会把微任务队列清空一遍然后再取下一个宏任务。最基础的题目是console.log(start); setTimeout(() { console.log(timeout); }, 0); Promise.resolve().then(() { console.log(promise); }); console.log(end);输出顺序是start、end、promise、timeout。setTimeout虽然延迟是0但它回调属于宏任务要等当前同步代码执行完再等微任务清空最后才轮到它。Promise.then是微任务在同步代码之后的第一个时机就执行了。3.2 升级版async/await到底做了什么笔试升级版一定会加上async/await因为它是这类题最容易写错的变体。async function test() { console.log(1); await console.log(2); console.log(3); } test(); console.log(4);输出是1、2、4、3。很多人以为await后面是异步的会把整个后续都放到微任务里其实不是。await右边的表达式会立即同步执行所以立刻打印2await只会让出之后的代码也就是console.log(3)被放进了微任务队列。同步代码继续打印4之后微任务清空再打印3。这类题想拿满分最好把每一步同步/异步执行栈的变化写出来阅卷官能看出来你是真的理解而不是碰巧写对。3.3 手写Promise.all控制在15分钟以内的高频手写题手写代码里Promise相关题目出现频率极高Promise.all又是其中最常见的。要求不高实现一个能用版本并说明边界情况就能拿大部分分数。function promiseAll(promises) { return new Promise((resolve, reject) { const results []; let count 0; if (promises.length 0) { resolve(results); return; } promises.forEach((p, index) { Promise.resolve(p).then((value) { results[index] value; count; if (count promises.length) { resolve(results); } }, reject); }); }); }这里有几个拿分点首先用Promise.resolve包裹输入兼容普通值其次用index参与结果存储而不是push保证返回顺序和输入顺序一致第三是任何一个失败都直接reject最后是空数组要立即resolve。很多人会漏掉第一点和最后一点这两个边界情况加上去就会明显拉开与其他候选人的差距。4. 浏览器渲染与CSS笔试里的低垂果实捡到就是赚到4.1 从输入URL到页面渲染这道题考的是完整度浏览器相关的大题中“输入URL到页面显示”几乎是必考但这道题想拿高分靠的是完整度和顺序性。标准答案至少包含DNS解析、TCP连接、HTTP请求、服务器响应、浏览器解析HTML构建DOM树、解析CSS构建CSSOM、合并成渲染树、计算布局、绘制、合成。如果当时正在用HTTPS还要加上TLS握手如果页面里有图片或接口还会触发更多HTTP请求。这里容易丢分的地方是“解析HTML时遭遇script标签”。浏览器遇到普通script会阻塞DOM解析所以要把script放到body底部或者给它加async或defer。笔试时把阻塞机制写出来再解释async和defer的区别就是一道加分的小尾巴。4.2 重排与重绘别光背定义要能说清楚触发操作重排必然引起重绘但重绘不一定引起重排。这一对概念几乎每次笔试都会出现最常见的出题形式是给一串操作让你判断哪些触发重排、哪些只是重绘。我整理过一张对比表笔试前看一遍就能记牢关键项。操作类型是否触发重排是否触发重绘优化方案修改width/height/margin触发触发合并在一个style操作里或使用class切换修改color/background-color不触发重排触发可使用CSS变量统一管理读取offsetTop/clientWidth强制同步布局可能触发先批量读再批量写transform/opacity动画不触发重排单独合成层优先使用transform做动画关键点在于“为什么读取offsetTop会强制同步布局”。因为浏览器为了性能会把多个写操作放在同一帧渲染但如果中途读取了布局属性浏览器为了保证返回值是准的只能立刻执行一次布局计算。所以推荐“读写分离”所有读操作放一起所有写操作放一起避免强制同步布局。4.3 CSS布局题双栏和三栏布局的多种解法对比CSS布局题在2019年那会儿考得非常多现在也仍然是笔试中常见的保底题。一般要求是“用尽可能多的方式实现左侧固定、右侧自适应的双栏布局”。最常用的三种方案floatmargin、flex、grid。float方案是在左栏设固定宽度并float:left右侧设置margin-left留出空间flex方案是父容器display:flex左栏flex:0 0 240px右侧flex:1grid方案是父容器display:gridgrid-template-columns:240px 1fr。笔试时最好用表格对比各方案的优缺点。方案写法简洁度浏览器兼容性主要缺点float margin一般最好需要清除浮动右侧高度需自行处理flex高2015年后基本可用老浏览器下flex写法有兼容差异grid最高较新浏览器兼容性要求最高的场景需谨慎三栏布局再加一道中间自适应的圣杯布局或双飞翼布局思路都是从两侧向中间挤压本质是利用负margin和padding让中间栏优先渲染。这类题不建议临时脑补考前最好亲手在本地写一遍。5. 手写代码题的正确姿势阅卷官到底在看什么5.1 防抖与节流高频且能看出工程思维的小题防抖和节流几乎校招必考。一个容易被忽视的坑是只写出用setTimeout实现的“简单版”却丢掉了this指向和参数的透传。这两个细节加起来不过三行却是阅卷官区分“背过代码”和“真懂原理”的核心证据。function debounce(fn, wait 300) { let timer null; return function (...args) { const context this; if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(context, args); }, wait); }; }为什么要保存context因为返回的函数是由调用者决定的比如按钮点击事件里this应该指向按钮元素如果内部直接用fn(args)调用this就会丢失。加上apply之后防抖函数的通用性立刻提升一个档次。节流也一样保存context和args之后不管是scroll还是resize事件都能直接复用。再往深处讲防抖和节流的应用场景是完全相反的防抖适合输入框搜索这种“连续操作最后一次生效”的场景节流适合滚动监听这种“固定频率执行”的场景。笔试时用一句话点明这个区别比堆代码更亮眼。5.2 深拷贝从JSON.stringify到循环引用手写深拷贝是另一道高频题。最基础的答案是JSON.parse(JSON.stringify(obj))但如果只写这一行分数一般不会太高因为出题人早已准备好一连串反问函数丢了怎么办Date变成字符串了怎么办循环引用会报错怎么办进阶版实现应该覆盖数组、普通对象、Date、RegExp还要处理循环引用。循环引用必须用WeakMap缓存已经拷贝过的对象否则会死循环爆栈。function deepClone(value, cache new WeakMap()) { if (value null || typeof value ! object) return value; if (value instanceof Date) return new Date(value); if (value instanceof RegExp) return new RegExp(value.source, value.flags); if (cache.has(value)) return cache.get(value); const result Array.isArray(value) ? [] : {}; cache.set(value, result); Object.keys(value).forEach((key) { result[key] deepClone(value[key], cache); }); return result; }注意这里Object.keys只遍历自身可枚举属性Symbol属性可以额外用Object.getOwnPropertySymbols补上。笔试中不要求你写出生产级完整的深拷贝但把WeakMap、Date、RegExp、数组这四类特殊情况处理掉已经足够体现功底。5.3 手写EventEmitter把观察者模式理解到位又不过度设计用友这类B端产品笔试里手写一个简单事件总线或者EventEmitter出现概率也不低。它考察的是面向对象、闭包、数组操作的综合能力。核心方法是on、once、off、emit四个。class EventEmitter { constructor() { this.events new Map(); } on(name, fn) { if (!this.events.has(name)) { this.events.set(name, []); } this.events.get(name).push(fn); return this; } once(name, fn) { const wrapper (...args) { fn.apply(this, args); this.off(name, wrapper); }; wrapper.fn fn; return this.on(name, wrapper); } off(name, fn) { const list this.events.get(name); if (list) { this.events.set(name, list.filter((item) item ! fn item.fn ! fn)); } return this; } emit(name, ...args) { const list this.events.get(name); if (list) { [...list].forEach((fn) fn.apply(this, args)); } return this; } }这里有一个隐蔽的坑emit遍历回调时如果回调里触发了off会导致数组在遍历中被改动产生漏执行或错乱。用[...list]拷贝一份再遍历可以避开这个问题。once的实现也很讲究不能只是on然后等触发后再off应该在包装函数里执行完就立刻移除这样连触发前的引用都能保持一致。6. 交卷之后的事为什么笔试感觉不错却迟迟等不到通知6.1 交卷前的自查清单我见过太多人在简单题上因为细节扣分函数名拼写错误、忘了加返回语句、变量用了保留字、let和const混用导致暂时性死区报错。笔试平台往往不会像编译器提示那么友好一道线上测试不过的手写题就足以让整题归零。交卷前花两分钟检查以下内容手写题是否通过真实的测试用例、有无多余的console.log影响输出、边界条件是否处理过空数组或空字符串、代码格式是否清晰易读。有时候你的答案逻辑全对就因为变量名是a、b、c阅卷官没法快速看懂分数也会被打折扣。6.2 错题复盘把错误归因到知识树上的节点笔试结束不等于任务结束。收到结果之后先把每道没答对的题归类是语法边界不熟还是事件循环理解有误还是单纯没读懂题意。不要把错题当成孤立的知识点更建议把每道错题贴到对应的知识树节点上。比如事件循环输出错了继续追问自己Promise中的executor是不是同步执行到底什么是微任务为什么微任务要比宏任务先执行这种追问式复盘能直接定位到你整条知识链的断裂点。6.3 给备考者的最后一句话知识体系比刷题数量重要刷题当然重要但如果只是机械刷题题型一变还是会慌。我个人的经验是笔试前把《JavaScript高级程序设计》中的函数、闭包、面向对象、异步这几章吃透再把事件循环和浏览器渲染机制串起来比刷两百道随机题有用得多。每个知识点都问自己三个问题它是什么解决了什么问题在真实项目里哪里会用到能把这三句话讲清楚笔试和面试基本都能稳住。回到用友2019校招这道题它并不可怕甚至某种意义上很“实诚”考的都是前端开发者每天都在打交道的基础能力。这套备考思路换个年份、换个公司同样成立。