JavaScript之闭包Closure

标签: 前端自学  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>

在这里插入图片描述

版权声明:本文为weixin_43772533原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43772533/article/details/107027485

智能推荐

LeetCode(7 整数反转)

如题 这就不用分析了,直接依次取每位即可,难点就是个越界判断...

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编程的能...

猜你喜欢

动态调整docker容器cpu资源

目的:动态调整系统cpu核数后,如何在不停止容器服务的情况下,docker动态使用最新的CPU资源 事件由来:     1、在ucloud上购买了一台可以热升级的机器,热升级指的是动态更改系统cpu和内存资源     2、随着业务的扩展,发现cpu、内存负载过高,需要在不停止业务的情况下动态扩容,因此使用了ucloud提供的热升级服务,从4核12G扩容为8核...

用python itchat包 爬取微信好友头像形成矩形头像集

原创作品,转载请注明作者 abysscarry-袁杰丶 初学python,我们必须干点有意思的事!从微信下手吧! 头像集样例如下: 大家可以发朋友圈开启辨认大赛哈哈~ 话不多说,直接上代码,注释我写了比较多,大家应该能看懂 运行结果: ok!!!...

impala实现拉链表

1.文档目的         拉链表是针对数据仓库设计中表存储数据的方式而定义的,即是记录历史。记录一个事物从开始,一直到当前状态的所有变化的信息。传统数据仓库一般采用拉链的方式保留主数据(例如客户信息)的变化数据,采用这种设计方式的主要原因是减少数据冗余。这个需求在Hadoop中主要是有以下两种实现方式选择: 每天保留一份全量的切片数据。Hadoop平台由...

Codeforce 975E

E. Hag's Khashba time limit per test3 seconds memory limit per test256 megabytes inputstandard input outputstandard output Hag is a very talented person. He has always had an artist inside him but his...

Gradle基础知识

Gradle基础知识 Gradle是一个非常先进的项目构建工具,它使用了一种基于Groovy的领域特定语言(DSL)来声明项目配置,摒弃了传统基于XML(Ant和Maven)的各种繁琐配置。 Gradle作为Android的构建系统,主要作用是编译应用资源和源代码,将其打包成可供测试、部署、签署和分发的APK。 Android Studio使用Gradle这个高级构建工具包来自动化执行和管理构建流...