Javascript closure 闭包应用的两个场景

2024-04-10 07:48

本文主要是介绍Javascript closure 闭包应用的两个场景,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

场景

1. 异步(Async)

for(var i=0;i<5;i++){setTimeout(function(){console.log(i);},100);
}

输出:

5
5
5
5
5

闭包写法

for(var i=0;i<4;i++){setTimeout((function(i){console.log(i);})(i),100);
}

for(var i=0;i<5;i++){setTimeout(fun(i),100);
}
function fun(i){console.log(i);
}

输出:

0
1
2
3
4


2. 避免命名空间污染 (namespace)

lib/a.js

var i = 111;
alert(i);
function a() {alert('Hello');
}
lib/b.js

var i = 222;
alert(i);
function a() {alert(i);
}
index.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="lib/a.js"></script><script src="lib/b.js"></script>
</head>
<body><button οnclick="a()">a</button>
<button οnclick="b()">b</button></body>
</html>

运行index.html

输出

1. 111
2. 222

点击a按钮,输出222.

点击a按钮,输出222.


闭包写法

lib/a.js

function a() { var i = 111;function fun1() { alert(i); }return {fun1: fun1};
}
a = a();

lib/b.js

function b() { var i = 222;return function() { alert(i); };
}
var b = b();

index.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="lib/a.js"></script><script src="lib/b.js"></script>
</head>
<body><button οnclick="a.fun1()">a</button>
<button οnclick="b()">b</button></body>
</html>

运行index.html

点击a按钮,输出111.

点击a按钮,输出222.

实现注意

1. 对于闭包中使用的的外部变量, 通过Scope chain 往上找,找到为止(scope chain just for function & static)

2. 注意this,this依赖运行上下文(dynamic)

Source code

git:https://github.com/tianxia1221/Sample.git (folder: javascript_closure)

这篇关于Javascript closure 闭包应用的两个场景的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/890468

相关文章

什么是 Java 的 CyclicBarrier(代码示例)

《什么是Java的CyclicBarrier(代码示例)》CyclicBarrier是多线程协同的利器,适合需要多次同步的场景,本文通过代码示例讲解什么是Java的CyclicBarrier,感... 你的回答(口语化,面试场景)面试官:什么是 Java 的 CyclicBarrier?你:好的,我来举个例

Java使用Mail构建邮件功能的完整指南

《Java使用Mail构建邮件功能的完整指南》JavaMailAPI是一个功能强大的工具,它可以帮助开发者轻松实现邮件的发送与接收功能,本文将介绍如何使用JavaMail发送和接收邮件,希望对大家有所... 目录1、简述2、主要特点3、发送样例3.1 发送纯文本邮件3.2 发送 html 邮件3.3 发送带

Java实现数据库图片上传功能详解

《Java实现数据库图片上传功能详解》这篇文章主要为大家详细介绍了如何使用Java实现数据库图片上传功能,包含从数据库拿图片传递前端渲染,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、前言2、数据库搭建&nbsChina编程p; 3、后端实现将图片存储进数据库4、后端实现从数据库取出图片给前端5、前端拿到

Java实现将byte[]转换为File对象

《Java实现将byte[]转换为File对象》这篇文章将通过一个简单的例子为大家演示Java如何实现byte[]转换为File对象,并将其上传到外部服务器,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言1. 问题背景2. 环境准备3. 实现步骤3.1 从 URL 获取图片字节数据3.2 将字节数组

Java捕获ThreadPoolExecutor内部线程异常的四种方法

《Java捕获ThreadPoolExecutor内部线程异常的四种方法》这篇文章主要为大家详细介绍了Java捕获ThreadPoolExecutor内部线程异常的四种方法,文中的示例代码讲解详细,感... 目录方案 1方案 2方案 3方案 4结论方案 1使用 execute + try-catch 记录

SpringBoot接收JSON类型的参数方式

《SpringBoot接收JSON类型的参数方式》:本文主要介绍SpringBoot接收JSON类型的参数方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、jsON二、代码准备三、Apifox操作总结一、JSON在学习前端技术时,我们有讲到过JSON,而在

Spring-AOP-ProceedingJoinPoint的使用详解

《Spring-AOP-ProceedingJoinPoint的使用详解》:本文主要介绍Spring-AOP-ProceedingJoinPoint的使用方式,具有很好的参考价值,希望对大家有所帮... 目录ProceedingJoinPoijsnt简介获取环绕通知方法的相关信息1.proceed()2.g

Spring Security注解方式权限控制过程

《SpringSecurity注解方式权限控制过程》:本文主要介绍SpringSecurity注解方式权限控制过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、摘要二、实现步骤2.1 在配置类中添加权限注解的支持2.2 创建Controller类2.3 Us

Spring MVC跨域问题及解决

《SpringMVC跨域问题及解决》:本文主要介绍SpringMVC跨域问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录跨域问题不同的域同源策略解决方法1.CORS2.jsONP3.局部解决方案4.全局解决方法总结跨域问题不同的域协议、域名、端口

SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法

《SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法》本文主要介绍了SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法,具有一定的参考价值,感兴趣的可以了解一下... 目录方法1:更改IDE配置方法2:在Eclipse中清理项目方法3:使用Maven命令行在开发Sprin