JavaScript中闭包设计

最新推荐文章于 2023-07-16 20:07:18 发布

F道人

最新推荐文章于 2023-07-16 20:07:18 发布

阅读量240

点赞数

文章标签： JavaScript 闭包 JavaScript函数

本文链接：https://blog.csdn.net/weixin_38246518/article/details/78762527

版权

 
 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执行时创建的变量。 

 
 也可以这样理解： 

 
 闭包就是一个函数引用另一个函数的变量，因为变量被引用着所以不会被回收，因此可以用来封装一个私有变量。这是优点也是缺点，不必要的闭包只会增加内存消耗。 

 
 或者说闭包就是子函数可以使用父函数的局部变量，还有父函数的参数。 

F道人

关注

0
点赞
踩
0

收藏

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

JavaScript闭包：闭包，解决的是全局变量在整个页面都可以修改，而闭包做到的是，可以理解为将局部变量也可以在整个页面进行访问。示例如下：（计数器代码）代码如下：//全局变量var num = 0;function add(){ return num += 1；}function MyFunction(){ document.getElementB
复制链接

扫一扫