大家好,又见面了,我是全栈君。
近期在写jQuery的时候出了这样一个问题?
<html> <head> <title></title> </head> <style type="text/css"> .clicked{ width: 100px; height: 40px; border-radius: 3px; background-color: #cba; } </style> <body> <a href="#" id="test" >yes</a> <script type="text/javascript" src="jquery-1.10.2.min.js"> </script> <script type="text/javascript"> $(function() { $('a').click(function(event) { $(this).addClass('clicked'); setTimeout(function(){ $(this).removeClass('clicked'); },3000); }); }); </script> </body> </html>
发现过了”一天” 这个button的效果也没有被移除,这让我十分的诧异.jQuery出了问题?
我毫不犹豫的问了自己这样一个问题,紧接着,我就否决了.为啥呢?由于我认为我想多了…..
可是这件事要搞明确.
可是问题在以下,为什么以下的那个setTimeout()无法工作呢.
我百思不得其解.
于是乎,我在setTimeout的匿名函数中打印了这种东西.
cosole.log(this === window);
返回值 true //////? what.
怎么会这样,我是写着玩的…
于是我又细致探究了一下.
原来
在传统的onevent属性代码中,this 引用接收事件元素 —可是仅仅在属性中,而不在从属调用的函数中.
这句话是什么意思呢?
就是它确实是在我们的那个click中.可是假设在里面调用闭包的函数时,this对象就又又一次指回了我们的window对象.
那要如何解决问题呢…非常好办啊..
<span style="font-size:18px;"><script type="text/javascript"> $(function() { $('a').click(function(event) { $this = $(this); $this.addClass('clicked'); setTimeout(function(){ console.log(this === window); $this.removeClass('clicked');//2 },3000); }); }); </script></span>
对了.就是将$(this) 保存成一个本地的变量..那么为什么将this 或者$(this)拷贝到一个本地变量能解决问题?
javascript为參数核函数的局部变量创建了一个闭包.
闭包能够归纳为一下的4个内容.
1能够在javascript函数中嵌套还有一个函数,嵌套能够为多级.
2函数不仅能读取自己的 參数和局部变量,并且能读写嵌套函数中的变量.
3即使外部函数已经返回之后再调用内部函数相同有效.比方setTimeout
4无论匿名或者命名函数都一样.this是javascript特殊的keyword,所以这些原则都不适用,通过将this的值拷贝到一个局部变量中,就能利用闭包使该值在不论什么嵌套函数中使用.
Best Wishes.
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/116074.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...