jQuery 之 $(this) 出了什么问题?

浏览数：14 / 时间：2015年06月09日

最近在写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>

发现过了"一天" 这个按钮的效果也没有被移除,这让我十分的诧异.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特殊的关键字,所以这些原则都不适用,通过将this的值复制到一个局部变量中,就能利用闭包使该值在任何嵌套函数中使用.

Best Wishes.

jQuery 之 $(this) 出了什么问题?,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jQuery 之 $(this) 出了什么问题?