代码描述:js闭包用法。js闭包用法简单介绍
在javascript中,闭包是一个很重要的概念,对于新手来说是一个不大不小的障碍,当然这个障碍也不大,通常情况下都能够冲过去,下面就结合代码实例介绍一下它的相关概念和基本用法,希望能够给需要的朋友带来帮助。 一.基本介绍: 闭包我们可以认为是函数运行完毕,但是相关变量仍然驻留内存没有释放的一种现象。 它的主要特征如下: 1.函数中嵌套函数。 2.函数的内部可以引用外部的参数和变量。 3.被引用的参数和变量不会被垃圾回收机制回收。 二.闭包的创建: 最为常见的一种方式,就是函数内部嵌套有一个函数,当外层函数执行完毕之后,内部的函数依然可以使用定义在外层函数的局部变量,代码如下:
<script> function func(){ var num = 1; return function(){ console.log(num++) }; } var count = func(); count(); count(); fun=null; </script>
虽然函数func()执行完毕,但是它内部的局部变量num并没有被销毁,依然可以被内部函数使用,这就是一个闭包。 闭包的优点就是可以将局部变量驻留在内存中,而不用使用全局变量,当然这也是一个缺点,如果使用不当会造成内存的损耗。 js垃圾回收原理: 1.如果一个对象不再被引用的话,那么它会将被GC回收。 2.尽管两个对象相互引用,但是如果不再被第三个对象引用的话,那么相互引用的对象也会被GC回收。 三.闭包的优点: 当然使用好处是有很多的,下面做一下简单介绍: 实例一:
<script> function func(){ var num = 1; return function(){ console.log(num++) }; } var count = func(); count(); count(); fun=null; </script>
这个代码其实就是文章开始部分的代码,可以是局部变量驻留内存,避免使用全局变量。 实例二:
<script> var obj=(function(){ var num=1; function oneFunc(){ num++; console.log(num); } function twoFunc(){ num++; console.log(num); } return{ b:oneFunc, c:twoFunc } })(); obj.b(); obj.c() </script>
上面代码同样也是利用内存驻留的原理,只是使用的形式不同而已。 实例三:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <script type="text/javascript"> window.onload=function(){ var oshow=document.getElementById("show"); var lis=document.getElementsByTagName('li'); for(var index=0;index<lis.length;index++){ (function(index){ lis[index].onclick=function(){ oshow.innerHTML=index }; })(index); } } </script> </head> <body> <div id="show"></div> <ul> <li>51前端一</li> <li>51前端二</li> <li>51前端三</li> </ul> </body> </html>
上面是一个批量注册事件处理函数的代码,点击每一个li元素会获取当前li的索引,可能很多朋友认为上面的代码太过复杂了,使用如下代码即可实现:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <script type="text/javascript"> window.onload=function(){ var oshow=document.getElementById("show"); var lis=document.getElementsByTagName('li'); for(var index=0;index<lis.length;index++){ lis[index].onclick=function(){ oshow.innerHTML=index }; } } </script> </head> <body> <div id="show"></div> <ul> <li>51前端一</li> <li>51前端二</li> <li>51前端三</li> </ul> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能