JavaScript中的this妙用實例分析
本文實例講述了JavaScript中的this妙用。分享給大家供大家參考，具體如下：
JavaScript關鍵字this始JS腳本能夠根據使用這個關鍵字的上下文將值傳遞給函數。
我們先來看如下一個網頁，在用戶單擊鏈接之后，彈出一個alert框，然后再轉到href屬性所指的網頁
HTML：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>JavaScript中的this妙用</title> <script type='text/javascript' src='http://www.lshqa.cn/bcjs/js/script.js'></script></head><body> <p style='text-algin:center;'> 你好，點擊這里去<a rel='external nofollow' >舊物商店</a> </p></body></html>
JS：
window.onload = initAll;function initAll(){ document.getElementById('redirect').onclick = initRedirect;}function initRedirect(){ alert('這是我創建的舊物商城，歡迎訪問！'); window.location = this; return false;}
你可能會主要到，代碼中并沒有引用特定的網頁——這是this關鍵字的作用之一。this替我們完成的工作之一是從HTML鏈接獲得URL（也就是a標簽的href屬性）。由于采用這種方式，如果以后腳本改為指向其他的頁面而不是舊物商店頁面，就不必修改JS。實際上，可以讓WEB站點上的所有鏈接都調用這個相同的JS代碼，這一行代碼都會自動獲得相應的href值。
這樣寫還有一個好處：如果用戶的瀏覽器不理解JavaScript（比如禁用了JS）,那么它只會加載HTML頁面，而不顯示alert提示，當他們點擊鏈接時，會像一般情況下那樣加載頁面，不會發生錯誤，沒有任何問題。我們在來看一個switch/case例子，創建如下頁面：
HTML：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>JavaScript中的this妙用</title> <script type='text/javascript' src='http://www.lshqa.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入門很簡單》這本書附帶關盤，這個年代其實沒什么卵用了，它在我的商店售價28元！'); break; case 'Html' : alert('《HTML5秘籍》這本書是圖靈系統的圖書，非常值得擁有，它在我的商店售價25元，賣的非常好！'); break; default : alert('沒有這本書'); }}
直接用this.id作為switch的參數也是可以的。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容可查看本站專題：《JavaScript常用函數技巧匯總》、《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章：
網公網安備