用了很久JavaScript,對【this】的認識只局限于以往的憑經驗而已,不過今天發現了好東西“ http://www.quirksmode.org/js/associative.html ”,詳細描述了如何使用【this】關鍵字,在這里我就簡短的說一下重點,如果有疑問可以直接參考原文。
在學習過有this的編程語言中,this一般都是指向當前實例對象的,對于JavaScript來說,其實也是這樣。但有時候在使用【this】時,會感覺它的行為很奇怪,不能能達到預期的效果,這往往是因為沒有正確的了解【this】本身所指向的真正的實例對象所引起的。
在JavaScript中,【this】總是指向執行函數的調用者,或者可以說是指向擁有方法的對象。
例子中,函數【doSomething】定義在頁面中,所以它指向的就應該是當前頁面,即全局對象【window】。但是,如果我們在頁面中某個元素的屬性內部使用了【this】,那么【this】指向的內容就是這個元素。如下面的例子,【this】指的就是元素【input】。
再看一個類定義的例子:
首先定義一個類【CSDN】,并為這個類添加一個【output】方法,output方法內使用的【this】所指向的內容,就是類【CSDN】的實例對象【new CSDN()】。也就是之前說的,【this】指向擁有方法【output】的實例對象【new CSDN()】。
接下來我們來學習一個重要的概念,拷貝與引用。
我們比較一下上面兩種用法。第一種用法是將函數【doSomething】拷貝到【element】的【onclick】事件句柄中,這樣【doSomething】的內容就成為元素【element】的一個方法,當該方法被執行時,【this】所指向的內容即為方法的擁有者【element】。但對于第二種用法(內聯方式)來說,實際上是一種變相的調用,當【click】事件被觸發時,【doSomething】確實會被調用,但并非作為元素【element】的方法來調用,所以【this】也就不會指向【element】了。
從代碼上看,拷貝方法所執行的代碼就是:
而引用方式執行的代碼是:
從執行的代碼中看,方法【doSomething】的擁有者并非當前元素,所以【this】的指向自然也不是當前元素了。
圖解:
在內聯的引用方式下,可以通過使用【document.getElementById】或【event.target】來達到使用【this】的效果,但在使用【event.target】之前,最好查閱相關的文檔說明。
拷貝舉例:
引用舉例:
拷貝與引用的混合使用:
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
