JS前端面试题及参考答案.docxVIP

JS前端面试题及参考答案

一、基础概念题（共5题）

1.说说var、let、const的区别，实际开发中你会怎么选择？

参考答案：

作用域：var是函数作用域，let/const是块级作用域（{}内有效）；

提升行为：var会变量提升且初始化为undefined，let/const存在暂时性死区（TDZ），未声明前使用报错；

重复声明：var允许重复声明，let/const不允许；

赋值特性：const声明必须初始化且不能修改引用（基本类型值不可改，引用类型可改内部属性）。

实际选择：

优先用const（大部分变量声明后不需要修改，减少意外赋值，代码更严谨）；

变量需要重新赋值时用let；

完全不用var（避免作用域污染和提升带来的逻辑混乱）。

2.什么是原型链？它的作用是什么？

参考答案：

原型链本质是对象之间的继承关系：每个JS对象都有__proto__属性（隐式原型），指向其构造函数的prototype（显式原型）；当访问对象的某个属性时，若对象本身没有，会顺着__proto__一直向上查找，直到找到该属性或到达原型链顶端（Object.prototype.proto=null），这个查找链条就是原型链。

作用：实现JS的继承机制，让对象能共享原型上的属性和方法（比如数组能使用forEach，就是因为Array.prototype上定义了该方法，所有数组实例通过原型链访问到），减少内存占用。

3.解释一下闭包，以及闭包的实际应用场景和可能的问题？

参考答案：

闭包定义：函数嵌套时，内层函数引用了外层函数的变量/参数，且内层函数被外层函数以外的地方引用，导致外层函数的执行上下文不会被垃圾回收，这种“函数+词法环境”的组合就是闭包。

实际场景：

模块化封装（比如用闭包创建私有变量，避免全局污染）；

防抖节流函数（保存定时器ID和上次执行时间）；

函数柯里化（缓存参数）。

可能问题：闭包会持有外层函数的变量，导致内存无法释放，过度使用可能造成内存泄漏；解决方式：不需要时手动解除引用（比如把闭包引用的变量设为null）。

4.说说JS的事件流机制，事件委托的原理和优势？

参考答案：

事件流：JS事件触发后会经历三个阶段——捕获阶段（从window向下传播到目标元素）、目标阶段（事件到达目标元素）、冒泡阶段（从目标元素向上传播回window）；默认情况下，事件在冒泡阶段触发。

事件委托原理：利用事件冒泡特性，将子元素的事件绑定到父元素上，通过事件对象的target属性判断触发事件的子元素，从而执行对应逻辑。

优势：

减少事件绑定次数，提升性能（比如100个列表项不需要绑定100个click事件）；

动态新增的子元素自动拥有事件响应（不需要重新绑定）。

5.什么是深拷贝和浅拷贝？如何实现深拷贝？

参考答案：

浅拷贝：只复制对象的表层属性，若属性是引用类型（对象、数组），复制的是引用地址，修改拷贝后的对象会影响原对象（比如Object.assign、扩展运算符...、数组slice方法）；

深拷贝：完全复制对象的所有层级属性，生成一个新的独立对象，修改拷贝后对象不会影响原对象。

实现方式：

简单场景：JSON.parse(JSON.stringify(对象))（缺点：不能拷贝函数、Symbol、循环引用对象）；

复杂场景：递归遍历对象，对每个属性判断类型，基本类型直接复制，引用类型递归拷贝（需处理数组、对象、循环引用、Symbol等）；

实用方案：使用lodash的cloneDeep方法（项目中常用，兼容性好）。

二、进阶应用题（共3题）

1.手写防抖函数（debounce）

题目要求：实现一个防抖函数，要求触发后延迟n秒执行，若n秒内再次触发则重新计时。

参考答案：

functiondebounce(fn,delay){

lettimer=null;//保存定时器ID

//返回闭包函数，接收参数

returnfunction(...args){

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

clearTimeout(timer);

//重新设置定时器，延迟执行fn

timer=setTimeout(()={

//绑定this，确保fn内部this指向正确（比如事件回调中this是触发元素）

fn.apply(this,args);

},delay);

};

}

//使用示例：搜索输入框防抖

constinput=document.querySelector(input);

input