function foo 高频面试题及详细答案（实战向）

functionfoo高频面试题及详细答案（实战向）整套试题涵盖函数基础定义、变量提升、作用域、闭包、this指向、参数、返回值、箭头函数对比等前端核心高频考点，题目贴合真实面试出题逻辑，答案通俗落地、无书面模板话术，适合面试刷题、知识点复盘。一、基础概念题（入门必问）1.普通声明functionfoo(){}和变量赋值constfoo=function(){}有什么核心区别？详细答案：两者最核心的差异是变量提升机制和函数特性，具体分为三点：第一，提升规则不同。functionfoo(){}是函数声明，会整体提升，在代码定义之前就可以调用，不会报错；const定义的函数表达式，只有变量声明提升，赋值不会提升，定义前调用会直接报「Cannotaccess'foo'beforeinitialization」暂时性死区错误。第二，变量可修改性不同。函数声明的foo可以被二次赋值覆盖；const声明的函数变量，无法重新赋值，能避免函数被意外篡改，代码更安全。第三，全局挂载差异。在浏览器全局环境中，函数声明会挂载到window对象上；const/let定义的函数表达式，不会挂载到window上。日常开发中，优先用const函数表达式，规避变量污染和函数覆盖问题。2.解释一下：函数foo的形参和实参的区别，以及arguments的使用场景详细答案：形参是函数定义时，括号里声明的变量，相当于函数的「参数占位符」，仅在函数内部生效，没有传值时默认是undefined；实参是函数调用时，传入的真实数据，可以是常量、变量、表达式、对象等。arguments是函数内部的内置类数组对象，存储了调用函数时传入的所有实参。在ES6剩余参数出现之前，主要用于不确定参数个数的场景，比如写一个不限参数个数的求和foo函数。注意：箭头函数没有arguments，且严格模式下arguments只读，不能修改。现在开发优先用...rest剩余参数，比arguments更灵活、是纯数组，可直接调用数组方法。二、变量提升与执行顺序（高频坑题）3.写出以下代码的执行结果，并解释原因PlainText

console.log(foo);

functionfoo(){

return10

}

varfoo=20;

console.log(foo);详细答案：执行结果：先打印[Function:foo]，再打印20原因：JS代码执行分「预编译提升」和「逐行执行」两步。第一步预编译阶段：先提升var变量（初始值undefined），再提升函数声明（覆盖变量undefined，赋值为函数本身）。所以第一行打印时，foo是已提升的函数。第二步逐行执行：代码执行到varfoo=20时，对foo进行重新赋值，将函数覆盖为数字20，因此第二次打印结果为20。核心总结：同作用域内，函数声明提升优先级高于var变量声明，变量赋值会覆盖函数。4.写出以下代码的执行结果，并解释暂时性死区问题PlainText

console.log(foo);

constfoo=function(){

return100

}详细答案：执行结果：直接报错Cannotaccess'foo'beforeinitialization原因：const/let存在暂时性死区。虽然constfoo声明会提升，但不会初始化赋值，在定义语句执行之前，该变量处于锁定的死区，无法访问。而函数声明是提升后直接初始化完成，所以可以先调用后定义，这也是函数表达式和函数声明最大的坑点。三、this指向面试核心（重中之重）5.普通函数foo中this的指向规则有哪些？列出4种核心场景详细答案：普通函数的this永远由调用方式决定，和定义位置无关，四大场景如下：1.独立调用（直接执行foo()）：浏览器非严格模式this指向window，严格模式this为undefined；2.对象方法调用（obj.foo()）：this指向调用该方法的前置对象obj；3.定时器/异步回调调用（setTimeout(foo)）：this默认指向window；4.call/apply/bind强制调用：this指向手动绑定的第一个参数。6.分析以下代码的打印结果，解释this指向变化PlainText

varnum=10;

functionfoo(){

console.log(this.num);

}

constobj={

num:20,

fn:foo

}

obj.fn();

foo();详细答案：打印结果：先20，后10解析：第一行obj.fn()：属于对象方法调用，this指向obj对象，读取obj内部的num=20；第二行foo()：属于全局独立调用，this指向window，读取全局var定义的num=10；核心口诀：谁调用，this指向谁。四、闭包经典考题（面试高频手写）7.什么是闭包？手写一个foo闭包案例，并说明闭包的优缺点详细答案：闭包定义：内层函数访问外层函数的变量，且内层函数被外部引用，导致外层函数执行结束后，作用域不会销毁，形成闭包。简单说：函数嵌套+内部引用外部变量+内部函数被外部使用。手写案例：PlainText

//利用闭包实现计数器

functionfoo(){

letcount=0;

//内层函数

returnfunction(){

count++;

returncount;

}

}

constaddCount=foo();

console.log(addCount());//1

console.log(addCount());//2优缺点：优点：可以私有化变量（count无法全局修改）、延长变量生命周期、实现模块化；缺点：变量长期占用内存，无法及时销毁，容易造成内存堆积，使用不当会引发内存泄漏，需要手动置空释放。8.经典闭包坑题：分析以下代码批量打印结果PlainText

for(vari=1;i<=3;i++){

setTimeout(functionfoo(){

console.log(i)

},1000)

}详细答案：打印结果：连续打印4、4、4原因：var没有块级作用域，全局只有一个i。循环的定时器是异步任务，会等同步循环全部执行完再执行。循环结束后i自增到4，三个定时器回调函数都引用的是同一个全局i，所以全部打印4。解决方案：把var改成let，let有块级作用域，每一次循环都会生成一个独立的i副本，最终打印1、2、3。五、箭头函数与普通函数foo对比9.()=>{}箭头函数和普通functionfoo()有哪些核心区别？详细答案：1.this指向不同：普通函数this由调用方式决定；箭头函数没有自己的this，继承外层作用域的this，且绑定后无法修改，call/apply/bind无法改变箭头函数this；2.无arguments：箭头函数不支持arguments对象，只能用剩余参数...rest；3.不能作为构造函数：普通函数可以new实例化，箭头函数没有prototype，不能new，会报错；4.无提升：箭头函数都是函数表达式，不存在提升，必须先定义后使用；5.简写特性：箭头函数单行可省略return和大括号，代码更简洁，适合回调场景。六、进阶真题（面试压轴）10.手写防抖函数foo，说明使用场景详细答案：防抖核心逻辑：频繁触发函数时，只在最后一次触发后，延迟指定时间执行一次，期间再次触发会重置计时。手写代码：PlainText

functionfoo(fn,delay=300){

lettimer=null;

returnfunction(...args){

//每次触发清空之前的定时器

if(timer)clearTimeout(timer);

timer=setTimeout(()=>{

fn.apply(this,args);

timer=null;

},delay)

}

}使用场景：输入框搜索联想、窗口resize、鼠标移动频繁触发事件，用来减少函数执行次数，优化性能。11.分析自执行函数(functionfoo(){})()的作用详细答案：自执行函数（IIFE）定义后立即执行，核心作用是创建独立局部作用域。在ES5没有块级作用域、模块化的时代，自执行函数可以隔离内部变量，避免变量全局污染，所有内部变量只在当前函数作用域生效，外部无法访问。现在ES6普及后，有let/const块级作用域和ESModule模块化，自执行函数使用场景大幅减少，仅用于部分旧项目兼容、一次性初始化逻辑。12.