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

最新推荐文章于 2022-07-23 09:15:01 发布

qinzheng_chen

最新推荐文章于 2022-07-23 09:15:01 发布

阅读量152

点赞数

文章标签： js javascript 函数闭包

本文链接：https://blog.csdn.net/qinzheng_chen/article/details/116794970

版权

高阶函数

定义

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

<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>

qinzheng_chen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Javascript - 高阶函数 & 闭包经典案例

高阶函数定义高阶函数是对其他函数进行操作的函数，它接受函数作为参数或者将函数作为返回值输出。在后端语言中就是把委托作为参数或者返回值的函数了，原理类似。<script> //callback function function fn(callback) { //函数逻辑 callback && callback(); } //把function 作为返回值
复制链接

扫一扫