闭包的简单应用

最新推荐文章于 2024-10-16 17:24:41 发布

web修理工

最新推荐文章于 2024-10-16 17:24:41 发布

阅读量99

点赞数

分类专栏： JavaScript 文章标签： javascript echarts vue.js

本文链接：https://blog.csdn.net/qq_42374676/article/details/120668382

版权

JavaScript 专栏收录该内容

163 篇文章 2 订阅

订阅专栏

这篇博客介绍了JavaScript中的函数用法，包括将函数作为返回值创建闭包实现短暂存储，即时对象初始化以及惰性函数的概念。通过示例展示了如何使用闭包来保存状态，如何通过即时对象初始化来执行一次性操作，以及惰性函数如何在首次调用时确定其实际内容。重点探讨了这些技术在函数式编程和优化中的应用。

摘要由CSDN通过智能技术生成

页面打开使用闭包可以短暂存储在内存中


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13-函数作为返回值(计数器)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>

函数可以其他函数的返回值
计数器
<script>
    function func() {
        var a = 0;
        return function () {
            a ++;
            return a;
        }
    }

    var fun = func();
    console.log(fun()); // 1
    console.log(fun()); // 2
    console.log(fun()); // 3
    console.log(fun()); // 4
    console.log(fun()); // 5

</script>
</body>
</html>

及时化函数


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>15-即时对象初始化</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    即时 对象 初始化
    格式: ({init : function () {}}).init();
    <script>
        // echarts 就是这种类型    
        //    var dataObj = {
        //        name : 'zs',
        //        des : 'des',
        //        age : 20,
        //
        //        // 初始化的方法
        //        init : function () {
        //             // 数据的处理
        //            var res = this.name + this.des + "111";
        //            return res;
        //        }
        //    }
        //
        //    console.log(dataObj.init());


        var res1 = ({
            name: 'zs',
            des: 'des',
            age: 20,

            // 初始化的方法
            init: function () {
                // 数据的处理
                var res = this.name + this.des + "111";
                return res;
            }
        }).init();
        console.log(res1);


    </script>
</body>

</html>

惰性函数一


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16-自定义函数(惰性函数)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>

惰性函数:函数真正的内容需要执行一次才能确定,可以实现自我的更新
场合:需要做一次初始化的操作

注意点:
    1.更新前添加到函数上的属性,更新后访问不到
    2.把惰性函数赋值给一个变量,以变量的方式来调用,执行都是外面的函数
    3.把惰性函数赋值给对象的方法,以对象的方法来调用,执行都是外面的函数
<script>
    function func() {
        // 初始化操作
        console.log('func');

        func = function () {
            // 函数真正的内容
            console.log('func-func');
        }
    }

//    func(); // func
//    func(); // func-func
</script>

<script>
    function foo() {
        console.log('foo');
        foo = function () {
            console.log('foo-foo');
        }
    }

    foo.des = 'des';

//    console.log(foo.des); // des
//
//    foo();
//
//    console.log(foo.des); //undefined

</script>

<script>
    function foo() {
        console.log('foo');
        foo = function () {
            console.log('foo-foo');
        }
    }
//
//    foo();
//    foo();
//    var func = foo;
//    func(); // foo
//    func(); // foo
</script>

<script>
    function foo() {
        console.log('foo');
        foo = function () {
            console.log('foo-foo');
        }
    }

    var obj = {name : 'zs'};

    obj.func  = foo;

    obj.func(); // foo
    obj.func(); // foo
</script>
</body>
</html>

惰性函数二

function addEvent(type, element, fun) {
    if (element.addEventListener) {
        addEvent = function (type, element, fun) {
            element.addEventListener(type, fun, false);
        }
    }
    else if(element.attachEvent){
        addEvent = function (type, element, fun) {
            element.attachEvent('on' + type, fun);
        }
    }
    else{
        addEvent = function (type, element, fun) {
            element['on' + type] = fun;
        }
    }
    return addEvent(type, element, fun);
}

2、第二种是声明函数时就指定适当的函数。把嗅探浏览器的操作提前到代码加载的时候，在代码加载的时候就立刻进行一次判断，以便让addEvent返回一个包裹了正确逻辑的函数

 var addEvent = (function () {
    if (document.addEventListener) {
        return function (type, element, fun) {
            element.addEventListener(type, fun, false);
        }
    }
    else if (document.attachEvent) {
        return function (type, element, fun) {
            element.attachEvent('on' + type, fun);
        }
    }
    else {
        return function (type, element, fun) {
            element['on' + type] = fun;
        }
    }
})();