十道必须要理解的javascript面试题

Posted 2021-05-23 Frazier_梁超

this关键字(指向)

1.谁调用指向谁

2.自己调用指向window

3.当函数作为构造函数的时候 this指向构造函数实例

4.call/apply/bind 强制改变this指向

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

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

      先冒泡后捕获

             给一个元素绑定两个addEventListener，其中一个第三个参数设置为false（即冒泡），另一个第三个参数设置为true（即捕获），调整它们的代码顺序，将设置为false的监听事件放在设置为true的监听事件前面即可。

对象和面向对象

面向对象是一种编程思想(万物皆对象)与之对应的是面向过程

面向对象的特点 ，也就是 封装 继承 多态

          封装: 低耦合高内聚

          多态: 重载和重写 （重写console.log = function () {}）（重载，方法名相同 形参的个数或者数据类型不同 导致方法内部处理逻辑不同）

          继承: 子类继承父类方法和属性

通过研究一些实例的属性和方法, 确定一些问题的分类 根据类的不同 而产生不同类问题的解决方案 ===> 面向对象

像 js vue JQ等等本身就是基于面向对象构建出来的

for···in和for···of的区别

for...in 循环出的是 key，for...of 循环出的是 value

for...of 不能循环普通的对象，需要通过和 Object.keys()搭配使用

查找数组重复项

1.ES6-set

function arr_unique1(arr){
return  [...new Set(arr)];
//或者
//return  Array.from(new Set(arr));
}
arr_unique1(arr);

2.forEach + indexOf

function arr_unique4(arr){
var res = [];
arr.forEach((val,index)=>{
if( res.indexOf(val) === -1 ){
res.push(val);
}
});
return res;
}

console.log(arr_unique4(arr));

3.forEach + includes

function arr_unique6(arr){
var res = [];
arr.forEach((val)=>{
if( ! res.includes(val) ){
res.push(val);
}
});
return res;
}
arr_unique6(arr);

数组扁平化

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

1.常规方式 递归处理

2.扩展运算符

3.es6中的flat函数也可以实现数组的扁平化

垃圾回收机制

垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。

iframe的优缺点有哪些

iframe标签，相当于在浏览器窗口内嵌一个子窗口，内容自动打开。Iframe 可以嵌在网页中的任意部分，也可以随意定义其大小

优点：
解决加载缓慢的第三方内容如图标和广告等的加载问题

缺点：
即时内容为空，加载也需要时间
会阻止页面加载
没有语意 

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

把接受多个参数的函数变换成接受一个单一参数的函数，并且返回接受余下的参数且返回结果的新函数的技术

就是只传递给函数某一部分参数来调用，返回一个新函数去处理剩下的参数（闭包）

window的onload事件和domcontentloaded

onload当页面载入完毕后执行javascript代码

DOMCOntentLoaded事件，指文档加载完成触发的事件，即dom加载完成，不用考虑其他资源，

区别：

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

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

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