2025年前端面试经典题目及答案.docxVIP

2025年前端面试经典题目及答案

如何理解JavaScript的原型链？

JavaScript中每个对象（除null外）都有一个内部属性`[[Prototype]]`，指向其原型对象。原型对象自身也有`[[Prototype]]`，形成链式结构，直到指向`Ototype`，其`[[Prototype]]`为null，至此原型链终止。原型链的核心作用是实现继承：当访问对象属性时，若对象自身无该属性，会沿原型链向上查找，直到找到或到达null。例如：

```javascript

constobj={};

console.log(obj.__proto__===Ototype);//true

console.log(Ototype.__proto__);//null

```

通过`Object.create()`可显式指定原型，`instanceof`操作符即通过检查原型链判断类型。

闭包的定义、形成条件及实际应用场景是什么？

闭包是函数与其词法环境的组合，允许函数访问其定义时所在作用域的变量，即使该函数在原作用域之外执行。形成闭包需满足两个条件：函数嵌套（内部函数引用外部函数的变量）、内部函数在外部函数执行后仍被保留（如作为返回值或事件回调）。

实际应用包括：

1.数据封装（如模块模式）：

```javascript

functioncreateCounter(){

letcount=0;

return{

increment:()=count++,

get:()=count

};

}

constcounter=createCounter();

counter.increment();//count变为1

```

2.事件处理函数保留状态；

3.函数柯里化（将多参数函数转换为单参数函数链）。

需注意闭包可能导致内存泄漏，若长期保留不再使用的闭包，应手动释放引用。

浏览器事件循环中宏任务与微任务的执行顺序是怎样的？

事件循环（EventLoop）是浏览器协调异步任务执行的机制，核心规则是：执行完当前调用栈的同步代码后，优先处理微任务队列（MicrotaskQueue），再处理宏任务队列（MacrotaskQueue），重复此过程。

-微任务包括：`Promise.then()/catch()/finally()`、`MutationObserver`、`queueMicrotask()`；

-宏任务包括：`setTimeout`、`setInterval`、`setImmediate`（Node.js）、`I/O`、`UI渲染`、`MessageChannel`。

执行顺序示例：

```javascript

console.log(同步代码);//1

setTimeout(()={//宏任务

console.log(setTimeout);//4

},0);

Promise.resolve().then(()={//微任务

console.log(Promise);//3

queueMicrotask(()={

console.log(queueMicrotask);//3.5（仍属微任务队列）

});

});

console.log(同步代码结束);//2

```

输出顺序：同步代码→同步代码结束→Promise→queueMicrotask→setTimeout。

Vue3的响应式系统相比Vue2有哪些改进？

Vue2使用`Object.defineProperty`劫持对象属性的`getter`和`setter`，存在以下限制：

-无法检测对象新增属性或删除属性（需手动调用`Vue.set`/`Vue.delete`）；

-数组通过重写部分方法（如`push`）实现响应式，但直接修改索引或长度无效；

-嵌套对象需递归遍历才能实现响应式，初始化性能受对象深度影响。

Vue3改用`Proxy`代理整个对象，优势如下：

1.支持拦截对象的所有操作（包括属性新增、删除、`has`、`ownKeys`等），无需手动处理边界情况；

2.数组通过`Proxy`拦截`set`操作，直接修改索引或长度可触发响应式；

3.依赖收集（Track）和触发更新（Trigger）更高效：使用`WeakMap`存储依赖（键为原始对象，值为`Map`存储属性与依赖的对应关系），避免递归遍历，减少内存占用；

4.支持`Ref`和`Reactive`两种响应式类型，`Ref`通过`value`