JavaScript之闭包Closure

最新推荐文章于 2024-04-22 15:43:49 发布

JZJZY

最新推荐文章于 2024-04-22 15:43:49 发布

阅读量92

点赞数

文章标签： javascript 前端闭包 closure

本文链接：https://blog.csdn.net/weixin_43772533/article/details/107027485

版权

JS中特有现象，在一个函数内部又定义了一个函数，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥。

<script>
    //在一个函数内部又定义一个函数
    function f1() {
        var n = 99;

        function f2() { //只是定义函数，必须调用才会执行
            console.log(n); //在内部函数f2中可以访问到函数f1中的局部变量n
        }
        //f2();
        return f2; //返回函数f2
    }
    var fn = f1();
    fn();
</script>

在这里插入图片描述

如果内部函数使用外部函数的变量，在外部函数执行完成之前变量会有改变时，内部只能获取最后改变的值，无法获取定义时的值，就会产生闭包。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function doAdd() {
            for (var i = 1; i <= 5; i++) {
                var btn = document.createElement("input");
                btn.type = "button";
                btn.value = "按钮" + i;
                btn.onclick = function () {
                    console.log("点击了按钮" + i);
                };
                $("mydiv").appendChild(btn);
            }
        }

        function $(id) {
            return document.getElementById(id);
        }
    </script>
</head>

<body>
    <input type="button" value="向div中添加多个按钮" onclick="doAdd()">
    <div id="mydiv"></div>
</body>

</html>

在这里插入图片描述

解决方式：
不在函数内部定义函数，将函数定义在外面，在函数内部调用

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function doAdd() {
            for (var i = 1; i <= 5; i++) {
                $("mydiv").appendChild(createButton(i));
            }
        }

        function createButton(num) {
            var btn = document.createElement("input");
            btn.type = "button";
            btn.value = "按钮" + num;
            btn.onclick = function () {
                console.log("点击了按钮" + num);
            };
            return btn;
        }

        function $(id) {
            return document.getElementById(id);
        }
    </script>
</head>

<body>
    <input type="button" value="向div中添加多个按钮" onclick="doAdd()">
    <div id="mydiv"></div>
</body>

</html>

在这里插入图片描述

为元素附加属性，用来存储变量

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function doAdd() {
            for (var i = 1; i <= 5; i++) {
                var btn = document.createElement("input");
                btn.type = "button";
                btn.value = "按钮" + i;
                btn.number = i; //存储数据
                btn.onclick = function () {
                    console.log("点击了按钮" + this.number);
                };
                $("mydiv").appendChild(btn);
            }
        }

        function $(id) {
            return document.getElementById(id);
        }
    </script>
</head>

<body>
    <input type="button" value="向div中添加多个按钮" onclick="doAdd()">
    <div id="mydiv"></div>
</body>

</html>

在这里插入图片描述

JZJZY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之闭包Closure

JS中特有现象，在一个函数内部又定义了一个函数，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥。<script> //在一个函数内部又定义一个函数 function f1() { var n = 99; function f2() { //只是定义函数，必须调用才会执行 console.log(n); //在内部函数f2中可以访问到函数f1中的局部变量n } //f2();
复制链接

扫一扫