JavaScript之闭包Closure

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>

在这里插入图片描述

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

智能推荐

Caused by: java.rmi.ConnectIOException: error during JRMP connection establishment; nested exception

启动RMI报如下错误：最后发现是端口冲突造成的，当时用的5003端口启动服务端的RMI刚好和本地的一个服务端口冲突。输入netstat -aon|findstr "5003"查询它的pid为3056 继续输入tasklist|findstr "3056"，查看是哪个进程或者程序占用了5003端口，结果是：magentproc.exe 找到PID后可以直接...

【LeetCode（Java） - 322】零钱兑换

文章目录 1、题目描述 2、解题思路 3、解题代码 1、题目描述 2、解题思路定义 dp[i] 表示对于组成金额 i 的最少硬币个数。如果方案存在，那么至少有一个硬币至少出现了一次：如果是第 0 个硬币出现了一次，则：dp[i] = dp[i-coins[0]] + 1 如果是第 1 个硬币出现了...

在Visual Studio 2013中配置Entity Framework使用MySQL

环境使用的软件及版本 - Microsoft Visual Studio Ultimate 2013 (版本 12.0.40629.00 Update 5) - Microsoft.Net Framework 版本 4.6.01055 - MySQL版本： 5.6.17 步骤 1. 创建空的MVC项目 2. 安装扩展 3. 在数据库中建立对应的表必须在数据库内先新建表，否则asp.net mv...

Python才是世界上最好的言语，php，java靠边站

伟大的入门编程语言有什么特征呢？或者换一种方式问，“当我们教他们编程时，应该给予他们什么？”对于成年人和青少年学生，我认为以下五点非常重要。学生从入门语言获得的五样东西非常棒的首次体验，就像一本书的第一页，首先需要“入迷”，学习新知识不可避免的会遇到挫折，但要有持续的热情和好奇心，这对于那些从未接触过编码的年轻人来说是至关重要的； Web编程的能...

JavaScript之闭包Closure

智能推荐

猜你喜欢