Javascript - 高阶函数 & 闭包经典案例

高阶函数

定义

高阶函数是对其他函数进行操作的函数,它接受函数作为参数或者将函数作为返回值输出。在后端语言中就是把委托作为参数或者返回值的函数了 ,原理类似。

<script>
        //callback function
        function fn(callback) {
            //函数逻辑
            callback && callback();
        }

        //把function 作为返回值
        function fn2() {
            return function () { }
        }
    </script>

闭包

定义

闭包(closure)指有权访问另一个函数作用域中的变量的函数

  • 一个作用域可以访问另外一个函数的局部变量
  • 下面的例子中 fn外面的作用域可以访问fn内部的局部变量
  • 闭包的主要作用:延申了变量的作用范围
//closure

        function fn() {
            var num = 10;
            function fun() {
                console.log(num);
            }
            fun();
        }
        fn();
//closure

        function fn() {
            var num = 10;
            return function () {
                console.log(num);
            }
        }

在这里插入图片描述

后端语言也可以实现

public Delegate Test()
        {
            var b = 0;
            var result = new Func<string,string>((a) =>
            {
                Console.WriteLine(b+"\r\n");
                return a;
            });

            return result;
        }

闭包应用的案例

案例一:闭包实现索引显示,原理是作用域内的函数用了外部的变量,导致变量不能销毁。
下面的案例,可以使用闭包和自定义属性实现

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        //attribute 
        /* var lis = document.querySelectorAll('li');
        for (let i = 0; i < lis.length; i++) {
            lis[i].setAttribute('data-index', i);
            lis[i].onclick = function () {
                var index = this.getAttribute('data-index');
                console.log(index);
            }
        } */

        //closure
        var lis = document.querySelectorAll('li');
        for (let i = 0; i < lis.length; i++) {
            (function (index) {
                lis[index].onclick = function () {
                    console.log(index);
                }
            })(i);
        }
    </script>
</body>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值