vue源码cached高阶函数解析

时间:2023-02-13 18:27:22

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函数,输入参数为函数,返回值为函数。同时使用了闭包。