前端面试题

1、this指向

• 在全局中this指向window
• 在函数中this谁调用指向谁
• 构造函数中this指向new出来的实例本身
  我们可以通过 call、apply、bind来修改this的指向，但是在箭头函数中this永远指向父级的上下文，无法通过call、apply、bind来修改它的this指向

2、事件模型：事件委托、代理、如何让事件先冒泡后捕获

事件委托： 事件委托，又名事件代理。事件委托就是利用事件冒泡，就是把子元素的事件都绑定到父元素上。

好处: 提高性能，减少了事件绑定，从而减少内存占用

如何让事件先冒泡后捕获
根据w3c标准，应先捕获再冒泡。若要实现先冒泡后捕获，给一个元素绑定两个addEventListener，其中一个第三个参数设置为false（即冒泡），另一个第三个参数设置为true（即捕获），调整它们的代码顺序，将设置为false的监听事件放在设置为true的监听事件前面即可。

3、对象和面向对象

js本身是一门面向对象的语言，面向对象就是一种编程思想，所谓的万物皆对象 与之对象的是面向过程
面向对象是模型化的,其中包括三大特性：封装、继承、多态

多态性
是指 不同事物具有表现形式的能力.多条机制是具有不同内部结构的对象能够共享接口,减少代码复杂度,一个接口,他是多态实现的具体形式，提高了程序的拓展性!

封装
数据封装的实体就是对象,对象就是类的实例化

特点:属性、方法、集合

继承性
继承是面向对象的重要特点,是其他语言所没有

4、for…in和for…of的区别

1. 从遍历数组角度来说，for···in遍历出来的是key(即下标)，for···of遍历出来的是value(即数组的值)

2. 从遍历对象的角度来说，for···in会遍历出来的为对象的key，但for···of会直接报错。

3. 如果要使用for…of遍历普通对象，需要配合Object.keys()一起使用。

5、查找数组重复项

查找该元素首次出现的位置和最后出现的位置下标是否相同，同时判断新数组中是否不存在该元素，如果都满足则添加进新数组中去。

Es6新增方法set去重、利用数组方法Map去重、利用递归去重、forEach+findIndex实现去重、filter+indexOf去重、 reduce + includes去重

6、数组扁平化

数组扁平化就是将一个多维数组转换为一个一维数组

var arr = [1,2,[3,4,[5,6,[7,8,[9,10]]]]]; 
function flatten(arr){
	var box = [];
	arr.map(v => {
		if(Array.isArray(v)){
			box = box.concat(flatten(v))
		}else{
			box.push(v);
		}
	})
	return box;
}
console.log(flatten(arr));

7、垃圾回收机制

JavaScript 中的内存管理是自动执行的，而且是不可见的。我们创建基本类型、对象、函数……所有这些都需要内存，浏览器会定期清理不在使用的变量，以达到释放内存的操作

为了避免被浏览器清理可以使用闭包

变量长期驻扎在内存中，变量或参数不会被垃圾回收机制回收 GC

8、iframe的优缺点

优点
iframe能够在网页之上在次嵌入网页

如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决；

技术易于掌握，使用方便，使用者众多，可主要应用于不需搜索引擎来搜索的页面；

方便制作导航

缺点
搜索引擎程序不能解读这种页面

浏览器的后退按钮无效

手机等终端设备无法显示全部框架内容

9、函数柯里化

简单理解：一个大型的功能，需要许多小的功能实现，就需要用到柯里化差分成一个个小功能（复杂的结构查分简单的多个结构）
应用场景：在大型功能的数据类型判断、数据循环遍历可以单独拆分成小的模块

好处： 任何功能的改变只需要改变相应的方法，不需要对整个流程进行改变

10、window的onload事件和domcontentloaded

当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。

当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。

区别：
①onload事件是DOM事件，onDOMContentLoaded是HTML5事件。
②onload事件会被样式表、图像和子框架阻塞，而onDOMContentLoaded不会。
③当加载的脚本内容并不包含立即执行DOM操作时，使用onDOMContentLoaded事件是个更好的选择，会比onload事件执行时间更早。