闭包，防抖、节流、函数柯里化

最新推荐文章于 2023-06-30 11:41:14 发布
最新推荐文章于 2023-06-30 11:41:14 发布
阅读量118 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54455551/article/details/124180942
版权

闭包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function fn(a){
            return function(){
                console.log(a)
            }
        }
        // 作用：防抖 节流 函数柯里化

        //好处
        //1.可以让一个变量长期驻扎在内存当中不被释放(缓存的建立 访问速度快)
        //2.避免全局变量的污染,和全局变量不同,闭包中的变量无法被外部使用
        // 3.私有成员的存在,无法被外部调用,只可以自己内部使用
    console.log(fn('hello'))//返回函数fn的返回值
    fn('hello')()// 传入实参，调用内部函数
    function fn1(){
        //里面的参数以及变量不会被回收
        let i = 0
        return function(){
            i++
            return i
        }
    }
    console.log(fn1())
    console.log(fn1()())
    console.log(fn1()())
    console.log(fn1()())
    let a = fn1()//调用一次 执行一次 i  0
    console.log()
    console.log(a()) //1
    console.log(a()) //2
    console.log(a()) //3
    </script>
</body>
</html>

防抖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 防抖 避免函数的重复使用 只执行一次
        function antishake(func,wait){
            let timer = null
            return function(){
                clearTimeout(timer)
                timer = setTimeout(()=>{
                    func()
                },wait)
            }
        }
        let antishake1 = antishake(function(){
            console.log('hello')
        },1000)
        document.querySelector('div').onclick = function(){
            antishake1()
        }
        
    </script>
</body>
</html>

节流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 防抖 避免函数的重复使用 只执行一次
        function antishake(func,wait){
            let timer = null
            return function(){
                clearTimeout(timer)
                timer = setTimeout(()=>{
                    func()
                },wait)
            }
        }
        let antishake1 = antishake(function(){
            console.log('hello')
        },1000)
        document.querySelector('div').onclick = function(){
            antishake1()
        }
        
    </script>
</body>
</html>

 函数柯里化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 函数柯里化 其实就是函数颗粒化，将一个函数变成一个个颗粒可以组装
        // 这里面的多个参数 将其变成一个个的函数来传递这个参数
        function fnSum(a,b,c){//求和函数
            return a+b+c
        }
        console.log(fnSum.length)//fnSum.length表示形参的个数
        //简单柯里化 他就是使用了一个函数来改造原本的函数
        function curry(fn){
            return function(a){
                return function(b){
                    return function(c){
                        return fn(a,b,c)
                    }
                }
            }
        }
        //调用 避免了多余的无用参数传递
        let fnCurry = curry(fnSum) //函数
        console.log(fnCurry(1)(2)(3));//6
        //改进柯里化函数
        function curry1(fn){
            //接收一个后面的参数 除了fn的参数 伪数组执行了数组的方法，通过改变this指向让伪数组使用数组方法
            let args = Array.prototype.slice.call(arguments,1)
            return function(){
                let newArg = args.concat(Array.from(arguments)) //将内部函数的参数和外部的参数合并
                return fn.apply(this,newArg) //将内部函数自动指向 传入所有的参数
                // return fn(...newArg)
                // this就是function(){}自动执行function 并且将参数传入
            }
        }
        let fn2 = curry1(fnSum,1) //函数
        console.log(fn2(2,3,5)); //6
        // console.log(fn2(2)(3)); //错误 我们现在只套了俩层

        //改进柯里化函数
        function curry2(fn){
                //接收一个后面的参数 除了fn的参数
                let args = Array.prototype.slice.call(arguments,1)
                return function(){
                    let newArg = args.concat(Array.from(arguments)) //将内部函数的参数和外部的参数合并
                    if(newArg.length < fn.length){ //参数没有到三个 fn.length获取传递的函数的参数个数
                        return curry2.call(this,fn,...newArg) //又套了一个function 
                        // newArg.unshift(fn)
                        // return curry2.apply(this,newArg)
                    }else{
                        return fn.apply(this,newArg) //将内部函数自动指向 传入所有的参数
                        // return fn(...newArg)
                    } 
                }
            }
        let fn3 = curry2(fnSum) //函数
        console.log( fn3(1,2,3,4,5));
        console.log( fn3()()()(1)(2)(5) );//少一个参数 返回funtion 效率更高  可读性高
        console.log( fn3());//少一个参数 返回funtion 效率更高  可读性高
        console.log( fn3()()(1));//少一个参数 返回funtion 效率更高  可读性高

        let fn4 = fn3(1)(3)
        console.log(fn4()(6))
    </script>
</body>
</html>

防抖：多次调用时，在wait时间外执行一次（在wait时间内的多次执行只执行一次，会忽略掉前面的调用，只执行最后一次）

节流：在wait时间内只执行一次，执行第一次调用的

 

九九七七
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Scala高阶函数，闭包，颗粒化，集合
snail_gesture的博客
01-07 2967
简介： 本篇文章主要是对Scala高阶函数，闭包，颗粒化，集合讨论。 Scala函数式编程 Scala中的函数的可以不依赖类或则借口，独立存在，甚至函数可以作为参数传递，可以直接赋值给变量。 Scala的函数式编程使得算法的设计可以更高效更精简，因为函数式是依赖人们的思考 方式构建的。 Scala的函数式编程是的开发代码行数更少。 Spark中的代码几乎所有都是用函数式编写的，集合的函
js代码-011 节流防抖,函数珂里化,偏函数
07-16
在JavaScript编程中，有三个非常重要的概念：节流（Throttling）、防抖（Debouncing）以及函数柯里化（Currying）和偏函数（Partial Application）。这些技术主要用于优化性能，提高用户体验，并且在处理事件监听、...
闭包与柯里化
weixin_30512089的博客
02-07 107
闭包和柯里化都是JavaScript经常用到而且比较高级的技巧，所有的函数式编程语言都支持这两个概念，因此，我们想要充分发挥出JavaScript中的函数式编程特征，就需要深入的了解这两个概念，闭包事实上更是柯里化所不可缺少的基础。 一、柯里化的概念 在计算机科学中，柯里化是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结...
闭包 柯里化
w_cyj的博客
08-13 174
闭包 什么是闭包 闭包是指有权访问另一个函数作用域中的变量的函数， 创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量 function fn1(){ var a=1; // 因为返回的函数被存储在全局变量中， // 并且这个返回的函数使用这个a的局部变量，因此a被保存在堆中 //闭包会产生内存泄漏 return function(){
go代码示例：使用闭包实现函数柯里化
学亮编程手记
06-11 199
通过使用闭包实现柯里化，我们可以事先部分应用函数的参数，生成一个新的函数，后续只需要传入剩余的参数即可，使得代码更加灵活和可复用。函数是一个闭包，它返回一个匿名函数。该匿名函数接收一个参数，并将该参数与。函数是一个普通的函数，用于接收两个参数并返回它们的和。函数的参数进行相加，并返回结果。作为第一个参数传递给。作为第二个参数传递给。
理解闭包、防抖和节流
yue200403的博客
04-07 1372
闭包是一种形式，即函数嵌套函数。其涉及两个原理，一个是全局与局部作用域；二是浏览器垃圾回收机制；在嵌套函数中，内部函数可以访问外部函数定义的变量，而被引用的变量不会被垃圾回收机制回收，可用于实现一个纯净的全局私有变量。
前端必会编程题.doc
04-09
文件中的 `curryAdd` 函数展示了如何实现柯里化的加法，每次调用都会累加传入的参数，并将结果保存在闭包中，直到所有参数都被处理，最后可以通过 `.value` 访问结果。 5. **千分位分隔符**：`splitThous` 函数用于...
js函数扩展
03-28
这篇博客文章（链接：https://ninnd.iteye.com/blog/1168733）可能涵盖了诸如函数柯里化、高阶函数、闭包、以及箭头函数等高级概念。 1. **函数柯里化**：柯里化是一种将接受多个参数的函数转换为一系列接受单个...
javascript函数详解!
02-24
以上只是JavaScript函数特性的一部分，JavaScript函数还有更多高级特性和用途，如函数组合、柯里化、节流、防抖等。深入理解和熟练掌握这些知识点，将有助于你更好地编写高效、可维护的JavaScript代码。对于初学者来...
程序员面试刷题的书哪个好-GoGoGo:面试经历总结
07-07
防抖节流，函数柯里化，计时器，模块化。 async/await 和 Promise 实现，await 返回什么 输入 url 到返回内容发生了什么 跨域方式，图片跨域，cookie 跨域 怎么给数据结构添加迭代器 给数据结构添加 [Symbol....
高阶函数，闭包的应用：函数柯里化（function currying）
蓝冰凌的博客
03-31 272
函数柯里化（function currying） currying 又称部分求值。一个 currying 的函数首先会接受一些参数，接受了这些参数之后， 该函数并不会立即求值，而是继续返回另外一个函数，刚才传入的参数在函数形成的闭包中被保存起来。待到函数被真正需要求值的时候，之前传入的所有参数都会被一次性用于求值。 实例 假设我们要编写一个计算每月开销的函数。每天结束后我们都会记录并计算到今天为止花掉的钱。但我们其实并不太关心每天花掉了多少钱，而只想知道到月底的时候会花掉多少钱。也就是说，实际上只需要在月底
groovy闭包科里化参数
weixin_30784945的博客
01-07 102
科里化闭包：带有预先绑定形参的闭包。在预先绑定一个形参之后，调用闭包时就不必为这个形参提供实参了。有助于去掉方法调用中的冗余重复。 使用curry方法科里化任意多个参数 使用rcurry方法科里化后面的参数 使用ncurry方法科里化中间参数 简单例子： /** * Created by Jxy on 2019/1/7 9:12 * 闭包科里化参数 */ tellFortun...
scala详细笔记(十)-scala高级语法之柯里化和闭包
HANG.NIAN
06-27 2690
1 柯力化 1.1 简介 语法 : 函数有多个参数列表 柯里化(Currying)指的是把原来接受多个参数的函数变换成接受一个参数的函数过程，并且返回接受余下的参数且返回结果为一个新函数的技术。所以柯力化的现象是 : 函数名()() 意义: 方便数据的演变, 后面的参数可以借助前面的参数推演 , foldLeft的实现 有多个参数列表 的函数就是柯里化函数，所谓的参数列表就是使用小括号括起来的函数参数列表 curry化最大的意义在于把多个参数的function等价转化成多个单参数funct..
闭包实现函数柯里化，js实现
最新发布
ta_huang的博客
06-30 270
柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术即函数可以接收单个或多个参数，并按照单个参数进行处理，以下是调用例子。
闭包、柯里化
weixin_44175290的博客
04-05 659
闭包 什么是闭包？ 闭包就是函数套函数，执行外部函数时返回内部函数，并且内部函数有权调用外部函数作用域中局部变量。 使用闭包会产生私有变量的存在，解决变量污染。 当引用的js文件中变量名相同时，这种称之为变量污染 函数中的局部变量当函数执行完成后，局部变量就会被销毁，垃圾回收机制，将不需要使用的数据进行清除，如果不清除就会造成内存泄露 柯里化 接收多个参数的函数变换成接收单一参数的函数，嵌套返回直到所有参数都被使用并返回最终结果 换句话说就是将函数的调用方式从fn(1,2,3)转变成fn
闭包和简单柯里化
q1553048604的博客
02-10 125
可以看到，b()通过fn()的返回值获取到了fn()里面的a并对其进行操作。这样就可以把多个形参的函数写成一个形参，再利用箭头函数简化可以写成。当需要对参数做不同的计算的时候，只需要改num函数就行。利用这个概念实现自动柯里化。上面这个代码可以写为。
高阶函数 和 函数的颗粒化
qq_41851047的博客
11-23 1490
1: 高阶函数：如果一个函数符合下面两个规范中的其中一个，就称为高阶函数。 （1）若A函数，接受的参数是一个函数，那么A就是死高阶函数。 （2）若A函数，调用的返回值依然是一个函数，那么A就是死高阶函数。 如常见：Promise ，setTimeout ，map，reduce，filter，sort; （1）Promise var myFirstPromise = new Promise(function(resolve, ...
闭包详解，柯里化的含义及操作方法
阿牛哥的博客
08-10 311
闭包详解，柯里化的含义及操作方法
闭包与柯里化函数
01-12 2835
闭包 作用域 要理解闭包，首先必须理解Javascript特殊的变量作用域。 变量的作用域无非就是两种：全局变量和局部变量。 Javascript语言的特殊之处， 就在于函数内部可以直接读取全局变量。我们有时候需要得到函数内的局部变量值。。 因此我们可以用函数套函数，并返回里面的函数来访问外层函数内部的变量， 什么是闭包 闭包是指有权访问另一个函数作用域中的变量的函数， 创建闭包的最常见的方式就是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值