js的闭包--js详解(十五)

最新推荐文章于 2023-12-19 22:16:59 发布
最新推荐文章于 2023-12-19 22:16:59 发布
阅读量153 收藏
点赞数
分类专栏： js 文章标签： js闭包 js详解 微风
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaosa3134/article/details/84795883
版权

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">
	fn1();
	//不会报错,对于通过function fn()这种写法来定义的函数，永远都会被最先初始化
	function fn1() {
		alert("fn1");
	}
	
	fn2();
	//使用如下方式定义函数，不会被先执行，如果在之前调用该函数就会报错
	/**
	 * 以下函数的定义方式是现在内存中创建了一块区域，之后通过一个fn2的变量
	 * 指向这块区域，这块区域的函数开始是没有名称的 ，这种函数就叫做匿名函数(也就是闭包)
	 */
	var fn2 = function() {
		alert("fn2");
	}	
	</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">
	/**
	 * 在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>

以下是内存模型分析图

3、比较方法的例子

<!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>

4、闭包中的var变量

<!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>

 5、解决4中闭包var问题

  

<!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>

 6、闭包中的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() {
			alert(this.name);	//zhangsan
			return function() {
				return this.name;	//window
			}
		}
	}
	/*
	 * 当完成person.say()之后，这个函数就调用结束了，在这个函数调用结束之前
	 * this是指向person,但是在调用匿名函数的时候，this就指向window，所以
	 * 得到的结果是window
	 * 
	 */
	alert(person.say()());
	</script>
</head>
<body>
</body>
</html>

 7、解决6中闭包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>

 8、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">
	for(var i=0;i<10;i++) {
		
	}
	//在js中没有块作用域，不管是使用循环还是判断之后，这个变量会一直存在
	/*
	 * 所以当在全局使用某个变量进行循环或者判断之后，这个变量可能会影响
	 * 到函数中的变量，所以在特殊情况不要使用全局变量，而且使用全局变量
	 * 在作用域链的最上层，访问是最慢的
	 */
	var i;//此时会认为是无效语句，除非使用var i = 0;
	alert(i);	//10
	</script>
</head>
<body>
</body>
</html>

 9、使用闭包解决块作用域问题

<!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>

 10、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">
	function Person(name) {
		/**
		 * 此时就没有办法直接访问name这个属性，因为没有this.name
		 * 要访问name只能通过this.getName,this.setName
		 * 但是使用这种方式创建私有变量带来的问题是，每个对象都存储大量的函数
		 * 解决的办法是通过静态私有变量来解决
		 */
		this.setName = function(value) {
			name = value;
		}
		this.getName = function() {
			return name;
		}
	}
	
	var p = new Person("aa");
	alert(p.getName());
	p.setName("bb");
	alert(p.getName());
	</script>
</head>
<body>
</body>
</html>

 11、通过闭包实现静态私有变量

<!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>

js基本上讲完了，可能有些地方写的不是很清楚，因为也是看视频而写的博客记录，不是原创

 

 

xiaosa3134
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript的闭包---细节详解
qq_45604710的博客
03-09 267
一.什么是闭包 1.产生闭包的条件 ①函数嵌套 ②内部函数引用了外部函数的数据（变量\函数） ③并且调用了外部函数 例子：写一个闭包函数并写出执行顺序： for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(new Date, i); }, 1000); } console.log(new Date, i); 解析：函数bar的词法作用域可以访问foo的内部作用域，并且bar在被作为返回值
JS--闭包详解
weixin_43955315的博客
08-30 369
JS–闭包 闭包详解 闭包，在MDN（闭包 - JavaScript | MDN (mozilla.org)）中的解释是 一个函数和对其周围状态（词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包。 也就是说，闭包可以让你在一个内层函数中访问到其外层函数的作用域。在JavaScript中，每当创建一个函数，闭包就在函数创建的同时被创建出来。 在讨论闭包前，我们先看下下面的代码，并且用文字描述出代码的工作流程 1.function add(x) { 2. let sum = x +
js闭包-继承,原型和原型链详解
weixin_46120736的博客
05-17 568
学习目标 提示：完成对常见面试题的了解,包括,js闭包 es5和es6j继承方式的不同,对构造函数的原型和原型链进行学习 文章目录学习目标一、js闭包 一、js闭包
JS---JS中的闭包详解
前端与计算机相关知识的分享，博主的qq523235674
03-19 616
1.前置知识---变量作用域 变量根据作用域的不同分为两种:全局变量和局部变量。 ①.函数内部可以使用全局变量。 ②.函数外部不可以使用局部变量。 ③.当函数执行完毕，本作用域内的局部变量会销毁。 我们都知道，js的作用域分两种，全局和局部，基于我们所熟悉的作用域链相关知识， 我们知道在js作用域环境中访问变量的权利是由内向外的，内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量，反之则不能， 也就是说在外层作用域下无法获取内层作用域下的变量， 同样在不同的.
JS闭包详解
linfeng_meng的博客
09-05 6406
js中闭包closure,是指函数变量可以保存在函数作用域内,因此看起来是函数将变量“包裹”了起来,根据定义,包含变量的函数就是闭包。当两个函数彼此嵌套时，内部的函数就是闭包。闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量。
js 【详解】闭包
热门推荐
朝阳39的博客
04-21 3万+
如果一个函数访问了此函数的父级及父级以上的作用域变量，那么这个函数就是一个闭包。
JS - 闭包（Closure）
最新发布
qq_40147756的博客
12-19 1433
JS - 闭包（Closure），创建闭包，销毁闭包，闭包的特点和经典问题。
JavaScript --- 闭包详解
wzg0817的博客
05-20 375
闭包的几种概念理解： 能够访问另一个函数作用域的变量的函数。清晰的讲：闭包就是一个函数，这个函数能够访问其他函数的作用域中的变量。 闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。 闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量。 闭包是指有权访问另一个函数作用域中的变量的函数 能够读取其他函数内部变量的函数。或简单理解为定义在一个函数内部的函数，内部函数持有外部函数内变量的引
JavaScript - 闭包 - 实战运用 - 循环绑定事件详细解析
wendyGao_Yin的博客
12-01 3376
闭包是一种机制，函数执行，产生一个不被释放的上下文， 一是保护了上下文里面的私有变量不受外界干扰， 二是私有变量的值也保存了下来，可以供其下级上下文调取使用，这种机制叫做闭包。 闭包的弊端是会导致栈内存增加，项目中如果滥用闭包，会导致产品性能降低。 JS中获取的每一个DOM元素都是一个元素对象（堆内存），用有很多的属性和方法； 实现元素点击事件行为：xxx.onclick = function(){...} ,就是给元素对象的私有属性onclick赋值； 当点击的时候， 浏览器监听到事件触发帮我们.
js批量给form表单赋值
xiaosa3134的专栏
04-19 4719
/** * 批量赋值 * @param obj */ function loadData(obj){    var key,value,tagName,type,arr;    for(x in obj){        key = x;        value = obj[x];        $("[name='"+key+"'],[name='"+key+"[]']")...
js的obj--js详解(三)
xiaosa3134的专栏
04-30 2120
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt; &lt;head&gt; &lt;me
js中obj与json之间的转换
xiaosa3134的专栏
04-27 1775
简单介绍： JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Py...
js的extends--js详解(十四)
xiaosa3134的专栏
05-03 1320
 1、基于原型链的方式 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt; &lt;head&gt;
浏览器中Backspace不可用
xiaosa3134的专栏
08-13 1008
//浏览器中Backspace不可用 $(document).keydown(function(e){ var keyEvent; if(e.keyCode==8){ var d=e.srcElement||e.target; //只是防止input和textarea ...
javascript中的window.opener讲解
xiaosa3134的专栏
08-13 994
定义和用法 opener 属性是一个可读可写的属性，可返回对创建该窗口的 Window 对象的引用。 opener 属性非常有用，创建的窗口可以引用创建它的窗口所定义的属性和函数。 语法 window.opener 提示和注释 注释：只有表示顶层窗口的 Window 对象的 operner 属性才有效，表示框架的 Window 对象的 operner 属性无效。   实例: 下...
js的hello--js详解(一)
xiaosa3134的专栏
04-30 328
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt; &lt;head&gt; &lt;me
iframe调用子iframe的方法，子调用父iframe的方法
xiaosa3134的专栏
11-08 310
在index.html页面中有  &lt;script type="text/javascript"&gt;  function test(){   alert('test() success!');  } &lt;/script&gt; &lt;body&gt;    &lt;a href="#" onclick="frame1.window.childFunction();"&am
js的Window--js详解(八)
xiaosa3134的专栏
05-02 183
js中的Window有很多属性与方法，在这里不一一讲解了，主要讲解下window.opener，下面用祝福语例子讲解下： window.html &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html xmlns="htt...
JavaScript闭包详解：权威指南
"闭包权威指南 - 由Michael Bolin撰写的专业JavaScript闭包解析书籍，中文版可在指定网站查看。" 闭包是JavaScript编程中一个核心且重要的概念，它允许函数访问并操作其自身作用域内的变量，即使该函数已经执行完毕...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值