详解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获取作用在元素上面的样式属性代码
Sep 20 Javascript
js获得鼠标的坐标值的方法
Mar 13 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
原生js实现放大镜组件
Jan 22 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代码的53条建议
2008/03/27 PHP
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
PHP面向对象详解(三)
2015/12/07 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
python实现代理服务功能实例
2013/11/15 Python
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
Python自动连接ssh的方法
2015/03/07 Python
Python创建xml文件示例
2017/03/22 Python
python删除不需要的python文件方法
2018/04/24 Python
Linux下python制作名片示例
2018/07/20 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
python计算二维矩形IOU实例
2020/01/18 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
2014年公司庆元旦活动方案
2014/03/05 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
小学教师党员承诺书
2015/04/27 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js