JavaScript中的this妙用實(shí)例分析
本文實(shí)例講述了JavaScript中的this妙用。分享給大家供大家參考，具體如下：
JavaScript關(guān)鍵字this始JS腳本能夠根據(jù)使用這個(gè)關(guān)鍵字的上下文將值傳遞給函數(shù)。
我們先來(lái)看如下一個(gè)網(wǎng)頁(yè)，在用戶單擊鏈接之后，彈出一個(gè)alert框，然后再轉(zhuǎn)到href屬性所指的網(wǎng)頁(yè)
HTML：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>JavaScript中的this妙用</title> <script type='text/javascript' src='http://www.gepszalag.com/bcjs/js/script.js'></script></head><body> <p style='text-algin:center;'> 你好，點(diǎn)擊這里去<a rel='external nofollow' >舊物商店</a> </p></body></html>
JS：
window.onload = initAll;function initAll(){ document.getElementById('redirect').onclick = initRedirect;}function initRedirect(){ alert('這是我創(chuàng)建的舊物商城，歡迎訪問(wèn)！'); window.location = this; return false;}
你可能會(huì)主要到，代碼中并沒(méi)有引用特定的網(wǎng)頁(yè)——這是this關(guān)鍵字的作用之一。this替我們完成的工作之一是從HTML鏈接獲得URL（也就是a標(biāo)簽的href屬性）。由于采用這種方式，如果以后腳本改為指向其他的頁(yè)面而不是舊物商店頁(yè)面，就不必修改JS。實(shí)際上，可以讓W(xué)EB站點(diǎn)上的所有鏈接都調(diào)用這個(gè)相同的JS代碼，這一行代碼都會(huì)自動(dòng)獲得相應(yīng)的href值。
這樣寫(xiě)還有一個(gè)好處：如果用戶的瀏覽器不理解JavaScript（比如禁用了JS）,那么它只會(huì)加載HTML頁(yè)面，而不顯示alert提示，當(dāng)他們點(diǎn)擊鏈接時(shí)，會(huì)像一般情況下那樣加載頁(yè)面，不會(huì)發(fā)生錯(cuò)誤，沒(méi)有任何問(wèn)題。我們?cè)趤?lái)看一個(gè)switch/case例子，創(chuàng)建如下頁(yè)面：
HTML：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>JavaScript中的this妙用</title> <script type='text/javascript' src='http://www.gepszalag.com/bcjs/js/script.js'></script></head><body> <h2>閑置二手圖書(shū)</h2> <form action='#'> <input type='button' value='Java' /> <input type='button' value='JavaScript' /> <input type='button' value='MySQL' /> <input type='button' value='HTML5' /> </form></body></html>
JS:
window.onload = initAll;function initAll(){ document.getElementById('Java').onclick = viewDetail; document.getElementById('JavaScript').onclick = viewDetail; document.getElementById('MySQL').onclick = viewDetail; document.getElementById('Html').onclick = viewDetail;}function viewDetail(){ console.log('this.id='+this.id); switch(this.id){ case 'Java' : alert('《Java程序員基本功》這本書(shū)是李剛寫(xiě)的，在我的商店售價(jià)30元！'); break; case 'JavaScript' : alert('《JavaScript語(yǔ)言精粹》這本書(shū)是Yahoo的一位工程師寫(xiě)的，在我的商店售價(jià)15元！'); break; case 'MySQL' : alert('《MySQL入門很簡(jiǎn)單》這本書(shū)附帶關(guān)盤(pán)，這個(gè)年代其實(shí)沒(méi)什么卵用了，它在我的商店售價(jià)28元！'); break; case 'Html' : alert('《HTML5秘籍》這本書(shū)是圖靈系統(tǒng)的圖書(shū)，非常值得擁有，它在我的商店售價(jià)25元，賣的非常好！'); break; default : alert('沒(méi)有這本書(shū)'); }}
直接用this.id作為switch的參數(shù)也是可以的。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章：
1. 解決Python 進(jìn)程池Pool中一些坑2. 三個(gè)不常見(jiàn)的 HTML5 實(shí)用新特性簡(jiǎn)介3. Python獲取抖音關(guān)注列表封號(hào)賬號(hào)的實(shí)現(xiàn)代碼4. Python使用jupyter notebook查看ipynb文件過(guò)程解析5. ajax請(qǐng)求添加自定義header參數(shù)代碼6. python利用os模塊編寫(xiě)文件復(fù)制功能——copy()函數(shù)用法7. Python如何讀寫(xiě)CSV文件8. php網(wǎng)絡(luò)安全中命令執(zhí)行漏洞的產(chǎn)生及本質(zhì)探究9. php測(cè)試程序運(yùn)行速度和頁(yè)面執(zhí)行速度的代碼10. 無(wú)線標(biāo)記語(yǔ)言(WML)基礎(chǔ)之WMLScript 基礎(chǔ)第1/2頁(yè)
網(wǎng)公網(wǎng)安備