前端学习总结-原生js之高阶函数

前端学习的总结，如果以后发现错误或有新的理解再继续补充。

先写三个，函数的柯里化，级联函数，防抖与节流。

1.函数的柯里化

函数柯里化，我的理解是，用闭包的原理，将只需要传一次的一个参数进行缓存。

比如：

var getCurry= function (x) {
    return function(y) {
        return x + y
    }
};
let curry=getCurry(1);
curry(1);

 正如之前所总结的(原生js之闭包)，闭包的主要形式就是函数套函数，而内层函数记住并访问所在的词法作用域，也就是外层函数的函数作用域。所以，在上面的例子里，内层return的function就通过闭包缓存了外层传入的x。

2.级联函数

什么是级联函数，上代码

var  aCuteDog= new dog();
aCuteDog.setName("大黄").setAge(6);

 能够像这样链式调用的，我们可以称之为级联函数。那么，这个是怎么实现的呢？继续上代码

function dog() {
    this.name = '';
    this.age = 0;
}
dog.prototype = {
    setName:function(name){
        this.name = name;
        return this;
    },
    setAge:function(age){
        this.age = age;
        return this;
    }
}

 好了，综合起来解说一下，aCuteDog是dog()函数生成的实例，调用自身prototype上的setName()方法后，setName()方法在设置完那么后，又返回了当前实例，因此可以用返回的当前实例，调用下一个方法。总的来说，核心就在于这个’return this‘。

3.防抖与节流

防抖与节流要解决的问题是一样的，都是解决用户频繁点击的问题，只是解决问题的方式有所不同。

防抖可以这么理解，用户第一次点击或触发，设置一个延时，延时执行用户的操作，但是如果在延时的期间用户再次触发，则清除定时器，重新计时，下面是代码。

function debounce(fn, delay) {
  let timer = null
  return function () {
    let context = this
    let args = arguments
    if(timer) {
        clearTimeout(timer)
    }
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

而节流是这样，用户第一次触发时，设置一个初始时间，后面用户再操作时，判断一下用户再次操作的时间和初始时间的差，如果不达到预定值，就不理睬，下面是代码。

function throttle(fn, interval) {
  let last = 0
  return function () {
      let context = this
      let args = arguments
      let now = +new Date()
      if (now - last >= interval) {
          last = now;
          fn.apply(context, args);
      }
    }
}

防抖与节流除了要解决的问题一样，还有一个共同特点，就是都用了闭包来缓存时间。

参考：

• 前端性能优化原理与实践-修言

 

 

本文地址：https://blog.csdn.net/weixin_39469904/article/details/107303756