web前端-------面试题（一）

1.this关键字（指向）？

this是JavaScript语言的一个关键字，它是函数运行时，在函数体内部自动生成一个对象，只能在函数体内部使用。函数的不同使用场合，this有不同的值。总的来说this就是函数运行时所在的环境对象。
情况一：
纯粹的函数调用：这是函数的最通常的用法，属于全局调用，因此this就代表全局对象

var x = 1;
function test(){
    console.log(this.x);
}
test();

情况二：
作为对象方法的调用：函数还可以作为某个对象的方法调用，这时this就指这个上级对象。

function test(){
    console.log(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;
obj.m();

情况三：
作为构造函数调用：所谓构造函数，就是通过这个函数，可以生成一个新对象。这时this就指这个新对象。

function test(){
    this.x = 1;
}
var obj = new test();
console.log(obj.x);

情况四：
apply的调用：
apply( )是函数的一个方法，作用是改变函数的调用对象。它的第一个参数就表示改变后的调用这个函数的对象。因此这时this指的就是这第一个参数。
apply( )的参数为空时，默认调用全局对象。这时运行结果为0，证明this指的是全局对象。

var x = 0;
function test(){
    console.log(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;
obj.m.apply();    // 0   this指的是全局对象
obj.m.apply(obj);   // 1    this指的是obj

情况五：
隐式绑定：
函数的调用是在某个对象上触发的，即调用位置上存在上下文对象，典型隐士
调用：xxx.fn()

function info(){
    console.log(this.age);
}
var person = {
    age: 20,
    info
}
var age = 28;
person.info(); //20;执行的是隐式绑定

情况六：
箭头函数：
箭头函数没有自己的this，继承外层上下文绑定的this；

let obj = {
    age: 20,
    info: function() {
        return () => {
            console.log(this.age); //this继承的是外层上下文绑定的this
        }
    }
}
let person = {age: 28};
let info = obj.info();
info(); //20
let info2 = obj.info.call(person);
info2(); //28

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

事件委托：
又叫事件代理，利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
原理：
事件冒泡机制，从最深的节点开始，然后逐步向上传播事件。
作用：
①支持为同一个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);   //触发
	})
}

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

3.对象和面向对象

对象：
属性和方法的集合叫做对象（万物皆对象）。
面向对象：
首先就是找对象，如果该对象不具备所需要的方法或属性，那就给它添加。面向对象是一种编程思维的改变。通过原型的方式来实现面向对象编程。

4. for···in和for···of的区别：(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)   //报错
}

5.查找数组重复项

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

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

6.数组扁平化

扁平化
js当中涉及到扁平化这个概念的就是数组扁平化，第一次接触到这个知识点的时候是在秋招的时候参加快手的面试， 当时想到的唯一办法就是递归解决，如今再重新看这个问题又想到很多其他的解决方案，那么今天就正式介绍一下什么是数组扁平化。
数组的扁平化，就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。举个例子，假设有个名为 flatten 的函数可以做到数组扁平化， 效果就会如下：

var arr = [1, [2, [3, 4]]];
console.log(flatten(arr)) // [1, 2, 3, 4]

7.垃圾回收机制

什么是垃圾：
一般来说没有被引用的对象就是垃圾，就是要被清除， 有个例外如果几个对象引用形成一个环，互相引用，但根访问不到它们，这几个对象也是垃圾，也要被清除。
方法：
①JS具有垃圾自动回收的机制：
周期性执行，找出那些不在继续使用的变量，然后释放其内存。
②标记清除(常见)：
当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。垃圾回收器完成内存清除工作，销毁那些带标记的值并回收他们所占用的内存空间。
③引用计数：
原理：跟踪记录每个值被引用的次数。
工作流程：当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次数加1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数减1。当这个值的引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。这样，当垃圾回收器下次再运行时，它就会释放那些引用次数为0的值所占用的内存。

8. iframe的优缺点有哪些？

优点：
①iframe能够原封不动的把嵌入的网页展现出来；
②如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
③网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
④如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决
缺点：
①会产生很多页面不易管理；
②iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
③代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
④很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
⑤iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

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

概念：
把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数而且返回结果的新函数的技术。
容易理解的概念：
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  

10.window的onload事件和domcontentloaded

window.onload：
当一个资源及其依赖资源已完成加载时，将触发onload事件。
document.onDOMContentLoaded：
当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像和子框架的完成加载。
区别：
①onload事件是DOM事件，onDOMContentLoaded是HTML5事件。
②onload事件会被样式表、图像和子框架阻塞，而onDOMContentLoaded不会。
③当加载的脚本内容并不包含立即执行DOM操作时，使用onDOMContentLoaded事件是个更好的选择，会比onload事件执行时间更早。