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)


相关推荐

  • phpstrom 激活码2021【在线破解激活】

    phpstrom 激活码2021【在线破解激活】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • mybatis 拦截器 添加参数_mybatis传递多个参数

    mybatis 拦截器 添加参数_mybatis传递多个参数上一篇中讲了mybatis拦截器的实现这一篇扩展mybatis在拦截器中添加额外参数在mybatis的mapper.xml文件中,我们可以使用#{}或${}的方式获取到参数,这些参数都需要提前我们在mapper.java接口文件中通过参数的方式传入参数才能取到为了扩展参数,我们需要了解mybatis是怎么帮我们保管mapper.java中传入的参数的进入Executor.java接口查看query方法,可以看到第一个参数MappedStatement对象中有一个parameterMap字段,该字段是

  • jenkins教程

    jenkins教程最近接了公司的挺多运维的活,刚开始很新鲜,后面天天部署各种项目的测试环境和生产环境,加上每个项目n个服务,我就变成了骚是骚,就是太累了。于是我想到了之前一直想用的jenkinsjenkins的作用和它的图标表现出来的一样,就是为了做工作的时候,能够比较轻松,像一个绅士一样游刃有余。一、安装1、进入官网,找到download找来找去,在最下面有个.war因为我是做…

  • Java 异常

    Java 异常

  • JavaScript面向对象思想

    JavaScript面向对象思想javascript中的面向对象:ECMA标准定义JS中的对象:无序属性的集合,其属性可以包含基本值、对象或者函数。可以简单理解为JS的对象是一组无序的值,其中的属性或方法都有一个名字,根据这个名字可以访问相映射的值(值可以是基本值/对象/方法)面向对象三个基本特征是:封装、继承、多态封装:将对象运行所需的资源封装在程序对象中,基本上是方法和数据。对象是“公布其接口”。其他附加到这些接口上的对象不需要关心对象实现的方法即可使用这个对象。这个概念就是“不要告诉我你是怎么做的,只要做就可以了。”对象可

    2022年10月31日
  • 生物识别指纹_生物指纹识别技术

    生物识别指纹_生物指纹识别技术锁屏要使用指纹解锁,首先要注册指纹服务,我看过的一些大厂项目中,实际上是在KeyguardUpdate.java类中发起注册的,一般是根据当前状态,是不是已经处于上锁状态(侧边指纹机器,是不等上锁即进行指纹服务注册,屏下指纹需要等上锁后,才发起指纹服务注册)。………………………

发表回复

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

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