JavaScript中的this妙用實例分析

更新時間：2020年05月09日 11:23:49 作者：杜尼卜

這篇文章主要介紹了JavaScript中的this妙用,結(jié)合實例形式分析了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="js/script.js"></script>
</head>
<body>
  <p style="text-algin:center;">
    你好，點擊這里去<a id="redirect"  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標簽的href屬性）。由于采用這種方式，如果以后腳本改為指向其他的頁面而不是舊物商店頁面，就不必修改JS。實際上，可以讓WEB站點上的所有鏈接都調(diào)用這個相同的JS代碼，這一行代碼都會自動獲得相應(yīng)的href值。

這樣寫還有一個好處：如果用戶的瀏覽器不理解JavaScript（比如禁用了JS）,那么它只會加載HTML頁面，而不顯示alert提示，當他們點擊鏈接時，會像一般情況下那樣加載頁面，不會發(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="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:

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ù)學運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: