JavaScript中的this妙用實例分析
本文實例講述了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://www.hdgsjgj.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('這是我創(chuàng)建的舊物商城，歡迎訪問！'); window.location = this; return false;}
你可能會主要到，代碼中并沒有引用特定的網(wǎng)頁——這是this關(guān)鍵字的作用之一。this替我們完成的工作之一是從HTML鏈接獲得URL（也就是a標(biāo)簽的href屬性）。由于采用這種方式，如果以后腳本改為指向其他的頁面而不是舊物商店頁面，就不必修改JS。實際上，可以讓W(xué)EB站點上的所有鏈接都調(diào)用這個相同的JS代碼，這一行代碼都會自動獲得相應(yīng)的href值。
這樣寫還有一個好處：如果用戶的瀏覽器不理解JavaScript（比如禁用了JS）,那么它只會加載HTML頁面，而不顯示alert提示，當(dāng)他們點擊鏈接時，會像一般情況下那樣加載頁面，不會發(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://www.hdgsjgj.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)盤，這個年代其實沒什么卵用了，它在我的商店售價28元！'); break; case 'Html' : alert('《HTML5秘籍》這本書是圖靈系統(tǒng)的圖書，非常值得擁有，它在我的商店售價25元，賣的非常好！'); break; default : alert('沒有這本書'); }}
直接用this.id作為switch的參數(shù)也是可以的。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(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é)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章：
1. 存儲于xml中需要的HTML轉(zhuǎn)義代碼2. python 浮點數(shù)四舍五入需要注意的地方3. Java GZip 基于內(nèi)存實現(xiàn)壓縮和解壓的方法4. python開發(fā)一款翻譯工具5. 利用CSS制作3D動畫6. jsp+servlet簡單實現(xiàn)上傳文件功能（保存目錄改進）7. Springboot 全局日期格式化處理的實現(xiàn)8. 完美解決vue 中多個echarts圖表自適應(yīng)的問題9. SpringBoot+TestNG單元測試的實現(xiàn)10. PHP實現(xiàn)簡單線性回歸之?dāng)?shù)學(xué)庫的重要性
網(wǎng)公網(wǎng)安備