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

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

大家好,又见面了,我是全栈君。

近期在写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账号...

(0)


相关推荐

  • 错位排序公式_完全错位排列数

    错位排序公式_完全错位排列数首先,对于D(n),有1~n这样n个元素错排,所以对于第一个元素①,它现在可能的位置有(n-1)个,倘若它在第k个元素的位置上,对于第k个元素而言,它所在的位置就有两种可能—第一种,它处在非第一个元素①位置上,所以对于接下来的排列就相当于是n-1个元素的错排,即D(n-1);第二种,它处在第一个元素①的位置上,所以在排列D(n)中有两个元素找到了位置,那么接下来的队列就相当于是n-2个元素的错排。…

    2022年10月22日
  • 微信模拟位置想在哪就在哪(GPS欺骗)

    微信模拟位置想在哪就在哪(GPS欺骗)微信模拟位置是通过位置欺骗,让微信误以为我们就在当前的位置进行周边好友的搜索与添加。这是一个很老的功能,为什么说很老呢?因为这是在android4.1的时候流行的一个功能,android在4.4推出后这个功能基本不能使用了!即使很老但是最近也碰到了这样的需求,不过针对特殊的群体,手机定制而来,就没有限制了!首先我们要知道怎么用:首先:我们从设置里找到开发者选项(开发者都知道):在这里就是,开发人

  • 基于fpga的spi通信设计_协议的概念

    基于fpga的spi通信设计_协议的概念一、SPI协议1、SPI协议概括SPI(SerialPeripheralInterface)——串行外围设备接口。是Motorola首先在其MC68HCXX系列处理器上定义的。SPI接口主要应用在EEPROM、FLASH、实时时钟,AD转换器以及数字信号处理器和数字信号解码器之间。SPI是一种高速,全双工,同步的通信总线,在芯片上只占用四根线(CS、MOSI、MISO、SCK),极大的…

    2022年10月15日
  • 【STM32】HAL库 STM32CubeMX教程十三—RTC时钟

    【STM32】HAL库 STM32CubeMX教程十三—RTC时钟前言:本系列教程将对应外设原理,HAL库与STM32CubeMX结合在一起讲解,使您可以更快速的学会各个模块的使用所用工具:1、芯片:STM32F407ZET6/STM32F103ZET62、STM32CubeMx软件3、IDE:MDK-Keil软件4、STM32F1xx/STM32F4xxHAL库知识概括:通过本篇博客您将学到:RTC时钟原理STM32CubeMX创建…

  • java notifyall_notify的用法

    java notifyall_notify的用法作者:知乎用户链接:https://www.zhihu.com/question/37601861/answer/145545371来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。今天正好碰到这个问题,也疑惑了好久。看了一圈知乎上的答案,感觉没说到根上。所以自己又好好Google了一下,终于找到了让自己信服的解释。先说两个概念:锁池和等待池锁池:假设线程A已经拥有了某…

  • 支付宝授权登录淘宝_vue的登录实现

    支付宝授权登录淘宝_vue的登录实现api接口文档:https://docs.open.alipay.com/289/105656后台管理系统原本是用账号密码登录的,不过需求要改成支付宝授权,前端仅仅需要改登录页,以及添加一个授权返

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号