详解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 相关文章推荐
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 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后期静态绑定之self::限制实例分析
2018/12/21 PHP
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
javascript表单验证大全
2015/08/12 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
详解js类型判断
2018/05/22 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
Python常用小技巧总结
2015/06/01 Python
python装饰器深入学习
2018/04/06 Python
Python 将pdf转成图片的方法
2018/04/23 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
详解Python3注释知识点
2019/02/19 Python
python 标准差计算的实现(std)
2019/07/29 Python
python系列 文件操作的代码
2019/10/06 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
python中rc1什么意思
2020/06/19 Python
python调用私有属性的方法总结
2020/07/24 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
python编写实现抽奖器
2020/09/10 Python
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
大学生农村教师实习自我鉴定
2013/09/21 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
刚毕业大学生自荐信范文
2014/02/20 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
Python中with上下文管理协议的作用及用法
2022/03/18 Python