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.b3g6.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)建的舊物商城，歡迎訪問！'); window.location = this; return false;}
你可能會(huì)主要到，代碼中并沒有引用特定的網(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值。
這樣寫還有一個(gè)好處：如果用戶的瀏覽器不理解JavaScript（比如禁用了JS）,那么它只會(huì)加載HTML頁(yè)面，而不顯示alert提示，當(dāng)他們點(diǎn)擊鏈接時(shí)，會(huì)像一般情況下那樣加載頁(yè)面，不會(huì)發(fā)生錯(cuò)誤，沒有任何問題。我們?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.b3g6.com/bcjs/js/script.js'></script></head><body> <h2>閑置二手圖書</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程序員基本功》這本書是李剛寫的，在我的商店售價(jià)30元！'); break; case 'JavaScript' : alert('《JavaScript語(yǔ)言精粹》這本書是Yahoo的一位工程師寫的，在我的商店售價(jià)15元！'); break; case 'MySQL' : alert('《MySQL入門很簡(jiǎn)單》這本書附帶關(guān)盤，這個(gè)年代其實(shí)沒什么卵用了，它在我的商店售價(jià)28元！'); break; case 'Html' : alert('《HTML5秘籍》這本書是圖靈系統(tǒng)的圖書，非常值得擁有，它在我的商店售價(jià)25元，賣的非常好！'); break; default : alert('沒有這本書'); }}
直接用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)文章：
網(wǎng)公網(wǎng)安備