近期在寫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出了問題?
js中this的作用、
我毫不猶豫的問了自己這樣一個問題,緊接著,我就否決了.為啥呢?由于我認為我想多了.....
可是這件事要搞明確.
可是問題在以下,為什么以下的那個setTimeout()無法工作呢.
js中的this詳解、我百思不得其解.
于是乎,我在setTimeout的匿名函數中打印了這種東西.
cosole.log(this === window);
返回值 true //? what.
js中this指向問題。怎么會這樣,我是寫著玩的...
于是我又細致探究了一下.
原來
在傳統的onevent屬性代碼中,this 引用接收事件元素 ---可是僅僅在屬性中,而不在從屬調用的函數中.
javascript 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.
