详解JavaScript作用域 闭包


Posted in Javascript onJuly 29, 2020

JavaScript闭包,是JS开发工程师必须深入了解的知识。3月份自己曾撰写博客《JavaScript闭包》,博客中只是简单阐述了闭包的工作过程和列举了几个示例,并没有去刨根问底,将其弄明白!

现在随着对JavaScript更深入的了解,也刚读完《你不知道的JavaScript(上卷)》这本书,所以乘机整理下,从底层和原理上去刨一下。

JavaScript并不具有动态作用域,它只有词法作用域。词法作用域是在写代码或者说定义时确定的,而动态作用域是在运行时确定的。了解闭包前,首先我们得知道什么是词法作用域(作用域是由书写代码时函数声明的位置来决定的)。

一、何为闭包

示例1:

function foo(){
	var a = 2;
	function bar(){
		console.log(a);
	}
	return bar;
}
var baz = foo();
bzz(); //2

在foo()执行后,通常认为垃圾回收机制会将foo()的整个内部作用域都被销毁;而闭包可以阻止这样事情发生,让其内部作用域依然存在。因为bar()处于foo()内部,它拥有涵盖foo()作用域的闭包,使得该作用域能够一直存活,以供bar()在之后任何时间进行引用。

bar()依然持有对该作用域的引用,而这个引用就叫作闭包。

简言之:当函数可以记住并访问所在的词法作用域,即使函数是在当前词法作用域之外执行,这时就产生了闭包。

示例2:

无论使用何种方式对函数类型的值进行传递,当函数在别处被调用时都可以观察到闭包。

function foo(){
	var a = 2;
	function baz(){
		console.log(a);
	}
	bar(baz);
}

function bar(fn){
	fn();	// 这就是闭包
}

示例3:

将一个内部函数(timer)传递给setTimeout。timer具有涵盖wait()作用域的闭包,保有对变量message的引用。

wait()执行1000毫秒后,它的作用域并不会消失,timer依然保有wait()作用域的闭包。

function wait(message){
	setTimeout( function timer(){
		console.log(message);
	},1000);
}
wait("Hello,ligang");

示例4:

下述activator()具有涵盖setupBot()作用域的闭包!

function setupBot(name, selector){
	$(selector).click(function activator(){
		console.log("Activating: "+ name);
	});
}
setupBot("Closure Bot 1", "#bot_1");
setupBot("Closure Bot 2", "#bot_2");

二、循环和闭包

for(var i=1; i<=5; i++){
	setTimeout(function timer(){
		console.log(i);
	}, i*1000);
}
// 期望:每秒一次的频率输出1~5
// 结果:每秒一次的频率输出五次6

先解释一下:“i*1000”,5个定时分别在1s、2s、3s、4s、5s后执行,并不是1s、3s、6s、10s、15s。也就是频率为1s,不是每次间隔增加1s。如果去掉i写成“1000”,会在for执行完1s后直接输出五次6。

回调函数在循环结束后才被执行,因此输出的是循环终止条件是i值。事实上,当定时器运行时即使每个迭代中执行的是setTimeout(..., 0),所有的回调函数依然是在循环结束后才被执行。

根据作用域的工作原理,尽管五个函数是在各个迭代中分别定义的,但是它们都被封闭在一个共享的全局作用域中,因此实际上只有一个i。

解决方案1:

for(var i=0; i<=5; i++){
	(function(j){
		setTimeout(function timer(){
			console.log(j);
		}, j*1000 );
	})(i);
}
// 结果:每秒一次的频率输出1~5

每个迭代都生成一个新的作用域,使得延迟函数的回调可以将新的作用封闭在每个迭代内部,每个迭代中都会含有一个具有正确值的变量供我们访问。

解决方案2(ES6):

for(var i=0; i<=5; i++){
	let j = i;
	setTimeout(function timer(){
		console.log(j);
	}, j*1000 );
}
// 结果:每秒一次的频率输出1~5
for(let i=0; i<=5; i++){
	setTimeout(function timer(){
		console.log(i);
	}, i*1000 );
}
// 结果:每秒一次的频率输出五次6

三、模块

模块需要具备两个必要条件:

(1)必须有外部的封闭函数,该函数必须至少被调用一次(每次调用都会创建一个新的模块实例)。

(2)封闭函数必须返回至少一个内部函数,这样内部函数才能在私有作用域中形成闭包,并且可以访问或者修改私有的状态。

典型的模块化:

function CoolMoudle(){
	var something = "cool";
	var doSomething = function(){
		console.log(something);
	}
	return{
		doSomething: doSomething
	};
}
var foo = CoolMoudle();	//如果不执行外部函数CoolMoudle(),内部作用域和闭包都无法创建
foo.doSomething();	//cool

单例模式:

var foo = (function CoolModule(id){
	function change(){
		// 修改公共API
		publicAPI.identify = identify2;
	}
	function identify1(){
		console.log(id);
	}
	function identify2(){
		console.log(id.toUpperCase());
	}
	var publicAPI = {
		change: change,
		identify: identify1
	};
	return publicAPI;
})("foo module");
foo.identify();	//foo module
foo.change();
foo.identify(); //FOO MODULE

以上就是详解JavaScript作用域 闭包的详细内容,更多关于JavaScript作用域 闭包的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Javascript判断对象是否相等实现代码
Mar 18 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
javascript RegExp 使用说明
May 21 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 #Javascript
Vue 监听元素前后变化值实例
Jul 29 #Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 #Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 #Javascript
小程序实现列表展开收起效果
Jul 29 #Javascript
jquery实现简单自动轮播图效果
Jul 29 #jQuery
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 #Javascript
You might like
PHP JSON 数据解析代码
2010/05/26 PHP
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
php array_walk() 数组函数
2011/07/12 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
js 浏览器事件介绍
2012/03/30 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
Python 函数基础知识汇总
2018/03/09 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
详解Python实现进度条的4种方式
2020/01/15 Python
python模拟实现分发扑克牌
2020/04/22 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
好的演讲稿开场白
2013/12/30 职场文书
公司合作协议书范本
2014/04/18 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
儿园租房协议书范本
2014/12/02 职场文书
工作时间证明
2015/06/15 职场文书
写好求职信的技巧解密
2019/05/14 职场文书