當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript中的this妙用

發布時間：2025/3/18 javascript 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 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="js/script.js"></script> </head> <body><p style="text-algin:center;">你好，點擊這里去<a id="redirect" href="http://www.mybry.com/obj/store/list.html">舊物商店</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="js/script.js"></script> </head> <body><h2>閑置二手圖書</h2><form action="#"><input type="button" id="Java" value="Java" /><input type="button" id="JavaScript" value="JavaScript" /><input type="button" id="MySQL" value="MySQL" /><input type="button" id="Html" value="HTML5" /></form> </body> </html>

JS:

在線演示
直接用this.id作為switch的參數也是可以的。

總結

以上是生活随笔為你收集整理的JavaScript中的this妙用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Btrace详细指南（JDK7，监控Ha
下一篇： gradle idea java ssm