【高级技巧】九个前端面试题，带你巩固知识点！
javascript
摘要：
本篇文章分享前端高级技巧，整理总结九个前端面试题，带你巩固知识点，希望对大家有所帮助！第一问：安全类型检测——typeof和instanceof区别以及缺陷，以及解决方案这两个方法都可以用来判断变量类型区别：前者是判断这个变量是...
本篇文章分享前端高级技巧，整理总结九个前端面试题，带你巩固知识点，希望对大家有所帮助！
第一问：安全类型检测——typeof和instanceof 区别以及缺陷，以及解决方案
这两个方法都可以用来判断变量类型
区别：前者是判断这个变量是什么类型，后者是判断这个变量是不是某种类型，返回的是布尔值
（1）typeof
缺陷：
1.不能判断变量具体的数据类型比如数组、正则、日期、对象，因为都会返回object,不过可以判断function，如果检测对象是正则表达式的时候,在Safari和Chrome中使用typeof的时候会错误的返回"function",其他的浏览器返回的是object.
2.判断null的时候返回的是一个object，这是js的一个缺陷,判断NaN的时候返回是number
（2）instanceof 可以用来检测这个变量是否为某种类型，返回的是布尔值，并且可以判断这个变量是否为某个函数的实例，它检测的是对象的原型
let num = 1 num instanceof Number // false num = new Number(1) num instanceof Number // true
明明都是num，而且都是1，只是因为第一个不是对象，是基本类型，所以直接返回false，而第二个是封装成对象，所以true。
这里要严格注意这个问题，有些说法是检测目标的__proto__与构造函数的prototype相同即返回true，这是不严谨的，检测的一定要是对象才行，如：
let num = 1 num.__proto__ === Number.prototype // true num instanceof Number // false num = new Number(1) num.proto === Number.prototype // true num instanceof Number // true num.proto === (new Number(1)).proto // true
此外，instanceof还有另外一个缺点：如果一个页面上有多个框架，即有多个全局环境，那么我在a框架里定义一个Array，然后在b框架里去用instanceof去判断，那么该array的原型链上不可能找到b框架里的array，则会判断该array不是一个array。
解决方案：使用Object.prototype.toString.call(value) 方法去调用对象，得到对象的构造函数名。可以解决instanceof的跨框架问题，缺点是对用户自定义的类型，它只会返回[object Object]
第二问：既然提到了instanceof，那手写实现下instanceof吧
// [1,2,3] instanceof Array ---- true
// L instanceof R
// 变量R的原型 存在于 变量L的原型链上
function instance_of(L,R){
// 验证如果为基本数据类型，就直接返回false
const baseType = ['string', 'number','boolean','undefined','symbol']
if(baseType.includes(typeof(L))) { return false }
let RP = R.prototype; //取 R 的显示原型
L = L.__proto__; //取 L 的隐式原型
while(true){ // 无线循环的写法（也可以使 for(;;) ）
if(L === null){ //找到最顶层
return false;
}
if(L === RP){ //严格相等
return true;
}
L = L.__proto__; //没找到继续向上一层原型链查找
}
}第三问：作用域安全的构造函数--当我们new一个构造函数的时候可以获得一个实例，要是我们忘记写new了呢？
例如
function Person(){
this.name = "小红"
}
p = Person();这会发生什么问题？，怎么解决
这样直接使用，this会映射到全局对象window上。解决方法可以是：首先确认this对象是正确类型的实例。如果不是，那么会创建新的实例并返回。请看下面的例子
function Person(){
if(this instanceof Person){
this.name = "小红"
}else{
return new Person()
}
}
p = Person();第四问：谈一下惰性载入函数
在JavaScript代码中，由于浏览器之间行为的差异，多数JavaScript代码包含了大量的if语句，以检查浏览器特性，解决不同浏览器的兼容问题。例如添加事件的函数：
function addEvent (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}每次调用addEvent()的时候，都要对浏览器所支持的能力仔细检查。首先检查是否支持addEventListener方法，如果不支持再检查是否支持attachEvent方法，如果还不支持，就用DOM 0级的方法添加事件。在调用addEvent()过程中，每次这个过程都要走一遍。其实，浏览器支持其中的一种方法就会一直支持他，就没有必要再进行其他分支的检测了，也就是说if语句不必每次都执行，代码可以运行的更快一些。解决的方案称之为惰性载入。 所谓惰性载入，就是说函数的if分支只会执行一次，之后调用函数时，直接进入所支持的分支代码。有两种实现惰性载入的方式，第一种事函数在第一次调用时，对函数本身进行二次处理，该函数会被覆盖为符合分支条件的函数，这样对原函数的调用就不用再经过执行的分支了，我们可以用下面的方式使用惰性载入重写addEvent()。
function addEvent (type, element, handler) {
if (element.addEventListener) {
addEvent = function (type, element, handler) {
element.addEventListener(type, handler, false);
}
}
else if(element.attachEvent){
addEvent = function (type, element, handler) {
element.attachEvent('on' + type, handler);
}
}
else{
addEvent = function (type, element, handler) {
element['on' + type] = handler;
}
}
return addEvent(type, element, handler);
}在这个惰性载入的addEvent()中，if语句的每个分支都会为addEvent变量赋值，有效覆盖了原函数。最后一步便是调用了新赋函数。下一次调用addEvent()的时候，便会直接调用新赋值的函数，这样就不用再执行if语句了。
第二种实现惰性载入的方式是在声明函数时就指定适当的函数。这样在第一次调用函数时就不会损失性能了，只在代码加载时会损失一点性能。一下就是按照这一思路重写的addEvent()。
var addEvent = (function () {
if (document.addEventListener) {
return function (type, element, fun) {
element.addEventListener(type, fun, false);
}
}
else if (document.attachEvent) {
return function (type, element, fun) {
element.attachEvent('on' + type, fun);
}
}
else {
return function (type, element, fun) {
element['on' + type] = fun;
}
}
})();这个例子中使用的技巧是创建一个匿名的自执行函数，通过不同的分支以确定应该使用那个函数实现，实际的逻辑都一样，不一样的地方就是使用了函数表达式（使用了var定义函数）和新增了一个匿名函数，另外每个分支都返回一个正确的函数，并立即将其赋值给变量addEvent。
惰性载入函数的优点只执行一次if分支，避免了函数每次执行时候都要执行if分支和不必要的代码，因此提升了代码性能，至于那种方式更合适，就要看您的需求而定了。
第五问：谈一下函数节流
概念：限制一个函数在一定时间内只能执行一次。
主要实现思路 就是通过 setTimeout 定时器，通过设置延时时间，在第一次调用时，创建定时器，先设定一个变量true，写入需要执行的函数。第二次执行这个函数时，会判断变量是否true，是则返回。当第一次的定时器执行完函数最后会设定变量为false。那么下次判断变量时则为false，函数会依次运行。目的在于在一定的时间内，保证多次函数的请求只执行最后一次调用。
函数节流的代码实现
function throttle(fn,wait){
var timer = null;
return function(){
var context = this;
var args = arguments;
if(!timer){
timer = setTimeout(function(){
fn.apply(context,args);
timer = null;
},wait)
}
}
}
function handle(){
console.log(Math.random());
}
window.addEventListener("mousemove",throttle(handle,1000));函数节流的应用场景(throttle)
- DOM 元素的拖拽功能实现（mousemove）
- 高频点击提交，表单重复提交
- 搜索联想（keyup）
- 计算鼠标移动的距离（mousemove）
- 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
- 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
- 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，- - 才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次.
第六问：谈一下函数防抖
概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。
函数防抖的要点，是需要一个 setTimeout 来辅助实现，延迟运行需要执行的代码。如果方法多次触发，则把上次记录的延迟执行代码用 clearTimeout 清掉，重新开始计时。若计时期间事件没有被重新触发，等延迟时间计时完毕，则执行目标代码。
函数防抖的代码实现
function debounce(fn,wait){
var timer = null;
return function(){
if(timer !== null){
clearTimeout(timer);
}
timer = setTimeout(fn,wait);
}
}
function handle(){
console.log(Math.random());
}
window.addEventListener("resize",debounce(handle,1000));函数防抖的使用场景 函数防抖一般用在什么情况之下呢？一般用在，连续的事件只需触发一次回调的场合。具体有：
- 搜索框搜索输入。只需用户最后一次输入完，再发送请求；
- 用户名、手机号、邮箱输入验证；
- 浏览器窗口大小改变后，只需窗口调整完后，再执行 resize 事件中的代码，防止重复渲染。
目前遇到过的用处就是这些，理解了原理与实现思路，小伙伴可以把它运用在任何需要的场合，提高代码质量。
第七问：谈一下requestAnimationFrame
动画原理 ： 眼前所看到图像正在以每秒60次的频率刷新，由于刷新频率很高，因此你感觉不到它在刷新。而动画本质就是要让人眼看到图像被刷新而引起变化的视觉效果，这个变化要以连贯的、平滑的方式进行过渡。 那怎么样才能做到这种效果呢？
刷新频率为60Hz的屏幕每16.7ms刷新一次，我们在屏幕每次刷新前，将图像的位置向左移动一个像素，即1px。这样一来，屏幕每次刷出来的图像位置都比前一个要差1px，因此你会看到图像在移动；由于我们人眼的视觉停留效应，当前位置的图像停留在大脑的印象还没消失，紧接着图像又被移到了下一个位置，因此你才会看到图像在流畅的移动，这就是视觉效果上形成的动画。
与setTimeout相比较：
理解了上面的概念以后，我们不难发现，setTimeout 其实就是通过设置一个间隔时间来不断的改变图像的位置，从而达到动画效果的。但我们会发现，利用seTimeout实现的动画在某些低端机上会出现卡顿、抖动的现象。 这种现象的产生有两个原因：
setTimeout的执行时间并不是确定的。在Javascript中， setTimeout 任务被放进了异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列里的任务是否需要开始执行，因此 setTimeout 的实际执行时间一般要比其设定的时间晚一些。
刷新频率受屏幕分辨率和屏幕尺寸的影响，因此不同设备的屏幕刷新频率可能会不同，而 setTimeout只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。