好买网 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 这种形式
- 它是一种语法糖形式,但是解耦了代码
- 很好的体现:开放封闭原则