標籤：javascript jquery
最近在寫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>
我毫不猶豫的問了自己這樣一個問題,緊接著,我就否決了.為啥呢?因為我覺得我想多了.....
但是這件事要搞明白.
但是問題在下面,為什麼下面的那個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>
javascript為參數核函數的局部變數建立了一個閉包.
閉包可以歸納為一下的4個內容.
1可以在javascript函數中嵌套另一個函數,嵌套可以為多級.
2函數不僅能讀取自己的 參數和局部變數,而且能讀寫嵌套函數中的變數.
3即使外部函數已經返回之後再調用內建函式同樣有效.比如setTimeout
4不管匿名或者命名函數都一樣.this是javascript特殊的關鍵字,所以這些原則都不適用,通過將this的值複製到一個局部變數中,就能利用閉包使該值在任何嵌套函數中使用.
Best Wishes.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
