vue源码cached高阶函数解析

时间：2021-08-24 16:15:24

1、源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>vue源码cached高阶函数</title>

    </head>

    <body>

        <script type="text/javascript">

            function cached(fn) {

                console.log(fn,'fn')

                const cache = Object.create(null)

                // 返回函数 函数中使用了外部的cache ----闭包

                return (function cachedFn(str) {

                    console.log(str,'str');

                    const hit = cache[str]

                    console.log(hit, 'hit')

                    return hit || (cache[str] = fn(str))

                })

            }

            var capitalize = cached(function(str) {

                return str.charAt(0).toUpperCase() + str.slice(1)

            });

            console.log(capitalize,'capitalize')

            console.log(capitalize('abc'), '第一次')

            console.log(capitalize('abc'), '第二次')

        </script>

    </body>

</html>

2、cached函数，输入参数为函数，返回值为函数。同时使用了闭包。

相关文章