前端学习总结-原生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