JavaScript中的this妙用實(shí)例分析
本文實(shí)例講述了JavaScript中的this妙用。分享給大家供大家參考，具體如下：
JavaScript關(guān)鍵字this始JS腳本能夠根據(jù)使用這個關(guān)鍵字的上下文將值傳遞給函數(shù)。
我們先來看如下一個網(wǎng)頁，在用戶單擊鏈接之后，彈出一個alert框，然后再轉(zhuǎn)到href屬性所指的網(wǎng)頁
HTML：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>JavaScript中的this妙用</title> <script type='text/javascript' src='http://m.cgvv.com.cn/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;}
你可能會主要到，代碼中并沒有引用特定的網(wǎng)頁——這是this關(guān)鍵字的作用之一。this替我們完成的工作之一是從HTML鏈接獲得URL（也就是a標(biāo)簽的href屬性）。由于采用這種方式，如果以后腳本改為指向其他的頁面而不是舊物商店頁面，就不必修改JS。實(shí)際上，可以讓W(xué)EB站點(diǎn)上的所有鏈接都調(diào)用這個相同的JS代碼，這一行代碼都會自動獲得相應(yīng)的href值。
這樣寫還有一個好處：如果用戶的瀏覽器不理解JavaScript（比如禁用了JS）,那么它只會加載HTML頁面，而不顯示alert提示，當(dāng)他們點(diǎn)擊鏈接時，會像一般情況下那樣加載頁面，不會發(fā)生錯誤，沒有任何問題。我們在來看一個switch/case例子，創(chuàng)建如下頁面：
HTML：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>JavaScript中的this妙用</title> <script type='text/javascript' src='http://m.cgvv.com.cn/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程序員基本功》這本書是李剛寫的，在我的商店售價30元！'); break; case 'JavaScript' : alert('《JavaScript語言精粹》這本書是Yahoo的一位工程師寫的，在我的商店售價15元！'); break; case 'MySQL' : alert('《MySQL入門很簡單》這本書附帶關(guān)盤，這個年代其實(shí)沒什么卵用了，它在我的商店售價28元！'); break; case 'Html' : alert('《HTML5秘籍》這本書是圖靈系統(tǒng)的圖書，非常值得擁有，它在我的商店售價25元，賣的非常好！'); break; default : alert('沒有這本書'); }}
直接用this.id作為switch的參數(shù)也是可以的。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章：
1. HTML5 Canvas繪制圖形從入門到精通2. HTTP協(xié)議常用的請求頭和響應(yīng)頭響應(yīng)詳解說明（學(xué)習(xí)）3. HTML5實(shí)戰(zhàn)與剖析之觸摸事件(touchstart、touchmove和touchend)4. XML入門的常見問題(三)5. HTML DOM setInterval和clearInterval方法案例詳解6. Vue如何使用ElementUI對表單元素進(jìn)行自定義校驗(yàn)及踩坑7. 不要在HTML中濫用div8. jscript與vbscript 操作XML元素屬性的代碼9. CSS清除浮動方法匯總10. XML在語音合成中的應(yīng)用
網(wǎng)公網(wǎng)安備