JavaScript学习记录——闭包作用域

最新推荐文章于 2024-09-14 19:44:09 发布
最新推荐文章于 2024-09-14 19:44:09 发布
阅读量885 收藏
点赞数
分类专栏： JavaScript学习过程记录 文章标签： javascript 闭包 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stevensz7/article/details/23031837
版权

一、函数的执行顺序：

       1、通过function fn()这种写法来定义的函数，永远都会被最先初始化；

       2、以匿名函数方式定义的函数，不会被先执行，如果在之前调用该函数就会报错。


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	fn1();
	//不会报错,对于通过function fn()这种写法来定义的函数，永远都会被最先初始化
	function fn1() {
		alert("fn1");
	}
	
	fn2();
	//使用如下方式定义函数，不会被先执行，如果在之前调用该函数就会报错
	/**
	 * 以下函数的定义方式是现在内存中创建了一块区域，之后通过一个fn2的变量
	 * 指向这块区域，这块区域的函数开始是没有名称的 ，这种函数就叫做匿名函数
	 */
	var fn2 = function() {
		alert("fn2");
	}	
	</script>
</head>
<body>
</body>
</html>


二、函数作用域链

        在js中当进行函数的调用，会为每一个函数增加一个属性SCOPE，通过这个属性来指向一块内存这块内存中包含有所有的上下文使用的变量，当在某个函数中调用了新函数之后，新函数依然 会有一个作用域来执行原有的函数的SCOPE和自己新增加的SCOPE，这样就形成一个链式结构这就是js中的作用域链。


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	/**
	 * 在js中当进行函数的调用，会为每一个函数增加一个属性SCOPE，通过这个属性来指向一块内存
	 * 这块内存中包含有所有的上下文使用的变量，当在某个函数中调用了新函数之后，新函数依然
	 * 会有一个作用域来执行原有的函数的SCOPE和自己新增加的SCOPE，这样就形成一个链式结构
	 * 这就是js中的作用域链
	 */
	var color = "red";
	
	var showColor = function() {
		alert(this.color);
	}
	
	function changeColor() {
		var anotherColor = "blue";
		function swapColor() {
			var tempColor = anotherColor;
			anotherColor = color;
			color = tempColor;
		}
		swapColor();
	}
	
	changeColor();
	
	showColor();
	</script>
</head>
<body>
</body>
</html>

        这段代码的函数作用域链图如下所示：





三、函数的内存释放

       在JavaScript中，可以通过返回函数的方法，扩大函数的作用域的生命周期，而在Java、C++等语言在函数执行后，变量就会从内存中释放。

       但是这种方法将会使执行过程中占用更多的内存空间，一般非特殊情况，不要使用闭包。


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	/**
	 * 通过以下操作带来最大的好处是，compareObjectFunction的作用域变大了
	 * 当compareObjectFunction结束之后，prop这个变量依然存在
	 */
	function compareObjectFunction(prop) {
		//匿名函数
		return function(obj1,obj2) {
			if(obj1[prop]>obj2[prop]) return 1;
			else if(obj1[prop]<obj2[prop]) return -1;
			else return 0;
		}
	}
	var o1 = {name:"Leon",age:23};
	var o2 = {name:"Ada",age:28};
	//此时就是基于name来进行比较
	/*
	 * 在java或者c++中，以下代码执行完成之后，需要进行内存的释放
	 * 此时对于java和c++这些静态语言而言，prop会被释放
	 * 但是在js中，这个作用域却被放大了
	 */
	var compare = compareObjectFunction("age");
	//此时就比较了o1和o2
	/*
	 * 在js中，prop在这里依然可以被访问，这种通过返回函数来扩大函数的作用域的方法
	 * 就是闭包
	 */
	var rel = compare(o1,o2);
	alert(rel);
	</script>
</head>
<body>
</body>
</html>

        这段代码的函数作用域链图如下所示：



四、闭包的作用域

1、作用域保存到上一级函数中：


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	function fn1() {
		//创建了一个数组
		var fns = new Array();
		//i这个变量是保存在fn1这个作用域中的
		for(var i=0;i<10;i++) {
			//数组中方的值是一组函数
			fns[i] = function() {
				return i;
			}
		}
		return fns;
	}
	
	var fs = fn1();
	for(var i=0;i<fs.length;i++) {
		//此时通过闭包来调用所有函数，当输出i的时候会去上一级的作用域中查找
		//这个时候i的值已经10，所以连续输出了10个10
		document.write(fs[i]()+"<br/>");
	}
	</script>
</head>
<body>
</body>
</html>


2、作用域保存在下一级每一个子函数中：


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	function fn1() {
		//创建了一个数组
		var fns = new Array();
		//i这个变量是保存在fn1这个作用域中的
		for(var i=0;i<10;i++) {
			//num这个变量是保存在fns这个tf这个作用域，每一个闭包的num都是不一样
			//所以此时所消耗的内存特别的大
			var tf = function(num) {
				fns[num] = function() {
					return num;
				}
			}
			tf(i);
		}
		return fns;
	}
	
	var fs = fn1();
	for(var i=0;i<fs.length;i++) {
		//每一个fs都是在不同作用域链中，num也是保存在不同的作用域中，所以输出0-9
		document.write(fs[i]()+"<br/>");
	}
	</script>
</head>
<body>
</body>
</html>


五、闭包中this的问题：

        调用函数时，this是指向类的，但是调用结束后，再调用里面的匿名函数的时候，this就指向window：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	var name = "window";
	var person = {
		name:"zhangsan",
		age:23,
		say:function() {
			return function() {
				return this.name;
			}
		}
	}
	/*
	 * 当完成person.say()之后，这个函数就调用结束了，在这个函数调用结束之前
	 * this是指向person,但是在调用匿名函数的时候，this就指向window，所以
	 * 得到的结果是window
	 * 
	 */
	alert(person.say()());
	</script>
</head>
<body>
</body>
</html>


解决的方案是使用一个中间变量来保存this：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	var name = "window";
	var person = {
		name:"zhangsan",
		age:23,
		say:function() {
			//that就指向person
			var that = this;
			return function() {
				return that.name;
			}
		}
	}
	/*
	 * 此时that是指向person的，所以调用that.name就是person中name
	 * 
	 */
	alert(person.say()());
	</script>
</head>
<body>
</body>
</html>

六、块作用域

       JavaScript没有块作用域，这样会导致大量的全局变量，在一个大型项目开发中，很有可能会由于变量名称相同会出现不可预见的错误，解决的方案是采用匿名函数的方法。

       例如下面的代码中，循环代码块中使用的变量i，会影响到后面使用i作为的变量的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	for(var i=0;i<10;i++) {
		
	}
	//在js中没有块作用域，不管是使用循环还是判断之后，这个变量会一直存在
	/*
	 * 所以当在全局使用某个变量进行循环或者判断之后，这个变量可能会影响
	 * 到函数中的变量，所以在特殊情况不要使用全局变量，而且使用全局变量
	 * 在作用域链的最上层，访问是最慢的
	 */
	var i;//此时会认为是无效语句，除非使用var i = 0;
	alert(i);
	</script>
</head>
<body>
</body>
</html>

下面的代码是使用匿名函数的例子： 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	/*
	 * 在一个团队进行开发时，可能会涉及到定义同名的全局变量，所以在开发中
	 * 一定养成如下习惯，将全局变量的代码放到一个匿名函数，并且马上调用
	 * 匿名函数，这样也可以执行全局变量的代码，但是这些变量就被控制在开发
	 * 人员想要控制的作用域中了
	 */
	//在function的{}后不能直接调用，一定要加上括号
	// function(){
		// for(var i=0;i<10;i++) {
// 		
		// }	
	// }();
	(function(){
		for(var i=0;i<10;i++) {
		
		}	
	})();
	
	function fn() {
		alert(i);
	}
	fn();
	</script>
</head>
<body>
</body>
</html>

七、私有变量

       私有变量可以在匿名函数中定义，这样外面就无法直接访问了。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	var Person;
	(function(){
		//name正在函数结束之后就消失，在外面是无法引用的
		var name = "";
		Person = function(value){
			name = value;
		}
		Person.prototype.setName = function(value) {
			name = value;
		}
		Person.prototype.getName = function() {
			return name;
		}
	})();
	
	var p1 = new Person("aa");
	alert(p1.getName());
	p1.setName("bb");
	alert(p1.getName());
	</script>
</head>
<body>
</body>
</html>



stevensz7
关注
专栏目录
9.JavaScript学习笔记——闭包
lvh98的博客
07-12 437
当内部函数被保存到外部时，将会生成闭包。闭包会导致原有作用域链不释放，造成内存泄露。内存泄露可以理解为内存占用，泄露（占用）的越多，内存剩余的越少。与信息泄露无关。由于内部函数的作用域链中仍然有对包含函数的引用，所以包含函数执行完后，其活动对象没有被销毁，但是包含函数执行上下文的作用域链会被销毁。例子： 1.全局预编译 2.执行语句 3.执行语句3.1.预编译函数a对象a的[[scope]]属性 3.2.执行函数a 3.3.函数a执行完成，return ba对应的执行期上下文销毁。但是由于a的内部函数b被保
JavaScript学习笔记——闭包
x568059888的博客
12-31 197
闭包 定义 闭包（closure）指有权访问另一个函数作用域中变量的函数。 作用 闭包延伸了变量的作用范围。 理解闭包 闭包的产生基于以下基础。 执行环境（或简称环境）定义了变量或函数有权访问的其他数据，决定了它们的各自行为。 每一个环境都有与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。 全局执行环境是最外围的执行环境，而每个函数又有自己的执行环境。执行流进入一个函数时，函数的环境会被推入环境栈中。函数执行完毕后，环境栈将其弹出，将控制权还给上一个执行环境。 代码在一个环境中执行时，会
JavaScript——闭包和作用域
weixin_43213137的博客
10-23 300
JavaScript——闭包和作用域 理解闭包 1，什么是闭包？ 闭包的概念网上一搜一大把，但是我这还是得说说。 概念：闭包允许函数访问并操作函数外部的变量。只要变量或函数存在于声明函数时的作用域内，闭包即可使函数能够访问这些变量。 2，实例 这样的写法或许我们已经写过上百次了，但是并没有意识到我们正在写闭包，那是因为value变量和valueF()函数是在全局作用域下声明的，这个作用域一直存...
JavaScript —— 变量作用域 ，闭包（学习笔记）
m0_52704461的博客
08-29 144
理解：闭包就是指有权访问另一个函数作用域中的变量的函数。声明在一个函数中的函数，叫做闭包函数。而且内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（销毁）了之后。......
JavaScript学习笔记——闭包详解
靡不有初鲜克有终
07-31 460
本文转载于公众号 前端大全 2017-7-24日文章 链接地址为http://mp.weixin.qq.com/s/lT8uOaCvkVqcPgYlfwQ7PQ 编译：伯乐在线专栏作者 - 刘唱 闭包是JavaScript中的一个基本概念，每一个认真的程序员都应该对它了如指掌。 互联网上充斥着大量关于“什么是闭包”的解释，却很少有人深入探究它“为什么”的一
JavaScript学习笔记——作用域、作用域链
qq_41591033的博客
11-07 205
深入学习作用域与作用域链，能帮我们更好的理解闭包。而学习作用域和作用域链前，我们先得掌握预编译中出现的执行期上下文 1. 执行期上下文 当函数执行时（或称前一刻），会创建一个称为执行期上下文的内部对象。一个执行期上下文定义了一个函数执行时的环境，函数每次执行时对应的执行上下文都是独一无二的，所以多次调用一个函数会导致创建多个执行上下文，当函数执行完毕，它所产生的执行上下文被销毁。 2. 作用域 [...
学习笔记——闭包
qq_41339126的博客
04-23 128
闭包的基本概念、作用、缺点、解决方案
JavaScript——闭包（作用域）
Abby_zzy的博客
03-28 186
作用域 变量的作用域无非就是两种：全局变量和局部变量； 局部变量： 在函数体中声明的变量，只能在该函数体中访问。 全局变量： 除了函数体中声明的变量，或者在函数体中没有var子变量，在任何地方都可以访问该变量。 因为每个js函数都是一个对象；独享中有些属性侍卫们可以访问的；但是有些不能被访问；这些属性近视提供JS引擎存取； scope就是其中一个 scope是代表的就是作用域其中存储了运行期上下...
JavaScript学习笔记——变量、作用域、var、const和let
甜甜的博客
01-12 1109
作用域：一个变量或者函数的有效作用范围。
图解Javascript——作用域、作用域链、闭包
10-20
作用域是JavaScript中一个非常核心的概念，它决定了代码块中变量和函数的可访问性。全局作用域中的变量和函数可以被整个程序中的其他代码所访问，而局部作用域则限制了变量和函数的可访问范围到代码块内部。在...
JavaScript中的作用域链和闭包
12-11
作用域 全局作用域 局部作用域 作用域链 执行上下文 活动对象 闭包 闭包优化 JavaScript中出现了一个以前没学过的概念——闭包。何为闭包？从表面理解即封闭的包，与作用域有关。所以，说闭包以前先说说作用域。 ...
JavaScript闭包——变量作用域、词法环境的理解
Tinkerbaby的博客
09-30 176
前几天面试的时候问到了一个题，没有答上来，面试官和我解释完之后我才想起自己看过相关的文章，完全忘记了c。题目是这样： var value = 1; function f1() { console.log(value) } function f2() { var value = 2; f1(); console.log(value); } f2(); 输出什么呢？不了解闭包可能会觉得就是2，正确答案是1. 核心主要就是js的词法环境是在函数声明的时候就决定的，而不是在调用的时
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 854
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
weixin_45980065的博客
09-14 470
【代码】【JavaScript】LeetCode：707设计链表。
记录开发一个英语听力训练网站
最新发布
业余程序员Blue的博客
09-14 431
目前只导入了雅思历年真题的听力音频，作为我日常练习英语听力的素材足够了。网站的主要功能其实就是英语句子精听，核心目的就是反复听每一句话，直到听懂为止，我觉得听力训练也没有太多技巧可言，就是老老实实地坚持去听，所谓网上经常说的“磨耳朵”吧。基于此，听力页面主要功能有：播放/暂停、上一句/下一句、播放次数选择、播放倍速选择、字体大小选择、是否显示原文、是否显示译文、是否自动播放下一句。而这些功能，基本上都是页面js操作。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 441
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 873
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
JavaScript基础
zhangh040629的博客
09-10 1296
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
理解JavaScript闭包：作用域链与实战应用
本文主要探讨JavaScript中的一个重要概念——闭包。闭包是函数与它所能访问的变量环境组合的特殊性质，这是理解高级JavaScript编程的关键之一。在JavaScript早期版本中，函数作用域是核心，没有块级作用域，但通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值