前端面试题总结（三）JavaScript篇

时间  2019-11-11
标签 端面 试题 总结 javascript 栏目 JavaScript 繁體版
原文   原文链接

前端面试题总结（三）JavaScript篇

1、谈谈对this的理解？javascript

  1. this是一个关键字。
  2. this老是指向函数的直接调用者（而非间接调用者）。
  3. 若是有new关键字，this指向new出来的那个对象。
  4. 在计时器当中，this会指向window。
  5. 在事件中，this指向触发这个事件的对象，特殊的是，IE中的事件监听中的this指向全局对象window。

2、eval是作什么的？css

  1. eval()函数能够把一个字符串当作一个JavaScript表达式同样去执行它。
  2. 它的功能是把对应的字符串解析成js代码并运行。
  3. 应该避免使用eval。不安全且很是耗性能（2次，一次解析成js语句，一次执行）

3、null和undefined的区别？前端

  1. null是表示“无”的对象，转为数值时为0，undefined是一个表示“无”的原始值，转为数值时为NaN。
  2. undefined出如今，变量被申明但没赋值、调用函数时，应该提供的参数没有提供、对象没有赋值的属性、函数没有返回值时。
  3. null做为函数的参数时，表示该函数的参数不是对象。null也是原型链的终点。

4、call()和apply()的区别？
　　做用：动态改变某个类的某个方法的运行环境（执行上下文）。
　　区别：java

    1. apply括号里只能写两个参数，通常用于数组的操做中改变this的指向，call括号里能够写多个参数。
    2. apply()函数有两个参数：第一个是上下文，第二个是参数组成的数组。若是第一个参数是null，则使用全局对象代替。
    3. call()的第一个参数是上下文，后续是实例传入的参数序列。
    4. 均可以改变this指向。apply优于call。

5、new操做符具体干了什么？node

  1. 建立一个空对象，而且this变量引用该对象，同时还继承了该函数的原型。
  2. 属性和方法被加入到this引用的对象中。
  3. 新建立的对象由this所引用，而且最后隐式的返回this。

6、性能优化的方式？web

  1. 减小http请求次数。
  2. 用innerHTML代替dom操做，减小dom操做次数，优化JavaScript性能。
  3. 当须要设置的样式比较多时设置className而不是直接操做style。
  4. 减小全局变量、缓存dom节点查找的结构，减小IO读取操做。
  5. 避免使用css表达式。（CSS Expression又称Dynamic properties动态属性）。
  6. 图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。
  7. 前端模板 JS+数据，减小因为HTML标签致使宽带浪费。
  8. 用变量保存ajax请求结果，每次操做本地变量，不用请求减小请求次数。

7、哪些常见操做会致使内存泄漏？面试

　　内存泄漏指任何对象在您不在拥有或须要它以后仍然存在。ajax

  1. setTimeout的第一个参数使用字符串而非函数的话，会引起内存泄漏。
    • setTimeout能够有三个参数，当第一个参数的函数括号里面有形参的时候，后面的参数能够做为实参传入。
  2. 闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）。
    • 解决方法：垃圾回收器按期扫描对象，并计算引用了每一个对象的其余对象的数量。若是一个对象的引用数量为0（没有其余对象引用过该对象），或该对象的惟一引用是循环的，那么该对象的内存便可回收。

8、原型、原型链、继承？数据库

  1. 原型（prototype）：构造函数的一个专有属性。原型是一个对象，其余对象能够经过他实现属性继承。
  2. 继承：指一个对象直接使用另外一个对象的属性和方法。
  3. 原型链：由一些用来继承和共享属性的对象组成的有限性的对象链（在javaScript中，每一个对象都有一个指向它的原型（prototype）对象的内部连接。这个原型对象又有本身的原型，直到某个对象的原型为 null 为止（也就是再也不有原型指向），组成这条链的最后一环。这种一级一级的链结构就称为原型链（prototypechain））。

9、什么是闭包？为何要用它？数组

  1. 闭包就是一个能够访问其余函数内部变量的函数。
  2. 使用闭包主要是为了设计已有的方法和变量。
  3. 在js中，函数即闭包，只有函数才会产生做用域的概念。
  4. 闭包的优势是能够避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易形成内存泄漏。
  5. 闭包的的特性：函数内再嵌套函数、内部函数能够引用外层的参数和变量、参数和变量不会被垃圾回收机制回收。

10、typeof返回哪些数据类型？

　　undefined、object、number、function、Boolean。

11、split和join的区别？

　　前者是切割成数组的形式，后者是将数组转换成字符串。

12、IE和DOM事件流的区别？

　　执行顺序不一样、参数不同、事件加不加on、this指向问题。

十3、本地对象、内置对象、宿主对象？

  • 本地对象为array、obj、regexp等能够new实例化。
  • 内置对象为gload Math等不能够实例化的。
  • 宿主对象为浏览器自带的document，window等。

十4、对做用域链的理解？

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

十5、同步和异步的区别？

  • 同步是阻塞模式，异步是非阻塞模式。
  • 同步：脚本会停留并等待服务器发送回复而后再继续。
  • 异步：脚本容许页面继续其进程并处理可能的回复，能够提升执行效率。

十6、什么叫伪数组？怎么转化为标准数组？

　　伪数组：没法直接调用数组方法或指望length属性有什么特殊的行为，但仍可使用真正数组遍历的方法来遍历。
　　典型的是argument参数（实参对象），getElementsByTagName，childNodes之类的，返回nodeList对象都属于伪数组。
　　转换：使用Array.prototype.slice.call(伪数组)。

十7、js继承方式的优缺点？

  1. 原型链继承：字面量重写原型会中断关系，使用引用类型的原型，而且子类型还没法给超类型传递参数。
  2. 借用构造函数继承（类式继承）：没有原型，不能复用。可是解决了字面量重写原型会中段关系问题和子类型给超类型传参问题。
  3. 组合继承（原型链+构造函数）：使用原型链实现对原型属性和方法的继承，从而经过借用构造函数实现对实例属性的继承。既经过在原型上定义方法实现了函数复用，又保证每一个实例都有本身的属性。

十8、减小页面加载时间的方法？

  1. 优化图片。
  2. 图形格式选择。
  3. 优化css（压缩合并css）。
  4. 网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录）。
  5. 标明高度和宽度。
  6. 减小http请求。

十9、cookie的弊端？

　　cookie在持久保存客户端数据提供了方便，分担了服务器存储压力。

  1. 每一个特定域名下最多生成20个cookie（IE6<=20,IE7+<=50,火狐<=50,谷歌和Safari无限制）。
  2. IE和Opera会清理近期最少使用的cookie，火狐会随机清理。
  3. cookie最大大约为4096字节，为了兼容性，通常不能超过4095字节。
  4. 安全性问题。
  5. 有些状态不能保存在客户端（表单）。

　　优势：极高的扩展性和可用性。
　　缺点：cookie数量和长度有限制，安全性问题，有些状态不能保存在客户端。

二10、document.write和innerHTML的区别？

  • 前者只能重绘整个页面，后者能够重绘页面的一部分。
  • document.write()能够用在两个方面：页面载入过程当中实时脚本建立页面内容，以及用延时脚本建立本窗口或新窗口的内容。
  • document.write只能绘制整个页面。innerHTML能够重绘页面的一部分。

二11、js建立对象的方式？

  1. 工程模式。
  2. 构造函数模式。
  3. 原型模式。
  4. 混合构造函数和原型模式（组合模式）。
  5. 动态原型模式。
  6. 寄生构造函数模式。
  7. 稳妥构造函数模式。

二11、继承的几种方式？

  1. 原型链继承。（字面量重写原型会中断关系，使用引用类型的原型，而且子类型还没法给超类型传递参数。）
  2. 借用构造函数继承（类式继承）。（没有原型，不能复用。可是解决了字面量重写原型会中段关系问题和子类型给超类型传参问题。）
  3. 组合继承（原型+借用构造）。（使用原型链实现对原型属性和方法的继承，从而经过借用构造函数实现对实例属性的继承。既经过在原型上定义方法实现了函数复用，又保证每一个实例都 有本身的属性。）
  4. 原型式继承。
  5. 寄生式继承。
  6. 寄生组合式继承。

二12、异步加载和延迟加载？

  • 异步加载：动态建立script标签，经过ajax区获取js代码，经过eval执行，script标签上添加的defer或async属性。
  • 延迟加载：有些js代码并非页面初始化的时候就马上须要的，而是稍后的某些状况才须要的。
  • js延迟加载的方式有哪些？
  • defer和async、动态建立DOM方式（经常使用）、按需异步载入js。

二十3、get和post的区别？使用场景？

  • get：通常用于信息获取，使用url传递参数，对所发送信息的数量也有限制，通常在2000个字符。
  • post：通常用于修改服务器的资源，对所发送的信息没有限制。
  • get方式须要使用Request.QueryString来取得变量的值，而post方式经过Request.Form来获取变量的值，也就是说get是经过地址栏来传值，而post是经过提交表单来传值的。
  • 使用场景：
    1. 接口规定用哪一个就用哪一个。
    2. 接口两个都容许，首选get。
    3. 发送包含未知字符的用户输入时，post比get更稳定也更可靠。
    4. 没法使用缓存文件（更新服务器上的文件或数据库）使用post。
    5. 向服务器发送大量数据使用post。

二十4、哪些地方会出现css阻塞，哪些地方会出现js阻塞？

  • js的阻塞特性：全部浏览器在下载js的时候，会阻止一切其余活动（好比其余资源下载、内容呈现等），直到js下载、解析、执行完成后才继续并行下载其余资源并呈现内容。为了提升用户体验，新一代的浏览器都支持并行下载js，可是js下载仍然会阻塞其余资源的下载（好比图片、css文件等）。
  • 因为浏览器为了防止出现js修改dom树，须要从新构建dom树的状况，因此就会阻塞其余的下载和呈现。
  • 嵌入js会阻塞全部内容的呈现，而外部js只会阻塞其后内容的显示，2种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载，但会阻止外部脚本的执行。
  • css怎么会阻塞加载了？
    1. css原本是能够并行下载的，可是在IE6下css是会阻塞加载的。
    2. 当css后面跟着嵌入js的时间，该css就会出现阻塞后面资源下载的状况。而把嵌入js放到css前面，就不会出现阻塞状况了。
    3. 根本缘由：由于浏览器会维持HTML中css和js的顺序，样式表必须在嵌入的js执行前先加载、解析完。而嵌入的js会阻塞后面的资源加载，因此就会出现css阻塞下载的状况。
  • 嵌入js应该放在什么位置？
    1. 放在底部，虽然仍然会阻塞全部呈现，但不会阻塞资源下载。
    2. 若是放在head中，请放在css头部。
    3. 使用defer（只支持IE）。
    4. 不要在嵌入的js中运行时间较长的函数，若是必定要用，能够用setTimeout来调用。
  • js无阻塞加载具体方式？
    • 将脚本放在底部。link仍是放在head中，能够保证在js加载前，能加载出正常显示的页面。script放在body底部。
    • 成组脚本：因为每一个script标签下载时阻塞页面解析过程，因此如今页面的script总数也能够改善性能。适用于内联脚本和外部脚本。
    • 非阻塞脚本：等页面加载完成后，再加载js代码。也就是，在window.onload事件发出后开始下载代码。
      1. defer属性：支持IE4和fierfox3.5更高版本浏览器。
      2. 动态脚本元素：文档对象模型（DOM）容许你使用js动态建立HTML的几乎所有文档（不管在何处启动下载，文件额下载和运行都不会阻塞其余页面处理过程。即便在head里（除了用于下载文件的http连接）。）。

二十5、事件、IE与火狐的事件机制有什么区别？怎么阻止冒泡？

  1. 咱们在网页中的某个操做（有的操做对应多个事件），也就是能够被JavaScript侦测到的行为。
  2. 事件处理机制：IE是事件冒泡、Firefox同时指出两种事件模型（捕获与冒泡）。
  3. ev.stopPropagation();旧IE为：ev.cancelBubble=true;

JavaScript垃圾回收的方法？

 

  1. 标记清除：（常见）
    • 原理:当变量进入执行环境的时候，好比函数中申明一个变量，垃圾回收期将其标记为“进入环境”，当变量离开执行环境的时候（函数执行结束），将其标记为“离开环境”。
    • 垃圾回收器会在运行的时候给存储在内存中的全部变量加一个标记，而后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成以后仍存在标记的就是要删除的变量。
  2. 引用计数：
    • 原理：跟踪记录每一个值被使用的次数，当申明了一个变量并将一个引用类型的值赋值给该变量时，这个值的引用次数+1，若是该变量的值变成另外一个，则其引用次数-1，当这个值的引用次数为0时，说明没有变量在使用，这个值无法被访问了，所以能够将其占用空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。

 

　　在IE中虽然JavaScript对象经过标记清除的方式进行垃圾回收，但BOM与DOM对象倒是经过引用计数回收垃圾的， 也就是说只要涉及BOM及DOM就会出现循环引用问题。

 

attribute和property的区别？

  • attribute是dom元素在文档中做为HTML标签拥有的属性；
  • property就是dom元素在js中做为对象拥有的属性；
  • 对于HTML的标准属性来讲，二者是同步的，会自动更新，可是对于自定义的属性来讲，他们是不一样步的。

 

 

二十8、什么是事件代理？

  • 事件代理又称为事件委托。是JavaScript中绑定事件的经常使用技巧。“事件委托”就是把本来须要绑定的事件委托给父元素，让父元素担当事件监听的职务。
  • 事件代理的原理就是DOM元素的事件冒泡。使用事件代理的好处是能够提升性能。
  • 优势：
    1. 能够大量节省内存占用，减小事件注册。
    2. 能够实现党新增子对象时无需再次对其绑定事件，对于动态内容部分尤其合适。

 

 

 

二十9、Web Worker和webSocket？

  • Web worker主线程：
    • 咱们整个程序在建立一个新程序的时候，是存在着一个线程的，咱们称做主线程。而后再支持咱们程序的运行。它的任务是响应用户操做的。
    • 做用：若是让主线程执行一个复杂的操做会很卡，咱们能够吧复杂的任务经过webworkers来处理，而后把处理的结果返回给主UI，处理主UI，这样就不会影响主UI了。
    1. 经过worker = new Worker(url)加载一个js文件来建立一个worker，同时返回一个worker实例。
    2. 经过worker.postMessage(data)方法向我worker发送数据。
    3. 绑定worker.onmessage方法来接收worker发送过来的数据。
    4. 可使用worker.terminate()来终止一个worker的执行。
  • webSocket是web应用程序的传输协议，它提供了双向的，按需到达的数据流。他是一个HTML5协议，websocket的连接是持久的，它经过在客户端和服务器之间保持双工连接，服务器的更新能够被计时推送给客户端，二不须要客户端以必定时间间隔区轮询。

 

如何删除一个cookie？

  1. 将时间设为当前时间往前一点。
  2. expires设置为new Date(0);

 

 

三11、求一个字符串的字节长度？
　　假设一个英文字符占一个字节，一个汉字占两个字节。

1
2
3
4
5
6
7
8
9
function  GetBytes(str){
     var  len = str.length;
     var  bytes = len;
     for ( var  i=0; i<len; i++){
         if  (str.charCodeAt(i) > 255) bytes++;
     }
     return  bytes;
}
alert(GetBytes( "你好,as" ));

三12、js对象、浏览器对象？

  • js内置对象 ——Array、Boolean、Date、Math、Number、String、ReqExp、Global
  • 浏览器内置对象 ——Window、Nacigator、Screen、History、Location

三十3、事件绑定和普通事件有什么区别？（传统事件绑定和符合W3C标准的事件绑定有什么区别？）

 

1
2
div1.onclick= function (){};
<button onmouseover=””></button>

 

  1. 若是说给同一个元素绑定了两次或者屡次相同类型的事件，那么后面的绑定会覆盖前面的绑定
  2. 不支持DOM事件流 事件捕获阶段è目标元素阶段=>事件冒泡阶段
  3. addEventListener
    • 若是说给同一个元素绑定了两次或者屡次相同类型的事件，因此的绑定将会依次触发
    • 支持DOM事件流的
    • 进行事件绑定传参不须要on前端
  4. addEventListener(“click”,function(){},true);//此时的事件就是在事件冒泡阶段执行
  5. ie9开始，ie11 edge：addEventListener
  6. ie9之前：attachEvent/detachEvent
    1. 进行事件类型传参须要带上on前缀
    2. 这种方式只支持事件冒泡，不支持事件捕获
  7. 事件绑定是指把事件注册到具体的元素之上，普通事件指的是能够用来注册的事件

三十3、当一个DOM节点被点击时候，咱们但愿可以执行一个函数，应该怎么作？

  1. 直接在DOM里绑定事件：<div onclick=”test()”></div>
  2. 在JS里经过onclick绑定：xxx.onclick = test
  3. 经过事件添加进行绑定：addEventListener(xxx, ‘click’, test)
  4. 那么问题来了，Javascript的事件流模型都有什么？
    1. “事件冒泡”：事件开始由最具体的元素接受，而后逐级向上传播
    2. “事件捕捉”：事件由最不具体的节点先接收，而后逐级向下，一直到最具体的
    3. “DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

三十4、列举浏览器对象模型BOM里经常使用的至少4个对象，并列举window对象的经常使用方法至少5个

  • 对象：Window document location screen history navigator
  • 方法：Alert() confirm() prompt() open() close()

三十5、把 Script 标签 放在页面的最底部的body封闭以前 和封闭以后有什么区别？浏览器会如何解析它们？

  • 若是说放在body的封闭以前，将会阻塞其余资源的加载
  • 若是放在body封闭以后，不会影响body内元素的加载

三十6、BOM对象有哪些，列举window对象？

  1. window对象 ，是JS的最顶层对象，其余的BOM对象都是window对象的属性；
  2. document对象，文档对象；
  3. location对象，浏览器当前URL信息；
  4. navigator对象，浏览器自己信息；
  5. screen对象，客户端屏幕信息；
  6. history对象，浏览器访问历史信息；

三十7、window.onload 和 document.ready的区别？

  • load要等到图片和包含的文件都加在进来以后执行；
  • ready是不包含图片和非文字文件的文档结构准备好就执行；

三十8、为何扩展javascript内置对象不是好的作法？
　　由于扩展内置对象会影响整个程序中所使用到的该内置对象的原型属性

三十9、JavaScript原型，原型链 ? 有什么特色？

    • 原型对象也是普通的对象，是对象一个自带隐式的__proto__属性，原型也有可能有本身的原型，若是一个原型对象的原型不为null的话，咱们就称之为原型链。
    • 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程