原生JS高频面试题及实战答案.docxVIP

原生JS高频面试题及实战答案

一、基础概念题（考察核心原理理解）

1.说说原型和原型链的作用，以及__proto__和prototype的区别

答案：

原型（prototype）是函数特有的属性，用于存放所有实例共享的方法和属性，避免内存浪费；原型链是实例查找属性/方法的机制——当访问实例的属性时，先查自身，没有就通过__proto__向上找原型对象，直到Object.prototype（顶端为null），这就是原型链。

区别：

prototype：仅函数拥有，是实例的原型对象（用于挂载共享属性）；

__proto__：所有对象（包括函数）都有，是实例指向其原型对象的“指针”，用于原型链查找（非标准属性，推荐用Object.getPrototypeOf()操作）。

举栗：

functionPerson(name){this.name=name}

Person.prototype.sayHi=()=console.log(hi)

constp=newPerson(张三)

p.sayHi()//能调用，因为p.__proto__===Person.prototype

2.闭包的定义、实际用途及可能引发的问题

答案：

闭包是指函数嵌套时，内层函数引用了外层函数的变量/参数，且内层函数被外部访问，导致外层函数的执行上下文不会被垃圾回收，变量得以保留的现象。

实际用途：

模块化（封装私有变量）：如计数器、单例模式；

延迟执行：如定时器、事件回调中保存上下文；

高阶函数：如防抖节流的实现。

潜在问题：

内存泄漏：闭包引用的变量不会被回收，若长期持有大对象/DOM元素，可能导致内存占用过高；

性能影响：过多闭包会增加内存开销，需合理释放（如手动置空引用）。

举栗（私有变量）：

functioncreateCounter(){

letcount=0//私有变量，外部无法直接修改

return{

increment:()=count++,

getCount:()=count

}

}

constcounter=createCounter()

counter.increment()

console.log(counter.getCount())//1，count被闭包保留

二、异步编程题（考察实战能力）

3.解释宏任务和微任务的区别，以及事件循环的执行顺序

答案：

JS是单线程，异步任务通过“事件循环”执行，分为宏任务和微任务：

宏任务：耗时较长的任务，如setTimeout、setInterval、DOM事件、AJAX请求、script脚本执行；

微任务：耗时较短的任务，如Promise.then/catch/finally、process.nextTick（Node环境）、queueMicrotask。

执行顺序：

先执行同步代码（主线程）；

同步代码执行完，清空当前微任务队列（按顺序执行所有微任务）；

微任务清空后，执行一个宏任务；

重复步骤2-3，形成事件循环。

举栗（写出输出顺序）：

console.log(1)

setTimeout(()=console.log(2),0)

Promise.resolve().then(()=console.log(3))

console.log(4)

//输出：1→4→3→2

//解析：同步代码1、4先执行；微任务3再执行；最后执行宏任务2

4.用原生JS实现Promise串行执行（给定数组，按顺序执行异步任务）

答案：

核心思路：利用Promise链式调用，通过reduce累积Promise，确保前一个任务完成后再执行下一个。

//异步任务示例：延迟1秒输出数字

constasyncTasks=[1,2,3].map(num=

()=newPromise(resolve=setTimeout(()={

console.log(num)

resolve(num)

},1000))

)

//串行执行函数

functionrunSerial(tasks){

returntasks.reduce((prev,task)=

prev.then(()=task()),//前一个Promise完成后，执行下一个任务

Promise.resolve()//初始Promise

)

}

runSerial(asyncTasks)//输出：1（延迟1s）→2（再延迟1s）→3（再延迟1s）

三、