详解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 相关文章推荐
基于jquery的模态div层弹出效果
Aug 21 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
解析Jquery的LigerUI如何实现文件上传
Jul 09 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
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计算两个路径的相对路径
2013/06/14 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
python Opencv将图片转为字符画
2021/02/19 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
Python版名片管理系统
2018/11/30 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
什么是python的id函数
2020/06/11 Python
如何真正的了解python装饰器
2020/08/14 Python
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
优秀的自荐信要注意哪些
2014/01/03 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
施工协议书范本
2014/04/22 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
植物园观后感
2015/06/11 职场文书
小学班级口号大全
2015/12/25 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书