JS前端高频面试题及答案（贴近实战版）.docx

JS前端高频面试题及答案（贴近实战版）

1.说说变量提升的本质，为什么let/const没有变量提升？实际开发中怎么避免变量提升坑？

答案：

变量提升本质是JS引擎在执行代码前的“预编译”阶段，会把var声明的变量和function声明的函数提前放到作用域顶部（变量只声明不赋值，函数连定义都提前）。比如console.log(a);vara=1，预编译后会变成vara;console.log(a);a=1，所以不会报错而是输出undefined。

let/const不是没有提升，而是提升后会处于“暂时性死区（TDZ）”——从作用域开始到变量声明行之间，不能访问这个变量。比如console.log(b);letb=2会直接报错，因为TDZ禁止在声明前使用，这就避免了var的“先使用后声明”的混乱。

实际开发避坑：①优先用let/const替代var；②变量声明放在作用域最顶部（哪怕用let，也别在中间插声明）；③用函数表达式（constfn=()={}）替代函数声明，避免函数提升覆盖变量的问题。

2.this指向在不同场景下怎么确定？举2个实际开发中容易踩错的this例子

答案：

this指向核心原则是“谁调用它，this就指向谁”，具体分场景：

全局环境（非严格模式）：this指向window；严格模式下指向undefined

函数直接调用（比如fn()）：非严格模式指向window，严格模式undefined

对象方法调用（比如obj.fn()）：this指向调用方法的对象（obj）

构造函数调用（newFn()）：this指向新创建的实例

箭头函数：没有自己的this，继承外层作用域的this

call/apply/bind：强制改变this指向，指向第一个参数

踩错例子：

①定时器里的this：比如在Vue组件方法里写setTimeout(function(){this.$emit(xxx)},1000)，这里setTimeout里的函数是直接调用，this指向window（非严格模式），导致拿不到Vue实例。解决：用箭头函数（setTimeout(()={this.$emit(xxx)},1000)），继承组件方法的this。

②数组forEach里的this：constobj={name:a,fn(){[1,2].forEach(function(item){console.log(this.name)})}}，forEach回调函数是直接调用，this指向window，拿不到obj的name。解决：要么传第二个参数绑定this（forEach((item)={},this)），要么用箭头函数。

3.闭包是什么？实际开发中你用闭包做过什么？闭包会导致内存泄漏吗？

答案：

闭包本质是“有权访问外层函数作用域的内层函数”，哪怕外层函数已经执行完，内层函数还能拿到外层的变量。核心是作用域链的保留——内层函数的作用域链里，还存着外层函数的作用域。

实际应用：

①防抖节流：比如写一个防抖函数functiondebounce(fn,delay){lettimer;returnfunction(...args){clearTimeout(timer);timer=setTimeout(()=fn.apply(this,args),delay)}}，这里返回的函数就是闭包，保留了timer变量，实现多次触发只执行最后一次。

②模块封装：早期没有ESModule时，用闭包模拟私有变量，比如constmodule=(function(){letprivateVar=1;return{getVar:()=privateVar,setVar:(val)={privateVar=val}}})()，这里getVar/setVar是闭包，能访问privateVar，而外部无法直接修改privateVar。

内存泄漏问题：

闭包本身不会导致内存泄漏，是“不合理的闭包使用”才会。比如在Vue组件里，把DOM元素用闭包存起来，组件销毁后没清空，导致DOM无法被GC回收。解决：①组件销毁时手动清空闭包引用的变量；②避免长期持有不需要的变量（比如定时器用完清掉）。

4.Promise有哪几种状态？Promise.all和Promise.race的区别是什么？实际项目中用它们做过什么？

答