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)
一.什么是闭包? 概念性的我就不去百度了,感兴趣的可以自己去搜下,我自己的理解,闭包就是一个封装的包,相当于类的概念,把乱七八糟的的东西封装到一起,然后统一使用一个对象来调用,实现代码部分对外开放,部 ...
随机推荐
- 阅读nsq源码 ---初步架构设计图
- BZOJ_3514_Codechef MARCH14 GERALD07加强版_主席树+LCT
BZOJ_3514_Codechef MARCH14 GERALD07加强版_主席树+LCT Description N个点M条边的无向图,询问保留图中编号在[l,r]的边的时候图中的联通块个数. I ...
- 遥远的国度 bzoj3083
分析: 这个题一看就是裸的树剖... 唯一值得考虑的就是它的根一直在变化,我们可以这样想,如果假根在这个点的子树外,那么直接将这个点的子树作为答案区间,如果在子树内,则相对复杂,我们假设son为roo ...
- Android圆形头像,拍照后“无法加载此图片”的问题解决(适配Android7.0)
Feature: 点击选择拍照或者打开相册,选取图片进行裁剪最后设置为圆形头像. Problem: 拍好照片,点击裁剪,弹Toast"无法加载此图片". Solution: 在裁剪 ...
- 显著性检测(saliency detection)评价指标之sAUC(shuffled AUC)的Matlab代码实现
AUC_shuffled.m function [score,tp,fp] = AUC_shuffled(saliencyMap, fixationMap, otherMap, Nsplits, st ...
- HashMap 实现及原理
1.为什么用HashMap? HashMap是一个散列桶(数组和链表),它存储的内容是键值对(key-value)映射HashMap采用了数组和链表的数据结构,能在查询和修改方便继承了数组的线性查找和 ...
- java常用的框架介绍
一.SpringMVC http://blog.csdn.net/evankaka/article/details/45501811 Spring Web MVC是一种基于Java的实现了Web MV ...
- jdk源码阅读笔记-HashMap
文章出处:[noblogs-it技术博客网站]的博客:jdk1.8源码分析 在Java语言中使用的最多的数据结构大概右两种,第一种是数组,比如Array,ArrayList,第二种链表,比如Array ...
- KnockOut 绑定之foreach绑定
foreach绑定对于数组中的每一个元素复制一节标记语言,也就是html,并且将这节标记语言和数组里面的每一个元素绑定.当我们呈现一组list数据,或者一个表格的时候,十分有用. 如果你绑定的数组是一 ...
- MySQL · 引擎特性 · InnoDB崩溃恢复
前言 数据库系统与文件系统最大的区别在于数据库能保证操作的原子性,一个操作要么不做要么都做,即使在数据库宕机的情况下,也不会出现操作一半的情况,这个就需要数据库的日志和一套完善的崩溃恢复机制来保证.本 ...