Web前端最全offer收割攻略，Web前端面试真题JavaScript系列(带详解)(2)，2024年最新最新阿里前端面试题目

最后

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：

凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。

入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。

使用闭包的注意点

1.由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露

2.解决方法是，在退出函数之前，将不使用的局部变量全部删除

2 说说你对作用域链的理解

1.作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到 window 对象即被终止，作用域链向下访问变量是不被允许的

2.简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期

3 JavaScript原型，原型链 ? 有什么特点？

1.每个对象都会在其内部初始化一个属性，就是 prototype (原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去 prototype 里找这个属性，这个prototype 又会有自己的 prototype ，于是就这样一直找下去，也就是我们平时所说的原型链的概念

2.关系： instance.constructor.prototype = instance.__proto__

3.特点：

JavaScript 对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这⼀改变

4.当我们需要一个属性的时， Javascript 引擎会先看当前对象中是否有这个属性， 如果没有的就会查找他的 Prototype 对象是否有这个属性，如此递推下去，⼀直检索到 Object 内建对象

4 请解释什么是事件代理

事件代理（ Event Delegation ），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能，可以大量节省内存占用，减少事件注册，比如在 table 上代理所有 td 的 click 事件就非常棒，可以实现当新增子对象时无需再次对其绑定

5 Javascript如何实现继承？

构造继承

原型继承

实例继承

拷贝继承

原型 prototype 机制或 apply 和 call 方法去实现较简单，建议使用构造函数与原型混合方式

function Parent(){

this.name = ‘wang’;

}

function Child(){

this.age = 28;

}

Child.prototype = new Parent();//继承了Parent，通过原型

var demo = new Child();

alert(demo.age);

alert(demo.name);//得到被继承的属性

6 谈谈This对象的理解

this 总是指向函数的直接调用者（而非间接调用者）；如果有 new 关键字， this 指向 new 出来的那个对象；在事件中， this 指向触发这个事件的对象，特殊的是， IE 中 attachEvent 中的this 总是指向全局对象 Window

7 事件模型

W3C 中定义事件的发生经历三个阶段：捕获阶段（ capturing ）、目标阶段（ targetin ）、冒泡阶段（ bubbling ）

1.冒泡型事件：当你使用事件冒泡时，子级元素先触发，父级元素后触发

2.捕获型事件：当你使用事件捕获时，父级元素先触发，子级元素后触发

3.DOM 事件流：同时支持两种事件模型：捕获型事件和冒泡型事件阻止冒泡：在 W3c 中，使用 stopPropagation() 方法；在IE下设置 cancelBubble =true

4.阻止捕获：阻止事件的默认行为，例如 click - 后的跳转。在 W3c 中，使用preventDefault() 方法，在 IE 下设置 window.event.returnValue = false

8 new操作符具体干了什么呢?

1.创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型

2.属性和方法被加入到 this 引用的对象中

3.新创建的对象由 this 所引用，并且最后隐式的返回 this

9 哪些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在 setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏闭包使用不当

10 XML和JSON的区别？

1.数据体积方面

JSON 相对 于XML 来讲，数据的体积小，传递的速度更快些。

2.数据交互方面

JSON 与 JavaScript 的交互更加方便，更容易解析处理，更好的数据交互

3.数据描述方面

JSON 对数据的描述性比 XML 较差

4.传输速度方面

JSON 的速度要远远快于 XML

11 谈谈你对webpack的看法

WebPack 是一个模块打包工具，你可以使用 WebPack 管理你的模块依赖，并编绎输出模

块们所需的静态文件。它能够很好地管理、打包 Web 开发中所用到的 HTML 、Javascript 、 CSS 以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源， webpack 有对应的模块加载器。 webpack 模块打包器会分析模块间的依赖关系，最后生成了优化且合并后的静态资源

12 用过哪些设计模式？

工厂模式：

工厂模式解决了重复实例化的问题，但还有一个问题,那就是识别问题，因为根本无法主要好处就是可以消除对象间的耦合，通过使用工程方法而不是 new 关键字

构造函数模式：

使用构造函数的方法，即解决了重复实例化的问题，又解决了对象识别的问题，该模式与工厂模式的不同之处在于直接将属性和方法赋值给 this 对象;

13 为什么要有同源限制？

1.同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议

2.举例说明：比如一个黑客程序，他利用 Iframe 把真正的银行登录页面嵌到他的页面上，当你使用真实的用用户名，密码登录时，他的页面就可以通过 Javascript 读取到你的表单中 input 中的内容，这样用户名，密码就轻松到手了。

14 你觉得jQuery源码有哪些写的好的地方

jquery 源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通

过传入window 对象参数，可以使 window 对象作为局部变量使用，好处是当 jquery 中

访问 window 对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问

window对象。同样，传入 undefined 参数，可以缩短查找 undefined 时的作用域链 jquery 将一些原型属性和方法封装在了 jquery.prototype 中，为了缩短名称，又赋值给了 jquery.fn ，这是很形象的写法有一些数组或对象的方法经常能使用到， jQuery 将其保存为局部变量以提高访问速度 jquery 实现的链式调用可以节约代码，所返回的都是同⼀个对象，可以提高代码效率

15 vue、react、angular

1.Vue.js 一个用于创建 web 交互界面的库，是一个精简的 MVVM 。它通过双向数据绑定把 View 层和 Model 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了Directives 和 Filters

2.AngularJS 是一个比较完善的前端 MVVM 框架，包含模板，数据双向绑定，路由，模块

化，服务，依赖注入等所有功能，模板功能强大丰富，自带了丰富的 Angular 指令

3.react React 仅仅是 VIEW 层是 facebook 公司。推出的一个用于构建 UI 的一个库，能够实现服务器端的渲染。用了 virtual dom ，所以性能很好。

16 哪些操作会造成内存泄漏

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

17 web开发中会话跟踪的方法有哪些

cookie

session

url 重写

隐藏 input

ip 地址

18 介绍js的基本数据类型

Undefined 、 Null 、 Boolean 、 Number 、 String

19 介绍js有哪些内置对象

Object 是 JavaScript 中所有对象的⽗对象

数据封装类对象： Object 、 Array 、 Boolean 、 Number 和 String

其他对象： Function 、 Arguments 、 Math 、 Date 、 RegExp 、 Error

20 javascript创建对象的几种方式

javascript 创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用 JSON ；但写法有很多种，也能混合使用

1.对象字面量的方式

person={firstname:“Mark”,lastname:“Yun”,age:25,eyecolor:“black”};

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-rab3Q2G1-1715859912282)]

[外链图片转存中…(img-uJy6uFmA-1715859912284)]