JavaScript中闭包设计

JavaScript闭包:
闭包,解决的是全局变量在整个页面都可以修改,而闭包做到的是,可以理解为将局部变量也可以在整个页面进行访问。
示例如下:(计数器代码)
代码如下:
<html>
<head>
<meta charset = "utf-8">
<script>
//全局变量
var num = 0;
function add(){
   return  num +=  1;
}
function MyFunction(){
  document.getElementById("show").innerHTML = add();
}
</script>
</head>
<body>
<p id = "show">0</p>
<input type = "button value = "点我" onclick = "MyFunction()" />
</body>
</html>
对全局变量会进行修改,但是,因为是全局变量,所以其他方法也可以对num变量进行修改,所以这种方式是不安全的,但是如果将其变成局部变量,那么便达不到计数的目的。
代码如下:
<html>
<head>
<meta charset = "utf-8">
<script>
function add(){
   //局部变量
   var num = 0;
   return  num +=  1;
}
function MyFunction(){
  document.getElementById("show").innerHTML = add();
}
</script>
</head>
<body>
<p id = "show">0</p>
<input type = "button value = "点我" onclick = "MyFunction()" />
</body>
</html>
使用闭包可以解决上面的问题
代码如下:
<html>
<head>
<meta charset = "utf-8">
<script>
var add = (function(){ 
   //局部变量
   var num = 0;
   return  function(){ return num += 1;}
})();
function MyFunction(){
  document.getElementById("show").innerHTML = add();
}
</script>
</head>
<body>
<p id = "show">0</p>
<input type = "button value = "点我" onclick = "MyFunction()" />
</body>
</html>
对于闭包的理解:
代码:
var add = (function(){ 
   //局部变量
   var num = 0;
   return  function(){ return num += 1;}
})();
为什么上面这段代码没有直接写的 function add (){...} 而是把function赋值给了变量add呢?
我们通常会想当然的认为每次调用 add() 都会重走一遍add()中的代码块, 但其实不然。
注意add方法中的return, 它return的并不是1,2,3这样的数值,而是return了一个方法,并且把这个方法赋值给了add变量。
那么在这个function自运行一遍之后,其实最后赋值给add的是return counter += 1 这段代码。
所以后面每次调用add() 其实都是在调用return counter += 1。
再结合文章之前所说的, 闭包会持有父方法的局部变量并且不会随父方法销毁而销毁, 所以这个counter其实就是来自于第一次function执行时创建的变量。
也可以这样理解:
闭包就是一个函数引用另一个函数的变量,因为变量被引用着所以不会被回收,因此可以用来封装一个私有变量。这是优点也是缺点,不必要的闭包只会增加内存消耗。
或者说闭包就是子函数可以使用父函数的局部变量,还有父函数的参数。
发布了26 篇原创文章 · 获赞 0 · 访问量 9934

猜你喜欢

转载自blog.csdn.net/weixin_38246518/article/details/78762527