JS 面试题大全

àì夳堔傛蜴生んèń 2022-11-12 02:39 240阅读 0赞

## 1、介绍一下js的数据类型有哪些，值是如何存储的？ ##

![在这里插入图片描述][20210322191254991.png]

## 2、说一下js的数据类型的转换都有哪些？ ##

![在这里插入图片描述][20210322191303350.png]

## 3、如何去判断js数据类型？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70]

## 4、介绍 js 有哪些内置对象？ ##

![在这里插入图片描述][20210322191322884.png]

## 5、javascript 创建对象的几种方式？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 1]

## 6、js 获取原型的方法？ ##

![在这里插入图片描述][20210322191336637.png]

## 7、什么是闭包，为什么要用它？ ##

![在这里插入图片描述][20210322191348235.png]

## 8、三种事件模型是什么？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 2]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 3]

## 10、简述javascript中this的指向？ ##

!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/2021032219142296.png?x-oss-process=imag\#\# 标题e/watermark,type\_ZmFuZ3poZW5naGVpdGk,shadow\_10,text\_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size\_16,color\_FFFFFF,t\_70)

## 11、解释一下原型链？ ##

![在这里插入图片描述][20210322191431179.png]

## 12、深拷贝、浅拷贝、以及如何实现？ ##

![在这里插入图片描述][20210322191441176.png]

## 13、DOM事件流和事件委托？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 4]

## 14、ajax是什么？以及如何去创建它？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 5]

## 15、什么是跨域？jsonp的原理？以及怎么实现？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 6]

## 16、防抖和节流 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 7]

## 17、同步和异步的区别，分别列举一个同步和异步的例子？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 8]

## 18、描述new一个对象的过程？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 9]

## 19、全局函数eval()有什么作用？ ##

![在这里插入图片描述][20210322192705504.png]

## 20、原生对象和宿主对象？ ##

![在这里插入图片描述][20210322192711879.png]

## 21、get和post有什么区别？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 10]

## 22、请解释一下变量声明提升？ ##

![在这里插入图片描述][20210322192728115.png]

## 23、请指出document.onload和document.ready两个事件的区别？ ##

![在这里插入图片描述][2021032219273890.png]

## 24、请解释JSONP的工作原理，以及它为什么不是真正的AJAX？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 11]

## 25、通过new创建一个对象的时候，构造函数内部有哪些改变？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 12]

## 26、如何防范CSRF攻击，XSS攻击？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 13]

## 27、箭头函数与普通函数的区别？ ##

![在这里插入图片描述][20210322192804488.png]

## 28、说一下js继承？ ##

\*\*\***Es5中的继承有：  
①.原型继承：父类的实例作为子类的原型  
②.借用构造函数继承：在子类中适用call方法，调用父类的方法，并将父类的this改为子类的this  
③.组合继承：既可以调用父类实例的属性又能调用父类原型的属性  
ES6有class继承：  
①.class就相当于Es5中的构造函数  
②.class中定义的方法签后不能加function ,全部定义在class的prototype属性中  
③.class只能定义方法，不能定义定义对象变量等  
④.class默认为严格模式  
⑤.在子类中，调用extends方法，可以调用父类的属性，用eat调用父类的方法**

--------------------

## 29、JS 中的主要有哪几类错误？ ##

![在这里插入图片描述][20210322192814550.png]

## 30、JS中如何将页面重定向到另一个页面？ ##

![在这里插入图片描述][20210322192821861.png]

## 31、JS中的Array.splice()和Array.slice()方法有什么区别？ ##

![在这里插入图片描述][20210322192828625.png]

## 32、undefined，null 和 undeclared 有什么区别？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 14]

## 33、JS中的高阶函数？ ##

![在这里插入图片描述][20210322192843351.png]

## 34、如何区分声明函数和表达式函数？ ##

![在这里插入图片描述][2021032219285072.png]

## 35、JS中的“严格”模式是什么以及如何启用？ ##

![在这里插入图片描述][20210322192856474.png]

## 36.请描述event loop(事件循环、事件轮询)的机制，可画图？ ##

①.js是单线程的，异步要基于回调来实现，event loop（事件循环/事件轮询）就是异步回调的实现原理。

首先我们需要明白js是如何执行的：从前到后，一行一行执行，如果某一行执行报错了，则停止下面代码的执行，先将同步代码执行完毕，再执行异步代码。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 15]  
根据上图所示，event loop的执行原理如下：

（1）同步代码，一行一行执行，是放在call stack（调用堆栈）中执行的  
（2）遇到异步代码，先记录下在web API中，等待时机（定时、网络请求等）  
（3）时机到了，就移动到callback queue（回调队列）中  
（4）如果 call stack 为空（即同步代码执行完毕） event loop 开始工作  
（5）轮询查找 callback queue， 如有则移动到call stack执行  
（6）然后继续轮询查找，直到完成

②.DOM事件 和 event loop  
js是单线程的  
异步（setTimeout、ajax等）使用回调，是基于event loop的  
DOM事件也使用回调，也基于event loop

## 37.什么是宏任务和微任务，两者有什么区别？ ##

![在这里插入图片描述][20210321185629802.png]

## 38.promise有哪三种状态？如何变化 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 16]

## 39.async/await ？ ##

![在这里插入图片描述][20210321185808296.png]

## 40、event loop 和 DOM渲染 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 17]

[20210322191254991.png]: /images/20221022/d057ca783ebc4802b508c438b14a221f.png
[20210322191303350.png]: https://img-blog.csdnimg.cn/20210322191303350.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210322191311378.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[20210322191322884.png]: https://img-blog.csdnimg.cn/20210322191322884.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210322191330454.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[20210322191336637.png]: https://img-blog.csdnimg.cn/20210322191336637.png
[20210322191348235.png]: https://img-blog.csdnimg.cn/20210322191348235.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210322191356702.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210322191407486.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[20210322191431179.png]: https://img-blog.csdnimg.cn/20210322191431179.png
[20210322191441176.png]: https://img-blog.csdnimg.cn/20210322191441176.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210322191452919.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210322191502323.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210322191512282.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210322191526989.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210322192645896.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20210322192654973.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[20210322192705504.png]: https://img-blog.csdnimg.cn/20210322192705504.png
[20210322192711879.png]: https://img-blog.csdnimg.cn/20210322192711879.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20210322192719747.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[20210322192728115.png]: https://img-blog.csdnimg.cn/20210322192728115.png
[2021032219273890.png]: https://img-blog.csdnimg.cn/2021032219273890.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20210322192744331.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20210322192750420.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20210322192757692.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[20210322192804488.png]: https://img-blog.csdnimg.cn/20210322192804488.png
[20210322192814550.png]: https://img-blog.csdnimg.cn/20210322192814550.png
[20210322192821861.png]: https://img-blog.csdnimg.cn/20210322192821861.png
[20210322192828625.png]: https://img-blog.csdnimg.cn/20210322192828625.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20210322192834917.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[20210322192843351.png]: https://img-blog.csdnimg.cn/20210322192843351.png
[2021032219285072.png]: https://img-blog.csdnimg.cn/2021032219285072.png
[20210322192856474.png]: https://img-blog.csdnimg.cn/20210322192856474.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20210321183844556.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[20210321185629802.png]: https://img-blog.csdnimg.cn/20210321185629802.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20210321185447612.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[20210321185808296.png]: https://img-blog.csdnimg.cn/20210321185808296.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20210321190000122.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70