【JavaScript闭包】对JavaScript中闭包的深入理解

admin · 发表于 2018-7-28 15:24:41

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // <!--// 块级作用域： -->
    // 限制变量或者函数的作用域


    // 【闭包】：在函数内定义的变量，外界无法访问！！！

    // 如何访问？？？
    (function () {
        // 立即函数+闭包【沙盒模式+沙箱模式】
    })();



    // 这个函数是专门用来获取a的数值的（唯一性）,  这个函数实际上返回的是一个函数
    function f() {
        var a = Math.random();
        // 通过返回一个函数的方式返回一个a
        return function () {
            return a;
        };
    }

    // 只要调用了一次f（）函数，内存里面就只有一个a变量
    var foo = f();


    // 每次执行foo这个函数就可以得到我想要的变量
    var  n = foo();
    console.log(n);
    console.log(foo());
    n = foo();
    console.log(n);
    console.log(f());


    // 对闭包的理解加强
    function getA() {
        var a = Math.random();
        return a;
    }
    // 要想得到a这个变量，我只能每次与调用一下getA()函数，但是每次拿到的结果竟然不同？？？
    var a = getA();
    console.log(a);
    a = getA();
    console.log(a);
    // 解决方案：直接返回一个函数即可
    function getANew() {
        var a = Math.random();
        return function () {
            return a;
        }
    }
    // 1.先把获取到的函数存起来
    var func = getANew();
    var b = func();
    console.log(b);
    b = func();
    console.log(b);
</script>
</body>
</html>

小木鱼 · 发表于 2018-7-28 16:00:34

[JavaScript] 纯文本查看 复制代码

// 通过返回一个对象来获取函数内部的变量(可以通过对象操作多个数据和变量)
    function getVariables() {
        var a = Math.random();
        var b = Math.random();
        var c = Math.random();

        // 直接返回一个对象， 对象里面返回一个值
        return  {
            a : function () {
                return a;
            },
            set_A : function(v){
                a = v;
            },
            b : function(){
                return b;
            },
            set_B : function(v){
                b = v;
            },
            c : function(){
                return c;
            },
            set_C : function (v) {
                c = v;
            }
        }
    }

    // 1. 获取函数中的变量,直接获取一个对象，这个函数返回的就是一个对象
    var data = getVariables();
    var a = data.a();
    var b = data.b();
    var c = data.c();
    console.log(a, b, c);
    // 2.修改变量的值
    data.set_A(10);
    data.set_B(20);
    data.set_C(30);
    console.log(a, b, c);

    // 3. 要想重新获取到内部的变量，需要把函数再次执行一次
    var a = data.a();
    var b = data.b();
    var c = data.c();
    console.log(a, b, c);

    // 4. 闭包的应用场景：闭包可以一些数据的特性
    function createCache() {
        var keys = [];
        function cache(key, value) {
            if (keys.push(key + '') > 100){
                delete cache[keys.shift()];
            }
            return (cache[key + ' '] = value);
        }
        return cache;
    }

		自动登录	找回密码
密码			立即注册

[技术分享] 【JavaScript闭包】对JavaScript中闭包的深入理解

相关帖子

最佳新人

活跃会员

热心会员

推广达人

宣传达人

灌水之王

突出贡献

优秀版主

荣誉管理

论坛元老