JavaScript 中闭包原理

最新推荐文章于 2020-05-30 17:15:21 发布

浮若梦幻

最新推荐文章于 2020-05-30 17:15:21 发布

阅读量146

点赞数

分类专栏： js 文章标签：闭包 function 变量

本文链接：https://blog.csdn.net/winterdodo/article/details/84027577

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

闭包引用代码片段

//var i=1;//污染全局  
function fun(){
	  var i=1;  //函数内变量  ao释放
	  console.log(i++);
	}
fun();//1
fun();//1
//i=0;  全局污染之后变量 会被影响
fun();//1
fun();//1

运行结果是 1 1 1 1

模仿一个场景我们想要使用变量 i 中的值让其自动累加

让而又不想让 var i 放入全局污染全局变量

解决方案

闭包解决

用外层函数包裹内层函数对象
外层函数将内层函数对象返回到外部
使用者调用外层函数, 获得返回的内层函数

// 用外层函数包裹 变量和内层函数
function outer(){ 
	var i=1;  //外层函数内将内层函数对象返回
 return function (){
	 console.log(i++);
	}
}
fun();//1
fun();//2
  i=0;  //全局变量修改不了 闭包中的变量
fun();//3
fun();//4

运行结果为1 2 3 4

下面给大家演示一下闭包案例

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<button>click me</button>
<button>click me</button>
<button>click me</button>
<button>click me</button>
<button>click me</button>
<button>click me</button>
<button>click me</button>
<button>click me</button>
<script>
var btns= document.getElementsByTagName("button");
//获取到当前 按钮的 选择器 
for(var i=0;i<btns.length;i++){//遍历当前按钮
	btns[i].onclick=(function(){
	//为按钮绑定点击事件  将函数封装 ({fun() })();
		var myi=i;
	//闭包获取当前的i  不被全局或者因函数内ao释放而释放
		return function(){  alert("我是当前第"+myi+"个按钮"); }
	})();
}
</script>
</body>
</html>

浮若梦幻

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 中闭包原理

闭包引用代码片段//var i=1;//污染全局 function fun(){ var i=1; //函数内变量 ao释放 console.log(i++); }fun();//1fun();//1//i=0; 全局污染之后变量会被影响fun();//1fun();//1运行结果是 1 1 1 1模仿一个场景我们想要使用变量 i 中的...
复制链接

扫一扫