5. call和apply及bind三者的区别（面试重点）
this指向，apply，call，bind的区别是一个经典的面试问题
同时在项目中会经常使用到的原生的js方法。
也是ES5中的众多坑的一个
5.1 从this说起
this指向 = 谁调用，指向谁（这是错误的！！！）
this永远指向最后一个调用它的那个对象（正解）
如何解决this指向问题
- 使用ES6中箭头函数
- 函数内部使用_this = this
- 使用apply，call，bind方法
- new实例化一个对象
5.2 谈谈apply，call，bind
- apply()
let obj = { name : "小明", func1: function () { console.log(this.name) }, func2: function () { setTimeout( function () { this.func1() }.apply(name),1000); } }; obj.func2() // 小明
apply() 方法调用一个函数，其具有一个指定的this值，以及作为一个数组（或者类似数组的对象）提供的参数，fun.apply(thisArg, [argsArray])
thisArg：在fun函数运行时指定的this值。指定this的值并不一定是函数执行时真正的this值，如果是原始值的this会指向该原始值的自动包装对象。
argsArray：一个数组或者类数组对象，其中的数组元素将作为单独的参数传给fun函数。参数为null或者undefined，则表示不需要传入任何参数。
call()
let obj2 = { name : "小红", func1: function () { console.log(this.name) }, func2: function () { setTimeout( function () { this.func1() }.call(name),1000); } }; obj2.func2() // 小红
call() 调用一个函数，其具有一个指定的this值，以及若干个参数列表，fun.call(thisArg, arg1, arg2, …)
thisArg：在fun函数运行时指定的this值。指定this的值并不一定是函数执行时真正的this值，如果是原始值的this会指向该原始值的自动包装对象。
arg1, arg2, …：若干个参数列表
bind()
let obj3 = { name : "小猪", func1: function () { console.log(this.name) }, func2: function () { setTimeout( function () { this.func1() }.bind(name)(),1000); } }; obj3.func2() // 小猪
bind() 创建一个新的函数，当被调用时，将其this的关键字设置为提供的值，在调用新函数时，在任何提供一个给定的参数序列。
bind创建了一个新函数，必须手动去调用。
5.3 区别
apply和call基本类似，他们的区别只是传入的参数不同。
apply传入的参数是包含多个参数的数组
call传入的参数是若干个参数列表
bind方法会创建一个新的函数，当被调用的时候，将其this关键字设置为提供的值，我们必须手动去调用
6. Javascript的事件流模型（面试重点）
事件冒泡：事件开始由最具体的元素接受，然后逐级向上传播
事件捕捉：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的（与上面相反）
DOM事件流：三个阶段：事件捕捉，目标阶段，事件冒泡
7. 防抖与节流（面试精选）
7.1 函数防抖
当持续触发事件时，一段时间内只能触发一次。将几次操作合并为一此操作进行。比如说有一条赛车通道，赛车通过的时间为5s，5s之后到达终点，执行领奖操作
这5s之内只允许一辆赛车在通道内，如果第一辆赛车还在通道内，此时第二辆赛车已经进来了，那么销毁第一辆赛车，从第二辆车入场重新计时5s执行领奖操作
应用场景（数据抖动问题）
let telInput = document.querySelector('input'); telInput.addEventListener('input', function(e) { //如果直接每次发请求，会导致性能问题 //数据请求 let timeOut = null; if(timeOut){ clearTimeout(timeOut) }else{ timeOut = setTimeout(()=>{ $.ajax({}) },2000) } })
7.2 函数节流
当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流，顾名思义，节制流入或流出。
比如说水龙头放水，一旦打开开关，水流就会很快，我们要做的就是限制流出
应用场景（客运站问题）
把整个事件处理器比喻成客运站，如果客运大巴到站就走，那么路上肯定会发生交通拥堵，而且车大部分是空的
因为没给时间上客，虚假繁忙的情况肯定是不好的，那么怎么处理呢？
设置一个时间间隔，时间间隔内只允许执行一次，客运站大巴设定一个时间，到点才会走
let throttle = function(func, delay) { let prev = Date.now(); return function() { var context = this; var args = arguments; var now = Date.now(); if (now - prev >= delay) { func.apply(context, args); prev = Date.now(); } } } function demo() { //do something //ajax({}) //... } box.addEventListener('touchmove', throttle(demo, 2000));
8. JS中的虚拟DOM是什么？（面试重点）
8.1 为什么要有虚拟dom？
文档对象模型或 DOM 定义了一个接口，该接口允许 JavaScript 之类的语言访问和操作 HTML 文档
但是此接口需要付出代价，大量非常频繁的 DOM 操作会使页面速度变慢
虚拟dom的出现就是为了解决操作dom的性能问题
8.2 虚拟dom是什么？好处是？
本质就是JS对象
真实节点抽象成JS对象（文档结构树）
虚拟节点（VNode）表示 DOM 树中的节点。当需要操纵时，可以在虚拟 DOM的 内存中执行计算和操作，而不是在真实 DOM 上进行操纵。
相对于直接操作dom，这自然会更快
9. 手写一个new，实现同等功能
function Person(name) { this.name = name this.sayName= function () { console.log(`我是 ${this.name}!`) } } function myNew(that, ...args) { const obj = Object.create(null) obj.__proto__ = that.prototype const res = that.call(obj, ...args) return res instanceof Object ? res : obj } let person= myNew(Person, '小明') person.sayWorld(); // 我是小明
10. 获得页面url参数的值（常用）
function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; }
