欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-22 17:01:18
前端学习的总结,如果以后发现错误或有新的理解再继续补充。先写三个,函数的柯里化,级联函数,防抖与节流。1.函数的柯里化函数柯里化,我的理解是,用闭包的原理,将一部分只需要操作一次的操作进行缓存。比如:var getCurry= function (x) { x+=1; return function(y) { return x + y }};let curry=getCurry(1);curry(1);正如之前所总结的(原生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