2019年前端工程师面试题及参考答案.docxVIP

2019年前端工程师面试题及参考答案

一、JavaScript基础（40分）

1.请解释原型链的概念，并说明instanceof运算符的工作原理（8分）

参考答案：

原型链是JavaScript实现继承的核心机制：每个对象都有__proto__属性（隐式原型），指向其构造函数的prototype（显式原型）；当访问对象属性时，若自身不存在，会沿着__proto__逐级向上查找，直到Ototype.__proto__=null，形成链式结构。

instanceof判断逻辑：检测构造函数的prototype是否存在于被检测对象的原型链上。例：ainstanceofA→检查A.prototype是否在a.__proto__、a.__proto__.__proto__...的链条中。

2.请分析以下代码的输出结果，并说明原因（6分）

console.log(typeofnull);

console.log(null==undefined);

console.log(null===undefined);

functionfn(){

console.log(this);

}

varobj={fn:fn};

fn();

obj.fn();

newfn();

参考答案：

输出结果依次：object、true、false、Window、obj对象、fn实例对象

原因：

typeofnull历史遗留bug，返回object（实际null是原始值）；

==会进行类型转换，null和undefined互等；===严格匹配类型和值，二者不同；

普通调用fn()this指向全局对象（浏览器中是Window）；对象调用obj.fn()this指向调用对象obj；new关键字调用时，this指向新创建的实例。

3.请实现一个防抖函数（debounce），要求触发后延迟n秒执行，期间重复触发则重新计时（8分）

参考答案：

functiondebounce(fn,delay){

lettimer=null;

returnfunction(...args){

//清除之前的定时器，重新计时

clearTimeout(timer);

timer=setTimeout(()={

//绑定this，传递参数

fn.apply(this,args);

},delay);

};

}

//用法示例：

constsearch=debounce(function(keyword){

console.log(搜索：,keyword);

},500);

4.解释闭包的概念、用途及可能引发的问题（6分）

参考答案：

概念：函数嵌套时，内层函数引用外层函数的变量/参数，且内层函数被外部访问，导致外层函数的执行上下文不会被垃圾回收，这种函数+lexical环境的组合称为闭包。

用途：

实现私有变量（如模块化封装）；

延迟执行（如定时器、回调函数）；

柯里化函数。

问题：闭包会保留外层函数的变量，若大量使用或未正确释放，可能导致内存泄漏（如未清除定时器、事件监听）。

5.请说明ES6中let/const与var的区别（6分）

参考答案：

特性

var

let/const

作用域

函数级作用域

块级作用域（{}内）

变量提升

提升且初始化为undefined

存在暂时性死区（TDZ），未声明前不可用

重复声明

允许

不允许

全局变量挂载

挂载到window对象

不挂载，仅在全局作用域

补充：const声明的是常量，必须初始化且不可重新赋值（但引用类型的属性可修改）。

6.解释事件冒泡和事件捕获的区别，如何阻止事件冒泡（6分）

参考答案：

事件流三个阶段：捕获阶段（从document向下到目标元素）→目标阶段→冒泡阶段（从目标元素向上到document）。

区别：

事件捕获：事件从顶层元素向下传播，先触发父元素事件，再触发子元素事件；

事件冒泡：事件从目标元素向上传播，先触发子元素事件，再触发父元素事件。

阻止冒泡：event.stopPropagation()（IE低版本用event.cancelBubble=true）；注意：stopImmediatePropagation()会同时阻止冒泡和当前元素后续的事件监听。

二、HTML/CSS（20分）

1.请说明Flex布局的常用属性（容器和项目）（8分）

参考答案：

容器属性（父元素）：

display:flex：开启Flex布局；

flex-di