2024年Web前端最新JS面试题汇总（十），前端界面开发基础

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

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

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

• 当我们需要一个属性的时，Javascript 引擎会先看当前对象中是否有这个属性， 如果没有的话，就会查找他的 Prototype 对象是否有这个属性。

function clone(proto) {

function Dummy() {}

Dummy.prototype = proto;

Dummy.prototype.constructor = Dummy;

return new Dummy(); //等价于Object.create(Person);

}

function object(old) {

function F() {}

F.prototype = old;

return new F();

}

var newObj = object(oldObject);

✨94. 请解释什么是事件代理

参考答案：

事件委托本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点，并且父节点可以通过事件对象获取到

目标节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件代理。

使用事件代理我们可以不必要为每一个子元素都绑定一个监听事件，这样减少了内存上的消耗。并且使用事件代理我们还可以实现事件的动态绑定，比如说新增了一个子节点，我们并不需要单独地为它添加一个监听事件，它所发生的事件会交给父元素中的监听函数来处理。

👓参考

✨95. offsetWidth/offsetHeight, clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别

参考答案：

offsetWidth / offsetHeight 返回值包含content + padding + border，效果与 e.getBoundingClientRect()相同

clientWidth / clientHeight 返回值只包含content + padding，如果有滚动条，也不包含滚动条

scrollWidth / scrollHeight 返回值包含content + padding + 溢出内容的尺⼨

✨96. 谈谈你对 AMD、CMD 的理解

参考答案：

• CommonJS 是服务器端模块的规范， Node.js 采⽤了这个规范。

• CommonJS 规范加载模 块是同步的，也就是说，只有加载完成，才能执⾏后⾯的操作。AMD 规范则是⾮同步加载 模块，允许指定回调函数

AMD 推荐的⻛格通过返回⼀个对象做为模块对象， CommonJS 的⻛格通过对module.exports 或 exports 的属性赋值来达到暴露模块对象的⽬的

es6模块 CommonJS、AMD、CMD

• CommonJS 的规范中，每个 JavaScript ⽂件就是⼀个独⽴的模块上下⽂（ module context ），在这个上下⽂中默认创建的属性都是私有的。也就是说，在⼀个⽂件定义的 变量（还包括函数和类），都是私有的，对其他⽂件是不可⻅的

• CommonJS 是同步加载模块,在浏览器中会出现堵塞情况，所以不适⽤

• AMD 异步，需要定义回调 define ⽅式

• es6 ⼀个模块就是⼀个独⽴的⽂件，该⽂件内部的所有变量，外部⽆法获取。如果你希 望外部能够读取模块内部的某个变量，就必须使⽤ export 关键字输出该变量 es6 还可以导出类、⽅法，⾃动适⽤严格模式

✨97. web 开发中会话跟踪的方法有哪些

参考答案：

会话跟踪就是浏览器和服务器通信

1、cookie

2、session

3、隐藏input

4、url重写

5、ip地址

✨98. 说几条写 JavaScript 的基本规范？

参考答案：

1、不要在同一行声明多个变量

2、使用===或!==来比较

3、使用字面量的方式来创建对象、数组，替代new Array这种形式

4、不要使用全局函数

5、switch语句必须要带default分支

6、函数不应该有的时候有return，有的时候没有return

7、fon-in循环中的变量，用var关键字说明作用域，防止变量污染

8、变量的声明遵循驼峰命名法，用let替代val，声明构造函数时首字母大写，定义常量的时候尽量用大写字母，用_分割

9、三元表达式可以替代if语句

10、&&和||是可以短路的，使用&&时如果前面一个值是错的，那么后面的值不用判断，使用||时，如果前面一个值是对的，那么后面的值不用判断

11、比较数据类型以下6中情况是false，其他都是true------false、“”、0、null、undefined、NaN

12、数据类型检测用typeof，对象类型检测用instanceof

13、异步加载第三方的内容

14、单行注释//，多行注释/**/

15、使用命名空间解决变量名冲突

判断

回到题目，如果你真想检验一个人的水平。第一步先考察一下基本的编程基础，问几个基本的编程问题，可以和前端相关也可以无关。比如垃圾收集大致是怎么做的，setTimeout 大致做了什么（说会在另一个线程里执行回调的直接毙掉）。

第二步考察一下知识面，问问http、tcp的基本知识，dns是怎么工作的，或者常用框架的实现原理，看看候选人是不是除了自己的一亩三分地什么都不关心。

第三步考察hold业务逻辑的能力，从一个简单的注册页，或者查询页开始，先让说下代码的基本架构，然后需求、性能、可靠性、安全层层加码，看看能不能很快的反馈出解决方案。能对答如流的要么做过，要么对他来说这种复杂度的东西是小case。

前三步都没问题，基本上说明候选人已经还行了，但是行到什么程度，不知道。如果想找比较厉害的，就增加个第四步，亮点项目考察。

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

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了，我整理一套前端面试题分享给大家，希望对即将去面试的小伙伴们有帮助！

371)**

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了，我整理一套前端面试题分享给大家，希望对即将去面试的小伙伴们有帮助！

[外链图片转存中…(img-F9Du2xc5-1714913894978)]

[外链图片转存中…(img-fBXd0pzn-1714913894979)]