超级实用的Web前端面试JavaScript相关总结

Web前端面试题大全（补充） JavaScript篇

1、介绍js的基本数据类型。

Undefined、Null、Boolean、Number、String、symbol

2，介绍js有哪些内置对象？

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

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

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

4，JavaScript有几种类型的值？，你能画一下他们的内存图吗？

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

5，JavaScript继承的几种实现方式？

1，构造函数继承，使用call和apply两个方法的特性可以实现，改变方法中的this
2，原型链继承
3，组合式继承

6，javascript创建对象的几种方式？

javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用JSON；但写法有很多种，也能混合使用。
1、对象字面量的方式 person={firstname:“Mark”,lastname:“Yun”,age:25,eyecolor:“black”};
2、用function来模拟无参的构造函数
function Person(){
var person=new Person();//定义一个function，如果使用new"实例化",该function可以看作是一个Class
person.name=“Mark";
person.age=“25”;
person.work=function(){
alert(person.name+" hello…“);
}
person.work();
3、用function来模拟参构造函数来实现（用this关键字定义构造的上下文属性）
function Pet(name,age,hobby){
this.name=name;//this作用域：当前对象
this.age=age;
this.hobby=hobby;
this.eat=function(){
alert(“我叫”+this.name+”,我喜欢"+this.hobby+“,是个程序员”);
}
}
var maidou =new Pet(“麦兜”,25,“coding”);//实例化、创建对象
maidou.eat();//调用eat方法
4、用工厂方式来创建（内置对象）
var wcDog =new Object();
wcDog.name=“财”;
wcDog.age=3;
wcDog.work=function(){
alert(“我是”+wcDog.name+“,汪汪汪…”);
}
wcDog.work();
5、用原型方式来创建
function Dog(){ }
Dog.prototype.name=“旺财”;
Dog.prototype.eat=function(){alert(this.name+“是个吃货”);}
var wangcai =new Dog();
wangcai.eat();

5、用混合方式来创建
function Car(name,price){
this.name=name;
this.price=price;
}
Car.prototype.sell=function(){
alert(“我是”+this.name+“，我现在卖”+this.price+“万元”);
}
var camry =new Car(“凯美瑞”,27);
camry.sell();

7，Javascript作用域链?

首先在js中有作用域的概念，值得就是一个变量的活动范围，分为全局作用域和局部作用域，全局作用域指的是window，局部作用域指的是每一个函数内部，在作用域中查找一个变量首先在自己当前作用域查找找不到向上级查找，逐层向上找到window为止，找不到就会抛出一个错误，这个查找的过程就叫作用域链，作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。作用域链有一个需要要注意的问题就是变量提升，当一个变量的使用在定义之前的时候就会得到一个undefined值，在es6中则不会出现这个问题，es6不允许在定义之前使用

8，谈谈This对象的理解。

this分为几个不同的使用场景，在function中this指的的是window，如果是实用new 调用的话this指的是当前的实例化对象，在事件调用函数中this指的调用事件的window特殊的是在IE中的attachEvent中的this总是指向全局对象Window；，在定时器中this指的是window，在es6中有一个箭头函数，在箭头函数中this永远指向的是父级对象

9，什么是window对象? 什么是document对象?

window:它是一个顶层对象,而不是另一个对象的属性，即浏览器的窗口。
document:代表整个HTML 文档,可用来访问页面中的所有元素
Window 对象表示当前浏览器的窗口，是JavaScript的顶级对象。我们创建的所有对象、函数、变量都是 Window 对象的成员。
Window 对象的方法和属性是在全局范围内有效的。
Document 对象是 HTML 文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）
Document 对象使我们可以通过脚本对 HTML 页面中的所有元素进行访问
Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问

10，null，undefined 的区别？

null 表示一个对象被定义了，值为“空值”；
undefined 表示不存在这个值。

typeof undefined //“undefined”
undefined :是一个表示"无"的原始值或者说表示"缺少值"，就是此处应该有一个值，但是还没有定义。当尝试读取时会返回 undefined；
例如变量被声明了，但没有赋值时，就等于undefined

typeof null //“object”
null : 是一个对象(空对象, 没有任何属性和方法)；
例如作为函数的参数，表示该函数的参数不是对象；

注意：
在验证null时，一定要使用　=== ，因为 == 无法分别 null 和　undefined
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
1）变量被声明了，但没有赋值时，就等于undefined。
2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
3）对象没有赋值的属性，该属性的值为undefined。
4）函数没有返回值时，默认返回undefined。

null表示"没有对象"，即该处不应该有值。典型用法是：
1） 作为函数的参数，表示该函数的参数不是对象。
2） 作为对象原型链的终点。

11，事件是？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

1. 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。
2. 事件处理机制：IE是事件冒泡、Firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件；
3. ev.stopPropagation();（旧ie的方法 ev.cancelBubble = true;）

12，什么是闭包（closure），为什么要用它？

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。
闭包的特性：
1，函数内再嵌套函数
2，内部函数可以引用外层的参数和变量
3，参数和变量不会被垃圾回收机制回收
闭包的使用场景
常见的闭包的使用场景就是模块化，用来做模块内部的实现通过接口的扩展贡其他模块使用
在就是闭包可以用来缓存值，减少不必要的技术，例如vue里面的计算属性

13，javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？

use strict是一种ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行,

使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。
默认支持的糟糕特性都会被禁用，比如不能用with，也不能在意外的情况下给全局变量赋值;
全局变量的显示声明,函数必须声明在顶层，不允许在非函数代码块内声明函数,arguments.callee也不允许使用；
消除代码运行的一些不安全之处，保证代码运行的安全,限制函数中的arguments修改，严格模式下的eval函数的行为和非严格模式的也不相同;

提高编译器效率，增加运行速度；
为未来新版本的Javascript标准化做铺垫。

14，如何判断一个对象是否属于某个类？

1，使用instanceof
if(a instanceof Person){ alert('yes’); }

15，Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

hasOwnProperty
javaScript中hasOwnProperty函数方法是返回一个布尔值，指出一个对象是否具有指定名称的属性。此方法无法检查该对象的原型链中是否具有该属性；该属性必须是对象本身的一个成员。

使用方法：
object.hasOwnProperty(proName)
其中参数object是必选项。一个对象的实例。
proName是必选项。一个属性名称的字符串值。

如果 object 具有指定名称的属性，那么JavaScript中hasOwnProperty函数方法返回 true，反之则返回 false。

16，JSON 的了解？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小
如：{“age”:“12”, “name”:“back”}
JSON字符串转换为JSON对象:
var objtyyy =eval(‘(’+ str +‘)’);
var obj = str.parseJSON();
var obj = JSON.parse(str);

JSON对象转换为JSON字符串：
var last=obj.toJSONString();
var last=JSON.stringify(obj);

17，documen.write和 innerHTML的区别

document.write只能重绘整个页面
innerHTML可以重绘页面的一部分

18，DOM操作——怎样添加、移除、移动、复制、创建和查找节点?

1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性

19，.call() 和 .apply() 的区别？

20，数组和对象有哪些原生方法，列举一下？

21，字符串有哪些原生方法，列举一下？

22，那些操作会造成内存泄漏？

1，使用闭包的时候如果在闭包变量中保存了大量的dom结构而且不去使用长期存在的时候
2，内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
3，垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
4，setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
5，闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

23，页面重构怎么操作？

网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。
也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。
对于传统的网站来说重构通常是：
表格(table)布局改为DIV+CSS
使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
对于移动平台的优化
针对于SEO进行优化
深层次的网站重构应该考虑的方面
减少代码间的耦合
让代码保持弹性
严格按规范编写代码
设计可扩展的API
代替旧有的框架、语言(如VB)
增强用户体验

通常来说对于速度的优化也包含在重构中
压缩JS、CSS、image等前端资源(通常是由服务器来解决)
程序的性能优化(如数据读写)
采用CDN来加速资源加载
对于JS DOM的优化
HTTP服务器的文件缓存

24，列举IE与其他浏览器不一样的特性？

1、事件不同之处：
1-1，触发事件的元素被认为是目标（target）。而在 IE 中，目标包含在 event 对象的 srcElement 属性；
1-2，获取字符代码、如果按键代表一个字符（shift、ctrl、alt除外），IE 的 keyCode 会返回字符代码（Unicode），DOM 中按键的代码和字符是分离的，要获取字符代码，需要使用 charCode 属性；
1-3，阻止某个事件的默认行为，IE 中阻止某个事件的默认行为，必须将 returnValue 属性设置为 false，Mozilla(火狐) 中，需要调用 preventDefault() 方法；
1-4，停止事件冒泡，IE 中阻止事件进一步冒泡，需要设置 cancelBubble 为 true，Mozzilla 中，需要调用 stopPropagation()；

25，什么叫优雅降级和渐进增强？

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会针对旧版本的IE进行降级处理了,使之在旧式浏览器上以某种形式降级体验却不至于完全不能用。
如：border-shadow

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新版本浏览器才支持的功能,向页面增加不影响基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
如：默认使用flash上传，但如果浏览器支持 HTML5 的文件上传功能，则使用HTML5实现更好的体验；

26，是否了解公钥加密和私钥加密。

一般情况下是指私钥用于对数据进行签名，公钥用于对签名进行验证;
HTTP网站在浏览器端用公钥加密敏感数据，然后在服务器端再用私钥解密。

27，对Node的优点和缺点提出了自己的看法？

*（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。

*（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

28，解释一下事件代理

事件代理的原理其实就和作用域链的原理差不多，但是事件代理是利用事件的冒泡原理来实现的，事件代理就是通过给祖先元素添加事件，通过事件目标对象开始向上查找找到匹配的子节点为止，如果找不到则到绑定事件的那个祖先元素为止，找到了就触发事件，并且可以通过js中call和apply来改变触发事件函数中的this为当前绑定节点，也是通过一层一层逐层向上的方式进行匹配查找而触发对应事件，好处就是可以使后添加的dom元素也同样有之前存在元素的事件，jquery中可以使用on，delegate，live实现的，不过在jquery1.7版本以后吧live给废除了，原因就是live绑定事件的祖先元素是整个html页面的根节点，所以性能消耗比较大，在后边的版本中给删除了，使用on，delegate代替
优点：
可以减少事件注册，节省大量内存占用
可以将事件应用于动态添加的子元素上
缺点： 使用不当会造成事件在不应该触发时触发

29，Javascript垃圾回收方法

标记清除（mark and sweep）
这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。
垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了

引用计数(reference counting)
在低版本IE中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时 候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。
在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收，但BOM与DOM对象却是通过引用计数回收垃圾的， 也就是说只要涉及BOM及DOM就会出现循环引用问题。

30，说说严格模式的限制

严格模式主要有以下限制：
变量必须声明后再使用
函数的参数不能有同名属性，否则报错
不能使用with语句
不能对只读属性赋值，否则报错
不能使用前缀0表示八进制数，否则报错
不能删除不可删除的属性，否则报错
不能删除变量delete prop，会报错，只能删除属性delete global[prop]
eval不会在它的外层作用域引入变量
eval和arguments不能被重新赋值
arguments不会自动反映函数参数的变化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
增加了保留字（比如protected、static和interface）
设立"严格模式"的目的，主要有以下几个：
消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。
注：经过测试IE6,7,8,9均不支持严格模式。

31，attribute和property的区别是什么？

attribute是dom元素在文档中作为html标签拥有的属性；
property就是dom元素在js中作为对象拥有的属性。
所以：
对于html的标准属性来说，attribute和property是同步的，是会自动更新的，
但是对于自定义的属性来说，他们是不同步的，

32，offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别，

offsetWidth/offsetHeight返回值包含content + padding + border，效果与e.getBoundingClientRect()相同
clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条
scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸

33，focus/blur与focusin/focusout的区别与联系

focus/blur不冒泡，focusin/focusout冒泡
focus/blur兼容性好，focusin/focusout在除FireFox外的浏览器下都保持良好兼容性，如需使用事件托管，可考虑在FireFox下使用事件捕获elem.addEventListener(‘focus’, handler, true)
可获得焦点的元素：
window
链接被点击或键盘操作
表单空间被点击或键盘操作
设置tabindex属性的元素被点击或键盘操作

34，mouseover/mouseout与mouseenter/mouseleave的区别与联系

mouseover/mouseout是标准事件，所有浏览器都支持；mouseenter/mouseleave是IE5.5引入的特有事件后来被DOM3标准采纳，现代标准浏览器也支持
mouseover/mouseout是冒泡事件；mouseenter/mouseleave不冒泡。需要为多个元素监听鼠标移入/出事件时，推荐mouseover/mouseout托管，提高性能
标准事件模型中event.target表示发生移入/出的元素,vent.relatedTarget对应移出/如元素；在老IE中event.srcElement表示发生移入/出的元素，event.toElement表示移出的目标元素，event.fromElement表示移入时的来源元素

35，检测浏览器版本版本有哪些方式？

根据 navigator.userAgent // UA.toLowerCase().indexOf(‘chrome’)
根据 window 对象的成员 // ‘ActiveXObject’ in window

36，描述浏览器的渲染过程，DOM树和渲染树的区别？

浏览器的渲染过程：
解析HTML构建 DOM(DOM树)，并行请求 css/image/js
CSS 文件下载完成，开始构建 CSSOM(CSS树)
CSSOM 构建结束后，和 DOM 一起生成 Render Tree(渲染树)
布局(Layout)：计算出每个节点在屏幕中的位置
显示(Painting)：通过显卡把页面画到屏幕上
DOM树 和 渲染树 的区别：
DOM树与HTML标签一一对应，包括head和隐藏元素
渲染树不包括head和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的css属性

37，重绘和回流（重排）的区别和关系？

1. 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。
2. 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
   注：回流必将引起重绘，而重绘不一定会引起回流。
   注意：JS获取Layout(布局)属性值（如：offsetLeft、scrollTop、getComputedStyle等）也会引起回流。因为浏览器需要通过回流计算最新值

38，如何最小化重绘(repaint)和回流(reflow)？

需要要对元素进行复杂的操作时，可以先隐藏(display:“none”)，操作完成后再显示
需要创建多个DOM节点时，使用DocumentFragment创建完后一次性的加入document
缓存Layout属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流
尽量避免用table布局（table元素一旦触发回流就会导致table里所有的其它元素回流）
避免使用css表达式(expression)，因为每次调用都会重新计算值（包括加载页面）
尽量使用 css 属性简写，如：用 border 代替 border-width, border-style, border-color
批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx

39，script 的位置是否会影响首屏显示时间？

在解析 HTML 生成 DOM 过程中，js 文件的下载是并行的，不需要 DOM 处理到 script 节点。因此，script的位置不影响首屏显示的开始时间。
浏览器解析 HTML 是自上而下的线性过程，script作为 HTML 的一部分同样遵循这个原则
因此，script 会延迟 DomContentLoad，只显示其上部分首屏内容，从而影响首屏显示的完成时间

40，介绍DOM0，DOM2，DOM3事件处理方式区别

DOM0级事件处理方式：
btn.onclick = func;
btn.onclick = null;
DOM2级事件处理方式：
btn.addEventListener(‘click’, func, false);
btn.removeEventListener(‘click’, func, false);
btn.attachEvent(“onclick”, func);
btn.detachEvent(“onclick”, func);
DOM3级事件处理方式：
eventUtil.addListener(input, “textInput”, func);
eventUtil 是自定义对象，textInput 是DOM3级事件

41，事件的三个阶段

捕获、目标、冒泡

js的冒泡(Bubbling Event)和捕获(Capture Event)的区别
冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。
事件捕获
当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。
事件冒泡
当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。

阻止冒泡
• 在W3c中，使用stopPropagation（）方法
• 在IE下设置cancelBubble = true；
在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了。
阻止捕获

阻止事件的默认行为，例如click 后的跳转
• 在W3c中，使用preventDefault（）方法；
• 在IE下设置window.event.returnValue = false;

42，介绍事件“捕获”和“冒泡”执行顺序和事件的执行次数？

按照W3C标准的事件：首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段
事件执行次数（DOM2-addEventListener）：元素上绑定事件的个数
注意1：前提是事件被确实触发
注意2：事件绑定几次就算几个事件，即使类型和功能完全一样也不会“覆盖”
事件执行顺序：判断的关键是否目标元素
非目标元素：根据W3C的标准执行：捕获->目标元素->冒泡（不依据事件绑定顺序）
目标元素：依据事件绑定顺序：先绑定的事件先执行（不依据捕获冒泡标准）
最终顺序：父元素捕获->目标元素事件1->目标元素事件2->子元素捕获->子元素冒泡->父元素冒泡
注意：子元素事件执行前提 事件确实“落”到子元素布局区域上，而不是简单的具有嵌套关系
在一个DOM上同时绑定两个点击事件：一个用捕获，一个用冒泡。事件会执行几次，先执行冒泡还是捕获？

该DOM上的事件如果被触发，会执行两次（执行次数等于绑定次数）
如果该DOM是目标元素，则按事件绑定顺序执行，不区分冒泡/捕获
如果该DOM是处于事件流中的非目标元素，则先执行捕获，后执行冒泡

43，什么是函数节流？介绍一下应用场景和原理？

函数节流(throttle)是指阻止一个函数在很短时间间隔内连续调用。 只有当上一次函数执行后达到规定的时间间隔，才能进行下一次调用。 但要保证一个累计最小调用间隔（否则拖拽类的节流都将无连续效果）

函数节流用于 onresize, onscroll 等短时间内会多次触发的事件

函数节流的原理：使用定时器做时间节流。 当触发一个事件时，先用 setTimout 让这个事件延迟一小段时间再执行。 如果在这个时间间隔内又触发了事件，就 clearTimeout 原来的定时器， 再 setTimeout 一个新的定时器重复以上流程。

函数节流简单实现：

function throttle(method, context) {
clearTimeout(methor.tId);
method.tId = setTimeout(function(){
method.call(context);
}， 100); // 两次调用至少间隔 100ms
}
// 调用
window.onresize = function(){
throttle(myFunc, window);
}

44，new 操作符具体干了什么？

1、创建实例对象，this 变量引用该对象，同时还继承了构造函数的原型
2、属性和方法被加入到 this 引用的对象中
3、新创建的对象由 this 所引用，并且最后隐式的返回 this

45，JavaScript实现异步编程的方法？

回调函数
事件监听
发布/订阅
Promises对象
Async函数[ES7]

46，web开发中会话跟踪的方法有哪些

cookie
session
url参数传递
隐藏input
ip地址

47，常见的几种数组排序算法JS实现

1，快速排序
从给定的数据中，随机抽出一项，这项的左边放所有比它小的，右边放比它大的，然后再分别这两边执行上述操作，采用的是递归的思想，总结出来就是　实现一层，分别给两边递归，设置好出口
function fastSort(array,head,tail){
//考虑到给每个分区操作的时候都是在原有的数组中进行操作的，所以这里head,tail来确定分片的位置
/生成随机项/
var randomnum = Math.floor(ranDom(head,tail));
var random = array[randomnum];
/将小于random的项放置在其左边 策略就是通过一个临时的数组来储存分好区的结果，再到原数组中替换/
var arrayTemp = [];
var unshiftHead = 0;
for(var i = head;i <= tail;i++){
if(array[i]<random){
arrayTemp.unshift(array[i]);
unshiftHead++;
}else if(array[i]>random){
arrayTemp.push(array[i]);
}
/当它等于的时候放哪，这里我想选择放到队列的前面，也就是从unshift后的第一个位置放置/
if(array[i]===random){
arrayTemp.splice(unshiftHead,0,array[i]);
}
}
/将对应项覆盖原来的记录/
for(var j = head , u=0;j <= tail;j++,u++){
array.splice(j,1,arrayTemp[u]);
}
/寻找中间项所在的index/
var nowIndex = array.indexOf(random);

/*设置出口，当要放进去的片段只有2项的时候就可以收工了*/
if(arrayTemp.length <= 2){
  return;
}
/*递归，同时应用其左右两个区域*/
fastSort(array,head,nowIndex);
fastSort(array,nowIndex+1,tail);

}

2，插入排序
思想就是在已经排好序的数组中插入到相应的位置，以从小到大排序为例，扫描已经排好序的片段的每一项，如大于，则继续往后，直到他小于一项时，将其插入到这项的前面
function insertSort(array){
/start根据已排列好的项数决定/
var start=1;
/按顺序，每一项检查已排列好的序列/
for(var i=start; i<array.length; start++,i++){
/跟已排好序的序列做对比，并插入到合适的位置/
for(var j=0; j<start; j++){
/小于或者等于时（我们是升序）插入到该项前面/
if(array[i]<=array[j]){
console.log(array[i]+’ '+array[j]);
array.splice(j,0,array[i]);
/删除原有项/
array.splice(i+1,1);
break;
}
}

}

}

3，冒泡排序
故名思意 ，就是一个个冒泡到最前端或者最后端，主要是通过两两依次比较，以升序为例，如果前一项比后一项大则交换顺序，一直比到最后一对
function bubbleSort(array){
/给每个未确定的位置做循环/
for(var unfix=array.length-1; unfix>0; unfix–){
/给进度做个记录，比到未确定位置/
for(var i=0; i<unfix;i++){
if(array[i]>array[i+1]){
var temp = array[i];
array.splice(i,1,array[i+1]);
array.splice(i+1,1,temp);
}
}
}
}

4，选择排序
将当前未确定块的min或者max取出来插到最前面或者后面
function selectSort(array){
/给每个插入后的未确定的范围循环，初始是从0开始/
for(var unfixed=0; unfixed<array.length; unfixed++){
/设置当前范围的最小值和其索引/
var min = array[unfixed];
var minIndex = unfixed;
/在该范围内选出最小值/
for(var j=unfixed+1; j<array.length; j++){
if(min>array[j]){
min = array[j];
minIndex = j;
}
}
/将最小值插入到unfixed，并且把它所在的原有项替换成/
array.splice(unfixed,0,min);
array.splice(minIndex+1,1);
}
}

48，ES6常用特性

变量定义(let和const,可变与不可变，const定义对象的特殊情况)
解构赋值
模板字符串
数组新方法(例：Array.from(),entries(),values(),keys())
箭头函数(rest参数，扩展运算符，::绑定this)
Set和Map数据结构(set实例成员值唯一存储key值，map实例存储键值对(key-value))
Promise对象(前端异步解决方案进化史，generator函数，async函数)
Class语法糖(super关键字)

49，src和href的区别

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
Src source,指向外部资源的位置,如果我们添加浏览器会暂停其他资源的下载和处理,直到该资源加载,编译,执行完毕(图片和框架也是如此),这也就是为什么js脚本要放在底部。
src用于替换当前元素,href用于在当前文档和引入资源之间建立联系。

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。
Href 超文本链接,指向网络资源所在位置,如果我们在文档添加浏览器会下载资源并且不会停止对当前文档的处理。

50，线程与进程的区别?

一个程序至少有一个进程,一个进程至少有一个线程;
多进程拥有独立的内存,多线程共享内存,所以多线程提高了运行效率;
多线程的重要意义在于一个应用程序中,有多个执行程序能够同时执行,但是系统并没有将多线程看成多个独立的应用

51，对前端工程师这个职位你是怎么样理解的？

与用户打交道最近的地方,负责用户所能看到的一切的构建,在满足基本功能的同时,添加炫酷的特效,排版等,提升用户体验感,加强产品粘性。

前端是最贴近用户的程序员，前端的能力就是能让产品从 90 分进化到 100 分，甚至更好
参与项目，快速高质量完成实现效果图，精确到 1px；
与团队成员，UI 设计，产品经理的沟通；
做好的页面结构，页面重构和用户体验；
处理 hack，兼容、写出优美的代码格式；
针对服务器的优化、拥抱最新前端技术。

52，说说你对 SVG 理解?

SVG可缩放矢量图形是基于可扩展标记语言 XML，用于描述二维矢量图形的一种图形格式。
SVG 是一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。
SVG 严格遵从 XML 语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。
特点：
(1)任意放缩   用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。
(2)文本独立   SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。
(3)较小文件   总体来讲，SVG文件比那些 GIF 和 JPEG 格式的文件要小很多，因而下载也很快。
(4)超强显示效果   SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。
(5)超级颜色控制   SVG图像提供一个 1600 万种颜色的调色板，支持 ICC 颜色描述文件标准、 RGB 、线 X 填充、渐变和蒙版。

53，浅拷贝vs深拷贝

拷贝其实就是对象复制，为了解决对象复制是产生的引用类型问题，
浅拷贝：只是拷贝了栈空间的地址 不会拷贝堆空间的内存，利用迭代器，循环对象将对象中的所有可枚举属性复制到另一个对象上，但是浅拷贝的有一个问题就是只是拷贝了对象的一级，其他级还如果是引用类型的值的话依旧解决不了，
深拷贝：深拷贝 不仅仅拷贝栈空间的地址 也会拷贝堆空间的内存，
深拷贝过渡程：使用json实现深拷贝：// 先将对象转化为JSON 然后再将JSON转换会对象 实现深拷贝 // 因为字符串是标量类型 所以说值存储在栈空间 和堆空间的对象没有任何关系// 所以说 我们可以实现深拷贝
深拷贝原理：深拷贝：我们可以把数组（对象）中的下标（键）取出来 作为一个新的数组（对象）的下标 （键） 然后把对应的值取出来 放在新的数组中下标（键）所在的位置，
总结 ： 浅拷贝 当一个对象发生改变的时候 另一个对象也会收到影响
总结 ： 浅拷贝 当一个数组发生改变的时候 另一个数组也会收到影响

54，区分数组和对象的方法？

1、从原型入手，Array.prototype.isPrototypeOf(obj);
利用isPrototypeOf()方法，判定Array是不是在obj的原型链中，如果是，则返回true,否则false。
Array.prototype.isPrototype([]) //true
2、也可以从构造函数入手，利用对向的constructor属性
3、根据对象的class属性(类属性)，跨原型链调用toString()方法。
Object.prototype.toString.call(Window);
4、Array.isArray()方法。

55，说说你对Promise的理解

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件监听——更合理和更强大。Promise 有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。但是无法获取到pending状态，在promise中接受两个内置参数分别是resolve（成功）和reject（失败），Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。then方法可以传递两个回调函数第一个是成功，第二个是失败，失败回调也可以使用promise的catch方法回调，promise还有一个强大的功能那就是all方法可以组合多个promise实例，包装成一个新的 Promise 实例。

56，介绍一下async和await；

async 会将其后的函数（函数表达式或 Lambda）的返回值封装成一个 Promise 对象，而 await 会等待这个 Promise 完成，并将其 resolve 的结果返回出来。

async / await是ES7的重要特之一，也是目前社区里公认的优秀异步解决方案。目前async / await 在 IE edge中已经可以直接使用了，但是chrome和Node.js还没有支持。幸运的是，babel已经支持async的transform了，所以我们使用的时候引入babel就行。在开始之前我们需要引入以下的package，preset-stage-3里就有我们需要的async/await的编译文件。

57，说说对es6的理解（说一下es6，知道es6吗）

语法糖(箭头函数，类的定义，继承)，以及一些新的扩展（数组，字符串，对象，方法等），对作用域的重新定义，以及异步编程的解决方案（promise，async，await）、解构赋值的出现。

58，箭头函数的作用域上下文和 普通函数作用域上下文 的区别

箭头函数其实只是一个密名函数的语法糖，区别在于普通函数作用域中的this有特定的指向，一般指向window，而箭头函数中的this只有一个指向那就是指当前函数所在的对象，其实现原理其实就是类似于之前编程的时候在函数外围定义that一样，用了箭头函数就不用定义that了直接使用this。