节流，防抖，new函数，柯里化

防抖

1. 防抖就是固定时间内只触发一次（也就是在连续点击时，停止时间大于规定值才会触发事件）
2. 通过定时器与闭包来实现

function debounce(fun,ms=1000){
    
  let timer; // 定义开关，当它为false时，定时器启动，为true时，清除掉上一个定时器
  return function (...args){
    
    if(timer){
    
      clearTimeout(timer)
    }
    timer=setTimeout(()=>{
     // 启动定时器，规定的防抖时间到了后再执行
       fun.call(this,args)
       timer=null
     },ms)
    
  }
}
const task=()=>{
    
  console.log('大于设置时间间隔，事件触发')
}
const debounceTask=debounce(task,1000) // 定义事件函数，规定防抖事件为1000ms
/* * 测试 * 当 * setInterval(()=>{ * console.log('一直触发事件中') * debounceTask() * },500) * 也就是触发的频率大于规定的1000ms，控制台只打印’一直触发事件中‘，不会出现’大于设置时间间隔，事件触发‘ */
setInterval(()=>{
    
  console.log('一直触发事件中')
  debounceTask()
},2000)
/* * 这个触发频率大于1000ms，每个2000ms打印’一直触发事件中‘和’大于设置时间间隔，事件触发‘ */

节流

1. 节流就是每隔固定事件触发一次（也就是在连续点击时，不管你点击频率，每隔固定事件就触发一次事件）
2. 也采用闭包加定时器实现

function throttle(fun,ms=1000){
    
  let canRun=true // 定义开关，默认为true,会启动定时器，false时，在判断语句中结束掉进程
  return function (...args){
    
    if(!canRun){
     return } // 当canRun为false时触发，也就是已经有一个定时器执行着，就结束该进程；也就是在此处截断
    canRun=false // 将canRun的状态改为false，那么在里面定时器执行完毕之前不会再向后走，也就是阻止后面事件触发时响应
    setTimeout(()=>{
    
      fun.apply(this,args)
      canRun=true // 执行完毕后，允许后面事件进来响应
    },ms)
  }
}
const task=()=>{
    
  console.log('大于设置时间间隔，事件触发')
}
const throttleTask=throttle(task,1000)

/* * 测试 * 虽然执行频率为500ms一次，但控制台依然1000ms打印一次’大于设置时间间隔，事件触发‘ * 控制台打印 * 一直触发事件中 * 一直触发事件中 * 大于设置时间间隔，事件触发 * 一直触发事件中 * 一直触发事件中 * 大于设置时间间隔，事件触发 */
setInterval(()=>{
    
  console.log('一直触发事件中')
  throttleTask()
},500)

注：可以使用lodash来完成防抖与节流

new

1. ES6语法糖class原理

function myNew(Func,...args){
    
  const instance={
    }
  if(Func.prototype){
     // 如果函数原型存在，将instance指向原型对象上去
    Object.setPrototypeOf(instance,Func.prototype)
  }
  const res=Func.apply(instance,args) // 调用构造器，并将内部的this用instance来代替
  if(typeof res==='function' || typeof res==='object' && typeof res===null){
     // 兼容处理下返回值
    return res
  }
  return instance

}
function  Person(name){
    
  this.name=name
}
Person.prototype.eat=function (){
    
  console.log(this.name+'吃饭')
}
const p1=myNew(Person,'jakc')
p1.eat()
// jack吃饭

柯里化

1. 函数柯里化就是我们给一个函数传入一部分参数，此时就会返回一个函数来接收剩余的参数，后面执行返回的那个函数
2. 将函数的一个参数拆分为两个乃至更多参数

function curry(func){
    
  return function curried(...args){
    
 	 // 传入的参数大于等于原始函数func的参数个数，则直接执行该函数
    if(args.length >= func.length){
    
      return func.apply(this, args)
    }
    /** * 传入的参数小于原始函数fn的参数个数时 * 则继续对当前函数进行柯里化，返回一个接受所有参数（当前参数和剩余参数） 的函数 */
    return function (...args2){
    
      return curried.apply(this,args.concat(args2))
    }
  }
}
function sum(a,b,c){
    
  return a+b+c
}
const curriedSum=curry(sum)

console.log(curriedSum(1,2,3))
console.log(curriedSum(1)(2,3))
console.log(curriedSum(1)(2)(3))
// 输出结果都为6