js 闭包

最新推荐文章于 2020-12-23 09:49:32 发布
最新推荐文章于 2020-12-23 09:49:32 发布
阅读量234 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixiaodong1006/article/details/103693927
版权

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。

闭包的特性

闭包有三个特性：
	1.函数嵌套函数
	2.函数内部可以引用外部的参数和变量
	3.参数和变量不会被垃圾回收机制回收

闭包的定义及其优缺点

闭包 是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量
闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
闭包是javascript语言的一大特点，主要应用闭包场合主要是为了：设计私有的方法和变量。
一般函数执行完毕后，局部活动对象就被销毁，内存中仅仅保存全局作用域。但闭包的情况不同！

嵌套函数的闭包

function aaa() {  
    var a = 1;  
     return function(){
      alert(a++)
     };  
   }         
var fun = aaa();  
	fun();// 1 执行后 a++，，然后a还在~  
	fun();// 2   
	fun = null;//a被回收！！

闭包会使变量始终保存在内存中，如果不当使用会增大内存消耗。

javascript的垃圾回收原理

（1）、在javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收； 
（2）、如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。

使用闭包的好处

那么使用闭包有什么好处呢？使用闭包的好处是：

1.希望一个变量长期驻扎在内存中
2.避免全局变量的污染
3.私有成员的存在

一、全局变量的累加

<script>
var a = 1;
function abc(){
        a++;
        alert(a);
}
abc();              //2
abc();            //3
</script>

二、局部变量

<script>
	function abc(){
	        var a = 1;
	        a++;
	        alert(a);
	}
	abc();                       //2
	abc();                    //2
</script>

三、局部变量的累加

function outer(){
    var x=10;
    return function(){             //函数嵌套函数
            x++;
            alert(x);
    }
}
var y = outer();              //外部函数赋给变量y;
	y();                 //y函数调用一次，结果为11，相当于outer()()；
	y();                //y函数调用第二次，结果为12，实现了累加

函数声明与函数表达式

// 在js中我们可以通过关键字function来声明一个函数：
function abc(){
    alert(123);
}
abc();
// 可以通过一个"()"来将这个声明变成一个表达式：
(function (){
    alert(123);
})();                   //然后通过()直接调用前面的表达式即可，因此函数可以不必写名字；

四、模块化代码，减少全局变量的污染

var abc = (function(){      //abc为外部匿名函数的返回值
     var a = 1;
      return function(){
           a++;
            alert(a);
      }
})();
	abc();    //2 ；调用一次abc函数，其实是调用里面内部函数的返回值    
	abc();    //3

五、私有成员的存在

var aaa = (function(){
      var a = 1;
      function bbb(){
          a++;
          alert(a);
      }
      function ccc(){
          a++;
          alert(a);
      }
      return {
          b:bbb,             //json结构
          c:ccc
      }
})();
	aaa.b();     //2
	aaa.c()      //3

六.使用匿名函数实现累加

//使用匿名函数实现局部变量驻留内存中，从而实现累加
 function box(){
     var age = 100;
     return function(){          //匿名函数
          age++;
          return age;
     };
     
 } 
var b = box();
alert(b());
alert(b());    //即alert(box()())；
alert(b());
alert(b);    
//function () {
//   	age++;
// 		return age;
// }
b = null；  //解除引用，等待垃圾回收

过度使用闭包会导致性能的下降。函数里放匿名函数，则产生了闭包

七、在循环中直接找到对应元素的索引

原因：js中作用域只有函数作用域和全局作用域，无块级作用域，在函数体内使用var 定义的变量，会被提到函数开始处进行定义，作用域为整个函数

由于function(){alert(i)} 并不是立即执行，所以这里的i一直是存储的内存引用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title></title>
	    <script>
	    window.onload = function(){
	            var aLi = document.getElementsByTagName('li');
	            for (var i=0;i<aLi.length;i++){
	                aLi[i].onclick = function(){        //当点击时for循环已经结束
	                    alert(i);
	                };
	            }
	    }
	    </script>       
    </head>
    <body>
        <ul>
          	<li>123</li>
            <li>456</li>
            <li>789</li>
            <li>010</li>
        </ul>
    </body>
</html>

八、使用闭包改写上面代码

window.onload = function() {
	var aLi = document.getElementsByTagName('li');
	for(var i = 0; i < aLi.length; i++) {
		(function(num) {
			aLi[i].onclick = function() {
				alert(num);
			};
		})(i);
	}
}; <
/script>
// 由于是按值传递，参数i会传递给参数num,这样的话，每执行一次for循环，就会给aLi[i]创建一个num副本，也就是在内存中开辟一个空间存入num的值，这样每个li都会有对应的num值。

其他解决方式：

// 1、将变量 i 保存给在每个段落对象（li）上

function init1() {
	var pAry = document.getElementsByTagName("li");
	for(var i = 0; i < pAry.length; i++) {
		pAry[i].i = i;
		pAry[i].onclick = function() {
			alert(this.i);
		}
	}
}

// 2、将变量 i 保存在匿名函数自身

function init2() {
	var pAry = document.getElementsByTagName("li");
	for(var i = 0; i < pAry.length; i++) {
		(pAry[i].onclick = function() {
			alert(arguments.callee.i);
		}).i = i;
	}
}

// 3、加一层闭包，i 以函数参数形式传递给内层函数

function init3() {
	var pAry = document.getElementsByTagName("li");
	for(var i = 0; i < pAry.length; i++) {
		(function(arg) {
			pAry[i].onclick = function() {
				alert(arg);
			};
		})(i); //调用时参数
	}
}

// 4、加一层闭包，i 以局部变量形式传递给内层函数

function init4() {
	var pAry = document.getElementsByTagName("li");
	for(var i = 0; i < pAry.length; i++) {
		(function() {
			var temp = i; //调用时局部变量
			pAry[i].onclick = function() {
				alert(temp);
			}
		})();
	}
}　　

// 5、加一层闭包，返回一个函数作为响应事件（注意与3的细微区别）

function init5() {
	var pAry = document.getElementsByTagName("li");
	for(var i = 0; i < pAry.length; i++) {
		pAry[i].onclick = function(arg) {
			return function() { //返回一个函数
				alert(arg);
			}
		}(i);
	}
}

// 6、用Function实现，实际上每产生一个函数实例就会产生一个闭包

function init6() {
	var pAry = document.getElementsByTagName("li");
	for(var i = 0; i < pAry.length; i++) {
		pAry[i].onclick = new Function("alert(" + i + ");"); //new一次就产生一个函数实例
	}
}　　

//7、用Function实现，注意与6的区别

function init7() {
	var pAry = document.getElementsByTagName("li");
	for(var i = 0; i < pAry.length; i++) {
		pAry[i].onclick = Function('alert(' + i + ')');
	}
}

//8、es2015

function init7() {
	var pAry = document.getElementsByTagName("li");
	for(let i = 0; i < pAry.length; i++) {
		pAry[i].onclick = function() {
			alert(i);
		};
	}
}

九.内存泄露问题

由于IE的js对象和DOM对象使用不同的垃圾收集方法，因此闭包在IE中会导致内存泄露问题，也就是无法销毁驻留在内存中的元素

function closure(){
    var oDiv = document.getElementById('oDiv');//oDiv用完之后一直驻留在内存中
    oDiv.onclick = function () {
        alert('oDiv.innerHTML');//这里用oDiv导致内存泄露
    };
}
closure();
//最后应将oDiv解除引用来避免内存泄露
function closure(){
    var oDiv = document.getElementById('oDiv');
    var test = oDiv.innerHTML;
    oDiv.onclick = function () {
        alert(test);
    };
    oDiv = null;
}

10.其他

	其实你写的每一个js函数都是闭包，一个js函数的顶层作用域就是window对象，js的执行环境本身就是一个scope（浏
览器的window/node的global），我们通常称之为全局作用域。每个函数，不论多深，都可以认为是全局scope的子作用域，
可以理解为闭包。
魏晓栋c
关注
向闭包内的参数传递新的值
崭新的开始
08-21 1161
//这是错误的示范 function ChangeAndSet(slice) { var line; return function () { if (line) { clearInterval(line); } line= setInterval(Update, slice); } } var obj...
JS中的闭包
weixin_45646245的博客
11-03 285
我们知道，变量都是有作用域的：在JS中，如果在一个函数里边定义了一个变量（即局部变量），那么这个变量的作用域就是这个函数内部，也就是说只有在这个函数内部才可以访问该变量。那么如果我们想要在函数外部访问这个变量呢？这个时候就可以用闭包，闭包的作用就是延长了局部变量的作用域。 那么闭包是什么呢？ 在JavaScript权威指南中，是这样描述闭包的：函数对象可以和作用域链相互关联起来，函数体内部的变量都可以保存在函数作用域内，这种特性在计算机科学文献中称为“闭包”。 在JavaScript高级程序设计中，是这样描
使用闭包解决 JS 中调用 attachEvent 方法传值
fujiang3673的博客
04-24 262
1. 遍历需要遍历的标签for(var i=0;i&lt;node2.length;i++){     node2[i].attachEvent("onclick",reminderQuery(i)); }2. 声明 JS 方法var reminderQuery = function(i){     return function(){         reminderQuery2(i);    ...
javascript技巧:用闭包传递参数
小虎博客
03-03 2851
function aaa(s){ return function(){ alert(s); } } setTimeout(aaa('kkkkkkk'),100); 分析上面的代码,setTimeout接收的是一个function,不能接收参数,而这段代码很巧妙的用闭包的方法传递了一个参数. 顺便总结一下什么是闭
js 闭包传参_[js]利用闭包向post回调函数传参数
weixin_42493060的博客
12-23 219
最近在闲逛校园XX站的时候，打算搞个破坏，试试有多少人还是用初始密码登陆。比较懒，所以直接打开控制台来写。所以问题可以描述为：向后端不断的post数据，id从1~5000自增，后端会根据情况来返回值res，需要把res=100的id输出。最简单的想法是：for循环内部调用post数据//错误示范 一for(var i = 92000;i<92500;i++){//直接借用一下网站内引用的jq...
JavaScript闭包函数访问外部变量的方法
10-25
JavaScript闭包函数是JavaScript语言中一个非常重要的特性，它允许一个函数访问并操作函数外部的变量。闭包的形成主要依赖于变量的作用域。在JavaScript中，变量的作用域分为全局作用域和局部作用域。局部作用域又...
js闭包所用的场合以及优缺点分析
12-03
JavaScript中的闭包是一种强大的特性，它允许内部函数访问并操作其外部函数的变量，即使外部函数已经执行完毕。在上述代码示例中，`function a()` 包含了一个内部函数 `function b()`，并且 `a()` 函数返回 `b()`。...
JavaScript闭包
12-21
Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态...本文将以例子入手来介绍Javascript闭包的语言特性，并结合一点 ECMAScript语言规范来使读者可以更深入的理解闭包。
JavaScript闭包详解
10-24
根据提供的文件信息，我们可以从标题、描述、标签以及部分内容中提取和总结JavaScript闭包相关的知识点。以下是对这些信息的详细解读： ### 闭包的定义与理解 JavaScript闭包是函数和声明该函数的词法环境的组合。...
js 传参怎么变对象key_js深入浅出之数据类型 -- 灵魂拷问1
weixin_39528366的博客
11-19 192
1.原始数据类型和引用数据类型有哪些？string number boolean null undefined symbolsymbol是ES6新引入的一种数据类型，表示独一无二的值。注意，Symbol函数不能使用new生成实例，否则会报错。因为Symbol是一种原始数据类型的值，不是对象。也就是说 ，Symbol的值不是一个对象所以不能添加属性，是一种类似于字符串的数据类型。2.typeof A...
JS中的参数传递详解
关注我！带你一路 "狂飙" 到底！
12-16 260
JS语法中的，对于初学者是一个非常重要的概念。很多小伙伴在学习时，会有不少烦恼。今天我们就来通过各种姿势全方位剖析JS中的值传递。本文章将会用10分钟时间无死角的解析JS的传参方式，希望能对您有所帮助。先说结论，这句话可能会颠覆一些小伙伴的认知，但请先别急，马上你将会赞同我。
js闭包学习
黄彪博客
09-07 419
文章参照 http://www.jb51.net/article/28611.htm   一、值传递闭包   function foo(x) { var tmp = 3; return function (y) { alert(x + y + (++tmp)); } } var bar = foo(2); // bar 现在是一个闭包 bar(10);//16
js 闭包传参_JavaScript中关于给函数闭包传参的问题！！！！
weixin_42530570的博客
12-23 228
问题1：返回的数组第一位是一开始传入的参数，此时n加1，变为3，n++ return的是2，++n return的才是3，所以是2，这是前自增和后自增的区别的问题问题2：在第六行的函数中传入n，相当于给这个函数定义了一个形参n，当 Array.dim(10,2)时，刚开始时i=0，在外面传入参数i，相当于给这个函数的形参n传入值0，所以是从返回(10)[0, 1, 2, 3, 4, 5, 6, ...
关于ES6的箭头函数
weixin_43337464的博客
11-02 166
关于ES6的箭头函数和变量提升 话不多说，首先来看一段代码 var j = 9 console.log(j) console.log(global.j) global.j = 11 console.log(global.j) function Outer() { var fun = () => { console.log(this.j, '////') } fun() this.j = 10 // let j=10 var foo = () => {
js中__proto__和prototype的区别和关系？
weixin_43964148的博客
01-23 215
是时候拿出我珍藏多年的这张图了：初学javascript的时候也跟题主一样搞不清楚，自己好好总结了一下：首先，要明确几个点：1.在JS里，万物皆对象。方法（Function）是对象，方法...
使用闭包传值
江苏小白龙
04-02 711
//2个界面传值反向 第一个界面 import UIKit //闭包 typealias TwoViewControllerClosure = (_ text:String) -&gt;Void class ViewController: UIViewController{ let textlable = UILabel(); let TwoVc = TwoViewCo...
JavaScript闭包详解：权威指南
"闭包权威指南 - 由Michael Bolin撰写的专业JavaScript闭包解析书籍，中文版可在指定网站查看。" 闭包是JavaScript编程中一个核心且重要的概念，它允许函数访问并操作其自身作用域内的变量，即使该函数已经执行完毕...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值