这篇文章给大家分享的是有关javascript闭包使用场景的原理分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、闭包Javascript中,只有函数内部的子函数才能读取局部变量,闭包就是能够读取其他函数内部
这篇文章给大家分享的是有关javascript闭包使用场景的原理分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
Javascript
中,只有函数内部的子函数才能读取局部变量,闭包就是能够读取其他函数内部变量的函数。
比如下面的代码:
function f1() { var n = 999; function f2() { console.log(n); } return f2;}var result = f1();result();//999
函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1就是不可见的。
这就是Javascript
语言特有的"链式作用域"结构(chain scope
),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。
既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,就可以在f1外部读取它的内部变量了。
原生的setTimeout
传递的第一个函数不能带参数,通过闭包可以实现传参效果。
function f1(a) { function f2() { console.log(a); } return f2;}var fun = f1(1);setTimeout(fun,1000);//一秒之后打印出1
定义行为,然后把它关联到某个用户事件上(点击或者按键)。代码通常会作为一个回调(事件触发时调用的函数)绑定到事件。
比如下面这段代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title></head><body> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="size-12">12</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="size-20">20</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="size-30">30</a> <script type="text/javascript"> function changeSize(size){ return function(){ document.body.style.fontSize = size + 'px'; }; } var size12 = changeSize(12); var size14 = changeSize(20); var size16 = changeSize(30); document.getElementById('size-12').onclick = size12; document.getElementById('size-20').onclick = size14; document.getElementById('size-30').onclick = size16; </script></body></html>
当点击数字时,字体也会变成相应的大小。
在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
实现的关键就在于setTimeOut
这个函数,由于还需要一个变量来保存计时,考虑维护全局纯净,可以借助闭包来实现。
如下代码所示:
function debounce(fn,delay){ let timer = null //借助闭包 return function() { if(timer){ clearTimeout(timer) //进入该分支语句,说明当前正在一个计时过程中,并且又触发了相同事件。所以要取消当前的计时,重新开始计时 timer = setTimeOut(fn,delay) }else{ timer = setTimeOut(fn,delay) // 进入该分支说明当前并没有在计时,那么就开始一个计时 } }}
如下面代码:用js创建一个计数器
方法1:
function f1() { var sum = 0; var obj = { inc:function () { sum++; return sum; }}; return obj;}let result = f1();console.log(result.inc());//1console.log(result.inc());//2console.log(result.inc());//3
在返回的对象中,实现了一个闭包,该闭包携带了局部变量x,并且,从外部代码根本无法访问到变量x。
方法2:
function f1() { var sum = 0; function f2() { sum++; return f2; } f2.valueOf = function () { return sum; }; f2.toString = function () { return sum+''; }; return f2;}//执行函数f1,返回的是函数f2console.log(+f1());//0console.log(+f1()())//1console.log(+f1()()())//2
所有js数据类型都拥有valueOf
和toString
这两个方法,null
除外
valueOf()
方法:返回指定对象的原始值。
toString()
方法:返回对象的字符串表示。
在数值运算中,优先调用了valueOf
,字符串运算中,优先调用toString
sum+' '
是一个字符串类型的数据
感谢各位的阅读!关于“Javascript闭包使用场景的原理分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
--结束END--
本文标题: Javascript闭包使用场景的原理分析
本文链接: https://www.lsjlt.com/news/305341.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-04-30
2024-04-30
2024-04-30
2024-04-30
2024-04-30
2024-04-30
2024-04-30
2024-04-30
2024-04-30
2024-04-30
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0