JavaScript一看就懂(2)闭包
认识闭包之前需要先了解作用域,如果你对作用域还没有足够了解,请移步JavaScript一看就懂(1)作用域
什么是闭包?
我们可以先简单认为:一个函数a定义在另一个函数b里面,这个函数a就是闭包:
function b() {
...
function a() { //闭包
...
}
...
}
另外,函数a能够直接读取函数b的变量x:
function b() {
var x = 1;
function a() {
alert(x);
}
a();
}
b(); //1
这其实不是什么新鲜事,这是由作用域决定的。
上面的代码只是为了简单地认识闭包的组成部分,但却不是真正意义上的闭包,下面才是正宗长沙臭豆腐,哦不,正宗闭包:
function b() {
var x = 1;
function a() {
alert(x++);
}
return a;
}
var func = b();
func(); //1
func(); //2
func(); //3
b()这次没有直接调用a(),而是返回了函数a给变量func,而func()才是真正调用a()的地方,等于是跳出了原来的圈子在外围被调用了,而函数a竟然能神奇地记住变量x,这就是闭包的魔力。
所以什么是闭包?结合上面的代码来解释的话:
闭包就是无论函数a在哪里执行,它都能联系上变量x
纯字面上来理解的话:
一个函数没有在它定义时所在的作用域里执行,但它仍能访问那个作用域里的变量
说人话那就是:
函数记得它周围发生了什么
也就是书上说的:
函数以及它所连接的周围作用域中的变量即为闭包
闭包:使得函数可以维持其创建时所在的作用域。如果一个函数离开了它被创建时的作用域,它还是会与这个作用域以及其外部的作用域的变量相关联
闭包就是函数能够记住并访问它的词法作用域,即使当这个函数在它的词法作用域之外执行时
闭包就是当一个函数即使是在它的词法作用域之外被调用时,也可以记住并访问它的词法作用域
看看哪个说法好理解就拿来对着代码多揣摩几遍,不信你不懂
闭包有什么用?
1.回调
我们其实经常用到闭包,可能自己都不知道,比如下面这个点击按钮获取验证码的例子:
function countDown(){
...
document.getElementById('getCode').onclick = function(){ //闭包
...
};
}
页面加载完成时,获取验证码的按钮被绑定了一个点击回调事件(没有执行),当用户点击时,才真正被执行
完整代码:
<!DOCTYPE html>
<html lang="zh-cn">
<head></head>
<body>
<button type="button" id="getCode">获取验证码</button>
<script>
countDown(9);
function countDown(time_wait){
time_wait = time_wait || 60; //等待时间
var time_left = time_wait; //剩余等待时间
document.getElementById('getCode').onclick = function(){ //闭包
var btn = this;
btn.disabled = true;
btn.innerHTML=time_left--;
var count = setInterval(function(){ //闭包
if(time_left<1){
btn.disabled = false;
btn.innerHTML="获取验证码";
time_left = time_wait;
clearInterval(count);
}else{
btn.innerHTML=time_left--;
}
},1000);
};
}
</script>
</body>
</html>
当用户点击按钮时,执行了这个回调函数并且它能够读取到外围的time_wait和time_left变量。
细心的朋友可能已经发现这里出现两个闭包了,一个是onclick,还有一个是setInterval定时函数。
2.面向对象
当然还有一个更重要的原因需要它,那就是OO,把上面发送验证码的代码改造一下变成面向对象风格
var c1 = CountDown(document.getElementById('getCode'), 5);
c1.run();
function CountDown(btn, time_wait) {
time_wait = time_wait || 60;
var time_left = time_wait; //剩余等待时间
function resetBtn(){
btn.disabled = false;
btn.innerHTML="获取验证码";
}
function run(){
btn.onclick = function(){
btn.innerHTML=time_left--;
btn.disabled = true;
var count = setInterval(function(){
if(time_left<1){
resetBtn();
time_left = time_wait;
clearInterval(count);
}else{
btn.innerHTML=time_left--;
}
},1000);
};
}
//相当于公共方法
return {
run: run
};
}
只有在return返回的对象里面的run方法才能对外服务,而resetBtn()相当于是私有方法
所以回过头来看问题,为什么要用闭包?
- 回调(setTimeout、setInterval、onclick...)
- 面向对象
闭包会带来什么问题?
1.循环里的闭包
<!DOCTYPE html>
<html lang="zh-cn">
<head></head>
<body>
<input type="button" id="btn1" value="1" />
<input type="button" id="btn2" value="2" />
<input type="button" id="btn3" value="3" />
<script>
window.addEventListener("load", function() {
for (var i = 1; i < 4; i++) {
var btn = document.getElementById("btn" + i);
btn.onclick = function() {
alert(i);
};
}
});
</script>
</body>
</html>
乍一看感觉就是对应地弹出1,2,3,但现实是无论你点击哪个按钮,都会弹出4,因为onclick绑定的函数是个闭包,页面加载后for循环开始执行,当你点击按钮的时候,for循环已经执行完了,此时i值为4,而闭包拿到的i值当前的i值,而不是循环中的i值,所以弹出的都是4。
要解决这个问题,可以把打印的代码提炼到另一个函数里面,这样就会产生一个新的作用域,从而避开闭包带来的共享:
function show(i){
return function(){
alert(i);
}
}
window.addEventListener("load", function() {
for (var i = 1; i < 4; i++) {
var btn = document.getElementById("btn" + i);
btn.onclick = show(i);
}
});
或者用立即执行函数表达式(IIFE):
window.addEventListener("load", function() {
for (var i = 1; i < 4; i++) {
var btn = document.getElementById("btn" + i);
btn.onclick = (function(i) {
return function(){
alert(i);
}
}(i));
}
});
当然还有一种更牛逼的方式:
window.addEventListener("load", function() {
for (let i = 1; i < 4; i++) {
var btn = document.getElementById("btn" + i);
btn.onclick = function() {
alert(i);
};
}
});
2.构造器
方法应该定义到对象的原型,而不要定义到对象的构造器中。原因是这将导致每次对象实例化时,方法都会被重新定义一次。
function User(name) {
this.name = name;
this.getName = function() {
return this.name;
};
}
改成如下,继承的原型可以为所有实例共享:
function User(name) {
this.name = name;
}
User.prototype.getName = function() {
return this.name;
};
参考资料
- 阮一峰>学习Javascript闭包
- MDN>Web技术文档>JavaScript>闭包
- JavaScript Closures Demystified
- JavaScript for PHP Developers
- 深入理解JavaScript
- secrets of javascript closures
- You Don't Know JS
JavaScript一看就懂(2)闭包的更多相关文章
- JavaScript一看就懂(1)作用域
函数级作用域 1.函数外声明的变量为全局变量,函数内可以直接访问全局变量: var global_var = 10; //全局变量 function a(){ alert(global_var); / ...
- JavaScript一看就懂(3)数组
定义数组 var a = [1, 2, 3]; typeof a; //"object", 数组是对象 a.length; //数组长度 相关操作 a[0]; //下标访问 a.p ...
- 一篇文章看懂JS闭包,都要2020年了,你怎么能还不懂闭包?
壹 ❀ 引 我觉得每一位JavaScript工作者都无法避免与闭包打交道,就算在实际开发中不使用但面试中被问及也是常态了.就我而言对于闭包的理解仅止步于一些概念,看到相关代码我知道这是个闭包,但闭包 ...
- 每个JavaScript工程师都应懂的33个概念
摘要: 基础很重要啊! 原文:33 concepts every JavaScript developer should know 译文:每个 JavaScript 工程师都应懂的33个概念 作者:s ...
- 每个 JavaScript 工程师都应懂的33个概念
简介 这个项目是为了帮助开发者掌握 JavaScript 概念而创立的.它不是必备,但在未来学习(JavaScript)中,可以作为一篇指南. 本篇文章是参照 @leonardomso 创立,英文版项 ...
- 一看就懂的ReactJs入门教程(精华版)
一看就懂的ReactJs入门教程(精华版) 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和 ...
- 读《你不知道的JavaScript(上卷)》后感-作用域闭包(二)
github原文 一. 序言 最近我在读一本书:<你不知道的JavaScript>,这书分为上中卷,内容非常丰富,认真细读,能学到非常多JavaScript的知识点,希望广大的前端同胞们, ...
- 【译】学习JavaScript中提升、作用域、闭包的终极指南
这似乎令人惊讶,但在我看来,理解JavaScript语言最重要和最基本的概念是理解执行上下文.通过正确学习它,你将很好地学习更多高级主题,如提升,作用域链和闭包.考虑到这一点,究竟什么是"执 ...
- Jquery和Javascript 实际项目中写法基础-闭包 (2)
一.什么是闭包? 概念性的我就不去百度了,感兴趣的可以自己去搜下,我自己的理解,闭包就是一个封装的包,相当于类的概念,把乱七八糟的的东西封装到一起,然后统一使用一个对象来调用,实现代码部分对外开放,部 ...
随机推荐
- go语言nsq源码解读六 tcp.go、tcp_server.go
本篇讲nsqlookupd中tcp.go.tcp_server.go tcp_server.go位于util目录下. 12345678910111213141516171819202122232425 ...
- golang实现权重轮询调度算法
package main import ( "fmt" "time" ) var slaveDns = map[int]map[string]interface ...
- 学习ASP.NET Core Razor 编程系列十——添加新字段
学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...
- SQL数据库的一些操作
--以 MySQL为例 //登陆 mysql -u root -p //创建一个名为test_lib的数据库 CREATE DATABASE test_lib //删除一个名为test_lib的数据库 ...
- 深入理解数据库磁盘存储(Disk Storage)
数据库管理系统将数据存储在磁盘.磁带以及其他的裸设备上,虽然这些设备的访问速度相比内存慢很多,但其非易失性和大容量的特点使他们成为数据存储的不二之选. 本文主要讨论大型数据库产品的磁盘存储内部结构,这 ...
- 434个H5游戏源码
各种类型HTML5游戏,界面和JS均可供项目参考 下面是下载地址
- FOFA爬虫大法——API的简单利用
FOFA是一款网络空间搜索引擎,它通过进行网络空间测绘,帮助研究人员或者企业迅速进行网络资产匹配,例如进行漏洞影响范围分析.应用分布统计.应用流行度等. 何为API?如果你在百度百科上搜索,你会得到如 ...
- com.netflix.discovery.shared.transport.TransportException: Cannot execute request on any known server 报错问题
com.netflix.discovery.shared.transport.TransportException: Cannot execute request on any known serve ...
- with管理文件操作上下文
目录 with管理文件操作上下文(掌握) with管理文件操作上下文(掌握) 之前我们使用open()方法操作文件,但是open打开文件后我们还需要手动释放文件对操作系统的占用.但是其实我们可以更方便 ...
- 看板记录工具wekan
wekan 1. 功能 看板工具 2. 安装 环境: centos7.4 安装链接 snap方式 安装脚本(root用户) #!/bin/bash yum makecache fast yum ins ...