防抖和节流中this的运用

防抖：触发高频事件，n秒后执行，如果n秒内再触发，重新计时

function debounce(fn) {
     let timeout = null; // 创建一个标记用来存放定时器的返回值
     return function () {
       clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
       timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
         fn.apply(this);
       }, 500);
     };
}
 function sayHi() {
     console.log('防抖成功');
}
var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi)); // 防抖

ps:this指向特殊几种情况：

1，函数作为构造函数，this指向它实例对象

2，函数作为对象属性被调用，this指向对象本身

注意，如果fn函数不作为obj的一个属性被调用，会是什么结果呢？
var obj = {
  x:10,
  y:function(){
    console.log(this);
    console.log(this.x);
  }
}
var fn1 = obj.fn;
fn1(); // undefined
如上代码，如果fn函数被赋值到了另一个变量中，并没有作为obj的一个属性被调用，那么this的值就是window，this.x为undefined。

3,函数用call或者aply调用，this指向作为参数传入的对象(作用域的改变)

call()、apply()、bind() 都是用来重定义 this 这个对象的！ call() 返回一个新的函数；apply()、bind() 直接执行。 call() 、bind() 、 apply() 这三个函数的第一个参数都是 this 的指向对象。第二个参数差别就来了： call()、bind() 是直接放进去的，第二第三第 n 个参数全都用逗号分隔 apply() 所有参数必须放在一个数组里面传进去

节流：触发高频事件，n秒内只执行一次，会稀释函数的执行频率

function throttle(fn){
  let flag = true;
  return function(){//-通过闭包来保存一个标记-
     if(!flag) return;
     flag = false;
     fn.apply(this);
     setTimeout(()=>{
      flag = true
    },500)
  }
}