前端面试基础篇，凛冬将至！道友快来一起闭关修炼！

最新推荐文章于 2024-05-04 23:32:23 发布

m0_62909632

最新推荐文章于 2024-05-04 23:32:23 发布

阅读量113

点赞数

文章标签：面试前端华为

原文链接：https://juejin.cn/post/6844904046717829133

版权

好买网 GoodMai IT交易平台

借用神剧《权游》的名句：“凛冬将至！”，互联网寒冬已然来临，这一年以来keep/滴滴/京东/腾讯/华为等大厂裁员事件不断爆出！惊醒着头发慢慢脱落、变少的我们，是时候闭关修炼了！

本文为前端面试基础篇，将以面试题 && 答案【参考 (๑¯∀¯๑)】的形式，闭关修炼，希望你查漏补缺，完善你的知识体系！

面试，我们是认真的！

JavaScript 篇

1. JavaScript有⼏种类型的值

栈：原始数据类型（ Undefined ， Null ， Boolean ， Number 、 String ）
堆：引⽤数据类型（对象、数组和函数）
两种类型的区别是：存储位置不同
- 原始数据类型直接存储在栈( stack )中的简单数据段，占据空间⼩、⼤⼩固定，属于被频繁使⽤数据，所以放⼊栈中存储；
- 引⽤数据类型存储在堆( heap )中的对象,占据空间⼤、⼤⼩不固定,如果存储在栈中，将会影响程序运⾏的性能；引⽤数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引⽤值时，会⾸先检索其在栈中的地址，取得地址后从堆中获得实体

2. 介绍JavaScript有哪些内置对象

Object 是 JavaScript 中所有对象的⽗对象
数据封装类对象： Object 、 Array 、 Boolean 、 Number 和 String
其他对象： Function 、 Arguments 、 Math 、 Date 、 RegExp 、 Error

3. null，undefined 的区别

undefined 表示不存在这个值
undefined : 是⼀个表示"⽆"的原始值或者说表示"缺少值"，就是此处应该有⼀个值，但是还没有定义。例如变量被声明了，但没有赋值时，就等于 undefined
null 表示⼀个对象被定义了，值为“空值”
null : 是⼀个对象(空对象, 没有任何属性和⽅法) 例如作为函数的参数，表示该函数的参数不是对象；在验证 null 时，⼀定要使⽤ === ，因为 == ⽆法分别 null 和 undefined

4. 什么是事件代理

事件代理（ Event Delegation ），⼜称之为事件委托。是 JavaScript 中绑定事件的常⽤技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给⽗元素，让⽗元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。
使⽤事件代理的好处是：
- 可以提⾼性能
- 可以⼤量节省内存占⽤
- 减少事件注册，⽐如在 table 上代理所有 td 的 click 事件

5. 同步和异步的区别

同步：浏览器访问服务器请求，⽤户看得到⻚⾯刷新，重新发请求,等请求完，⻚⾯刷新，新内容出现，⽤户看到新内容,进⾏下⼀步操作
异步：浏览器访问服务器请求，⽤户正常操作，浏览器后端进⾏请求。等请求完，⻚⾯不刷新，新内容也会出现，⽤户看到新内容

6. defer 和 async

defer 并⾏加载 js ⽂件，会按照⻚⾯上 script 标签的顺序执⾏
async 并⾏加载 js ⽂件，下载完成⽴即执⾏，不会按照⻚⾯上 script 标签的顺序执⾏

7. 什么是⾯向对象编程和⾯向过程编程

⾯向过程就是分析出解决问题所需要的步骤，然后⽤函数把这些步骤⼀步⼀步实现，使⽤的时候⼀个⼀个依次调⽤就可以了
⾯向对象是把构成问题事务分解成各个对象，建⽴对象的⽬的不是为了完成⼀个步骤，⽽是为了描叙某个事物在整个解决问题的步骤中的⾏为⾯向对象是以功能来划分问题，⽽不是步骤

8. ⾯向对象编程思想

基本思想是使⽤对象，类，继承，封装等基本概念来进⾏程序设计
优点
- 易维护采⽤⾯向对象思想设计的结构，可读性⾼，由于继承的存在，即使改变需求，那么维护也只是在局部模块，所以维护起来是⾮常⽅便和较低成本的
- 易扩展
- 开发⼯作的重⽤性、继承性⾼，降低重复⼯作量
- 缩短了开发周期

9. Javascript中callee和caller的作⽤？

caller 是返回⼀个对函数的引⽤，该函数调⽤了当前函数；
callee 是返回正在被执⾏的 function 函数，也就是所指定的 function 对象的正⽂

10. 事件的各个阶段

1：捕获阶段 ---> 2：⽬标阶段 ---> 3：冒泡阶段
document ---> target ⽬标 ----> document
由此， addEventListener 的第三个参数设置为 true 和 false 的区别已经⾮常清晰了
- true 表示该元素在事件的“捕获阶段”（由外往内传递时）响应事件
- false 表示该元素在事件的“冒泡阶段”（由内向外传递时）响应事件

11. 闭包

闭包就是能够读取其他函数内部变量的函数
闭包是指有权访问另⼀个函数作⽤域中变量的函数，创建闭包的最常⻅的⽅式就是在⼀个函数内创建另⼀个函数，通过另⼀个函数访问这个函数的局部变量,利⽤闭包可以突破作⽤链域
闭包的特性：
- 函数内再嵌套函数
- 内部函数可以引⽤外层的参数和变量
- 参数和变量不会被垃圾回收机制回收

说说你对闭包的理解

使⽤闭包主要是为了设计私有的⽅法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增⼤内存使⽤量，使⽤不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产⽣作⽤域的概念
闭包的最⼤⽤处有两个，⼀个是可以读取函数内部的变量，另⼀个就是让这些变量始终保持在内存中
闭包的另⼀个⽤处，是封装对象的私有属性和私有⽅法
好处：能够实现封装和缓存等；
坏处：就是消耗内存、不正当使⽤会造成内存溢出的问题使⽤闭包的注意点
由于闭包会使得函数中的变量都被保存在内存中，内存消耗很⼤，所以不能滥⽤闭包，否则会造成⽹⻚的性能问题，在IE中可能导致内存泄露
解决⽅法是，在退出函数之前，将不使⽤的局部变量全部删除

12. 说说你对作⽤域链的理解

作⽤域链的作⽤是保证执⾏环境⾥有权访问的变量和函数是有序的，作⽤域链的变量只能向上访问，变量访问到 window 对象即被终⽌，作⽤域链向下访问变量是不被允许的
简单的说，作⽤域就是变量与函数的可访问范围，即作⽤域控制着变量与函数的可⻅性和⽣命周期

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

每个对象都会在其内部初始化⼀个属性，就是 prototype (原型)，当我们访问⼀个对象的属性时
如果这个对象内部不存在这个属性，那么他就会去 prototype ⾥找这个属性，这个 prototype ⼜会有⾃⼰的 prototype ，于是就这样⼀直找下去，也就是我们平时所说的原型链的概念
关系： instance.constructor.prototype = instance._proto_
特点：
JavaScript 对象是通过引⽤来传递的，我们创建的每个新对象实体中并没有⼀份属于⾃⼰的原型副本。当我们修改原型时，与之相关的对象也会继承这⼀改变
当我们需要⼀个属性的时， Javascript 引擎会先看当前对象中是否有这个属性，如果没有的就会查找他的 Prototype 对象是否有这个属性，如此递推下去，⼀直检索到 Object 内建对象

14. Javascript如何实现继承？

16. 谈谈This对象的理解

17. new操作符具体⼲了什么呢?

18. 那些操作会造成内存泄漏？

19. Ajax原理

作者：随想人生
链接：https://juejin.cn/post/6844904046717829133
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

构造继承
原型继承
实例继承
拷⻉继承
原型 prototype 机制或 apply 和 call ⽅法去实现较简单，建议使⽤构造函数与原型混合⽅式

    function Parent(){
    this.name = 'wang'; }
    function Child(){
    this.age = 28; }
    Child.prototype = new Parent(); // 通过原型继承了Parent
    var demo = new Child();
    console.log(demo.age);
    console.log(demo.name); // 得到被继承的属性

15. javascript有哪些⽅法定义对象

对象字⾯量： var obj = {};
构造函数： var obj = new Object();
Object.create(): var obj = Object.create(Object.prototype);
this 总是指向函数的直接调⽤者（⽽⾮间接调⽤者）
如果有 new 关键字， this 指向 new 出来的那个对象
在事件中， this 指向触发这个事件的对象，特殊的是， IE 中的 attachEvent 中的 this 总是指向全局对象 Window
创建⼀个空对象，并且 this 变量引⽤该对象，同时还继承了该函数的原型
属性和⽅法被加⼊到 this 引⽤的对象中
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在
setTimeout 的第⼀个参数使⽤字符串⽽⾮函数的话，会引发内存泄漏
闭包使⽤不当
Ajax 的原理简单来说是在⽤户和服务器之间加了—个中间层( AJAX 引擎)，通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后⽤ javascrip t 来操作 DOM ⽽更新⻚⾯。使⽤户操作与服务器响应异步化。这其中最关键的⼀步就是从服务器获得请求数据
Ajax 的过程只涉及 JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest 是 aja x的核⼼机制
- 新创建的对象由 this 所引⽤，并且最后隐式的返回 this
- 18. 那些操作会造成内存泄漏？
- 内存泄漏指任何对象在您不再拥有或需要它之后仍然存在
- setTimeout 的第⼀个参数使⽤字符串⽽⾮函数的话，会引发内存泄漏
- 闭包使⽤不当
- Ajax 的原理简单来说是在⽤户和服务器之间加了—个中间层( AJAX 引擎)，通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后⽤ javascrip t 来操作 DOM ⽽更新⻚⾯。使⽤户操作与服务器响应异步化。这其中最关键的⼀步就是从服务器获得请求数据
- Ajax 的过程只涉及 JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest 是 aja x的核⼼机制
- 作者：随想人生
  链接：https://juejin.cn/post/6844904046717829133
  来源：稀土掘金
  著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
  
  19. Ajax原理
- Ajax 的原理简单来说是在⽤户和服务器之间加了—个中间层( AJAX 引擎)，通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后⽤ javascrip t 来操作 DOM ⽽更新⻚⾯。使⽤户操作与服务器响应异步化。这其中最关键的⼀步就是从服务器获得请求数据
- Ajax 的过程只涉及 JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest 是 aja x的核⼼机制
- ```
    /** 1. 创建连接 **/
    let xhr = null;
    xhr = new XMLHttpRequest()
    /** 2. 连接服务器 **/
    xhr.open('get', url, true)
    /** 3. 发送请求 **/
    xhr.send(null);
    /** 4. 接受请求 **/
    xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
    if(xhr.status == 200){
    success(xhr.responseText); } else {
    /** false **/
    fail && fail(xhr.status); } } }
    
```

ajax 有那些优缺点?

优点：
- 通过异步模式，提升了⽤户体验.
- 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占⽤.
- Ajax 在客户端运⾏，承担了⼀部分本来由服务器承担的⼯作，减少了⼤⽤户量下的服务器负载。 Ajax 可以实现动态不刷新（局部刷新）
缺点：
- 安全问题 AJAX 暴露了与服务器交互的细节。
- 对搜索引擎的⽀持⽐较弱。不容易调试。

20. 如何解决跨域问题?

先了解一下什么是同源策略

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

Cookie、LocalStorage 和 IndexDB 无法读取
DOM 和 Js对象无法获得
AJAX 请求不能发送

常用跨域解决方案

通过jsonp跨域
跨域资源共享（CORS）
nginx代理跨域
nodejs中间件代理跨域

（PS：篇幅有限，具体用法自行百度）

21. 说说 event loop

⾸先， js 是单线程的，主要的任务是处理⽤户的交互，⽽⽤户的交互⽆⾮就是响应 DOM 的增删改，使⽤事件队列的形式，⼀次事件循环只处理⼀个事件
响应，使得脚本执⾏相对连续，所以有了事件队列，⽤来储存待执⾏的事件
那么事件队列的事件从哪⾥被 push 进来的呢。那就是另外⼀个线程叫事件触发线程做的事情了
它的作⽤主要是在定时触发器线程、异步 HTTP 请求线程满⾜特定条件下的回调函数 push 到事件队列中，等待 js 引擎空闲的时候去执⾏，当然js引擎执⾏过程中有优先级之分，⾸先js引擎在⼀次事件循环中，会先执⾏js线程的主任务，然后会去查找是否有微任务 microtask（promise），如果有那就优先执⾏微任务，如果没有，在去查找宏任务 macrotask（setTimeout、setInterval）进⾏执⾏

22. 什么是单线程，和异步的关系

单线程 - 只有⼀个线程，只能做⼀件事
原因 - 避免 DOM 渲染的冲突
- 浏览器需要渲染 DOM
- JS 可以修改 DOM 结构
- JS 执⾏的时候，浏览器 DOM 渲染会暂停
- 两段 JS 也不能同时执⾏（都修改 DOM 就冲突了）
- webworker ⽀持多线程，但是不能访问 DOM
解决⽅案 - 异步

23. 是否⽤过 jQuery 的 Deferred

使用jQuery Deferred如下：

总结如下：

无法改变 JS 异步和单线程的本质
只能从写法上杜绝 callback 这种形式
它是一种语法糖形式，但是解耦了代码
很好的体现：开放封闭原则

m0_62909632

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试基础篇，凛冬将至！道友快来一起闭关修炼！

借用神剧《权游》的名句：“凛冬将至！”，互联网寒冬已然来临，这一年以来keep/滴滴/京东/腾讯/华为等大厂裁员事件不断爆出！惊醒着头发慢慢脱落、变少的我们，是时候闭关修炼了！本文为前端面试基础篇，将以面试题 && 答案【参考 (๑¯∀¯๑)】的形式，闭关修炼，希望你查漏补缺，完善你的知识体系！面试，我们是认真的！JavaScript 篇1. JavaScript有⼏种类型的值栈：原始数据类型（ Undefined ， Null ， Boolean ， Number 、
复制链接

扫一扫