面试题

一、this关键字(指向)？

1. 在浏览器里，在全局范围内this 指向window对象；
2. 在函数中，this永远指向最后调用他的那个对象；
3. 构造函数中，this指向new出来的那个新的对象；
4. call、apply、bind中的this被强绑定在指定的那个对象上；
5. 箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.
   要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来；
6. apply、call、bind都是js给函数内置的一些API，调用他们可以为函数指定this的执行,同时也可以传参。

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

事件委托：

又叫事件代理，利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

原理：

事件冒泡机制，从最深的节点开始，然后逐步向上传播事件。

作用：

①支持为同一个DOM元素注册多个同类型事件；
②可将事件分为事件捕获和事件冒泡。

代码：

addEventListener(event，function，useCapture布尔值)
默认为false冒泡，true为捕获

attachEvent() 
//IE8及IE更早版本

 detachEvent() 
//移除事件监听

//不使用事件捕获
window.onload = function(){
    	let oBox = document.getElementById("box");
    	oBox.onclick = function(){
    		alert(1);   //不触发
    }
    	oBox.onclick = function(){
    		alert(2);   //触发
    	}
}

//使用事件捕获
window.onload = function(){
    oBox.addEventListener("click",function(){
    	alert(1);   //触发
    })
	oBox.addEventListener("click",function(){
	alert(2);   //触发
	})
}

事件捕获：

当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。

在事件到达目标节点之前的过程就是捕获阶段。

所有经过的节点,都会触发对应的事件。

当为事件捕获(useCapture:true)时,先执行body的事件,再执行div的事件

事件冒泡：

当事件到达目标节点后，会沿着捕获阶段的路线原路返回。

同样，所有经过的节点,都会触发对应的事件。

当为事件冒泡(useCapture:false)时,先执行div的事件,再执行body的事件

先冒泡后捕获：

根据w3c标准，应先捕获再冒泡。

若要实现先冒泡后捕获，给一个元素绑定两个addEventListener，

其中一个第三个参数设置为false（即冒泡），另一个第三个参数设置为true（即捕获），

调整它们的代码顺序，将设置为false的监听事件放在设置为true的监听事件前面即可。

三、对象和面向对象

向对象是一种编程思维的改变。通过原型的方式来实现面向对象编程。

面向对象的三大特性：

1、封装 ：

隐藏对象的属性和实现细节，仅对外提供公共访问方式，将变化隔离，便于使用，提高复用性和安全性。

2、继承

提高代码复用性；继承是多态的前提。

3、多态

父类或接口定义的引用变量可以指向子类或具体实现类的实例对象。提高了程序的拓展性。

四、for···in和for···of的区别：(for···in取key，for··of取value)

首先一句话：(for···in取key，for··of取value)

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

var arr = [99,88,66,77];
for(let i in arr){
    console.log(i);   //0,1,2,3
}
for(let i of arr){
    consoel.log(i);   //99,88,66,77
}

②从遍历字符串的角度来说，同数组一样。

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

var obj = {name:"Bob",age:25};
for(var i in obj){
	console.log(i)  // name age
}
for(var i of obj){
	console.log(i)   //报错
}

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

var person={
    name:'coco',
    age:22,
    locate:{
        country:'China',
        city:'beijing',
    }
}
for(var key of Object.keys(person)){
    //使用Object.keys()方法获取对象key的数组
    console.log(key+": "+person[key]);//name: coco,age: 22,locate: [object Object]
}

五、查找数组重复项

ES6-set

使用ES6中的set是最简单的去重方法

var arr  = [1,1,'true','true',true,true,15,15,false,false, undefined,
undefined, null,null, NaN,NaN,'NaN', 0, 0, 'a', 'a',{},{}];
 
function arr_unique1(arr){
return  [...new Set(arr)];
//或者
//return  Array.from(new Set(arr));
}
arr_unique1(arr); // (13)[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

该方法可以说是最完美的方法，就是需要环境支持ES6

var arr = [1,2,45,44,45,2,89,1,1,2,1,2,44];
Array.prototype.unique = function(){
	var arr = this;
	var box = [];
	for(var str of arr){
		if(arr.indexOf(str) != arr.lastIndexOf(str) && box.indexOf(str) == -1){
			box.push(str);
		}
	}
	return box;
}
console.log(arr.unique());

六、数组扁平化

什么是数组扁平化？

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

实现基本方式

1、对数组的每一项进行遍历。

2、判断该项是否是数组。

3、如果该项不是数组则将其直接放进新数组。

4、是数组则回到1，继续迭代。

5、当数组遍历完成，返回这个新数组。

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)); 

第二种(不推荐)：

function flatten(arr){
	return arr.toString().split(",").map(v => {
		return Number(v);
	})
}
console.log(flatten(arr)); 

第三种：

function flatten(arr){
	console.log(arr.join(","))
	return arr.join(",").split(",").map(v => {
		return parseInt(v);
	})
}
console.log(flatten(arr)); 

第四种：

var arr = [1,2,[3,4,[5,6,[7,8,[9,10]]]]];
function flatten(arr){
	return arr.reduce((result,item) => {
		console.log(result,item)
		return result.concat(Array.isArray(item) ? flatten(item) : item);
	},[]);
}
console.log(flatten(arr)); 

第五种：

console.log([].concat(...arr));
function flatten(arr){
	while(arr.some(item => Array.isArray(item))){
		arr = [].concat(...arr);
	}
	return arr;
}
console.log(flatten(arr))

七、iframe的优缺点有哪些？

优点：

1、重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，加快了网页下载速度)

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

3、方便制作导航栏

缺点：

1、会产生很多页面，不容易管理

2、不容易打印（目前只能实现分框架页面的打印，不能实现对frameset的打印）

3、浏览器的后退按钮无效（只能针对实现当前光标所在页面的前进与后退，无法实现frameset整个页面的前进与后退）

4、代码复杂,无法被一些搜索引擎索引到（有些搜索引擎对框架结构的页面不能正确处理，会影响到搜索结果的排列名次）

5、多数小型的移动设备（手机）无法完全显示框架

6、多框架的页面会增加服务器的http请求，影响页面的并行加载。

（并行加载：同一时间针对同一域名下的请求。一般情况，iframe和所在页面在同一个域下面，而浏览器的并加载的数量是有限制的。）

八、 函数柯里化（卡瑞化、加里化）？

概念：

把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

容易理解的概念：

Currying概念其实很简单，只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数（主要是利用闭包实现的）。

特点：

①接收单一参数，将更多的参数通过回调函数来搞定；

②返回一个新函数，用于处理所有的想要传入的参数；

③需要利用call/apply与arguments对象收集参数；

④返回的这个函数正是用来处理收集起来的参数。

作用：

能进行部分传值，而传统函数调用则需要预先确定所有实参。

如果你在代码某一处只获取了部分实参，然后在另一处确定另一部分实参，这个时候柯里化和偏应用就能派上用场。

用途：

我认为函数柯里化是对闭包的一种应用形式，延迟计算、参数复用、动态生成函数(都是闭包的用途)。

function add(x,y){  //普通函数
    console.log(x+y);
}
function curryingAdd(x){  //柯里化函数(闭包)
    return function(y){
        console.log(x+y);
    }
}
add(1,2)  //3
curryingAdd(1)(2)   //3  

九、垃圾回收机制

什么是垃圾：

一般来说没有被引用的对象就是垃圾，就是要被清除， 有个例外如果几个对象引用形成一个环，互相引用，但根访问不到它们，这几个对象也是垃圾，也要被清除。

方法：

①JS具有垃圾自动回收的机制：

周期性执行，找出那些不在继续使用的变量，然后释放其内存。

②标记清除(常见)：

当变量进入环境时，将这个变量标记为“进入环境”。

当变量离开环境时，则将其标记为“离开环境”。

标记“离开环境”的就回收内存。

垃圾回收器完成内存清除工作，销毁那些带标记的值并回收他们所占用的内存空间。

③引用计数：

原理：跟踪记录每个值被引用的次数。

工作流程：当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。

如果同一个值又被赋给另一个变量，则该值的引用次数加1。

相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数减1。

当这个值的引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。

这样，当垃圾回收器下次再运行时，它就会释放那些引用次数为0的值所占用的内存。

十、window的onload事件和domcontentloaded

window.onload：

当一个资源及其依赖资源已完成加载时，将触发onload事件。

document.onDOMContentLoaded：

当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像和子框架的完成加载。

区别：

①onload事件是DOM事件，onDOMContentLoaded是HTML5事件。

②onload事件会被样式表、图像和子框架阻塞，而onDOMContentLoaded不会。

③当加载的脚本内容并不包含立即执行DOM操作时，使用onDOMContentLoaded事件是个更好的选择，会比onload事件执行时间更早。