JavaScript中的this妙用實(shí)例分析

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

這篇文章主要介紹了JavaScript中的this妙用,結(jié)合實(shí)例形式分析了JavaScript中的this基本功能、用法及操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了JavaScript中的this妙用。分享給大家供大家參考，具體如下：

JavaScript關(guān)鍵字this始JS腳本能夠根據(jù)使用這個(gè)關(guān)鍵字的上下文將值傳遞給函數(shù)。

我們先來(lái)看如下一個(gè)網(wǎng)頁(yè)，在用戶(hù)單擊鏈接之后，彈出一個(gè)alert框，然后再轉(zhuǎn)到href屬性所指的網(wǎng)頁(yè)

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;">
    你好，點(diǎn)擊這里去<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)建的舊物商城，歡迎訪問(wèn)！");
  window.location = this;
  return false;
}

你可能會(huì)主要到，代碼中并沒(méi)有引用特定的網(wǎng)頁(yè)——這是this關(guān)鍵字的作用之一。this替我們完成的工作之一是從HTML鏈接獲得URL（也就是a標(biāo)簽的href屬性）。由于采用這種方式，如果以后腳本改為指向其他的頁(yè)面而不是舊物商店頁(yè)面，就不必修改JS。實(shí)際上，可以讓W(xué)EB站點(diǎn)上的所有鏈接都調(diào)用這個(gè)相同的JS代碼，這一行代碼都會(huì)自動(dòng)獲得相應(yīng)的href值。

這樣寫(xiě)還有一個(gè)好處：如果用戶(hù)的瀏覽器不理解JavaScript（比如禁用了JS）,那么它只會(huì)加載HTML頁(yè)面，而不顯示alert提示，當(dāng)他們點(diǎn)擊鏈接時(shí)，會(huì)像一般情況下那樣加載頁(yè)面，不會(huì)發(fā)生錯(cuò)誤，沒(méi)有任何問(wèn)題。
我們?cè)趤?lái)看一個(gè)switch/case例子，創(chuàng)建如下頁(yè)面：

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>閑置二手圖書(shū)</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程序員基本功》這本書(shū)是李剛寫(xiě)的，在我的商店售價(jià)30元！");
      break;
    case "JavaScript" : 
      alert("《JavaScript語(yǔ)言精粹》這本書(shū)是Yahoo的一位工程師寫(xiě)的，在我的商店售價(jià)15元！");
      break;
    case "MySQL" : 
      alert("《MySQL入門(mén)很簡(jiǎn)單》這本書(shū)附帶關(guān)盤(pán)，這個(gè)年代其實(shí)沒(méi)什么卵用了，它在我的商店售價(jià)28元！");
      break;
    case "Html" : 
      alert("《HTML5秘籍》這本書(shū)是圖靈系統(tǒng)的圖書(shū)，非常值得擁有，它在我的商店售價(jià)25元，賣(mài)的非常好！");
      break;
    default : 
      alert("沒(méi)有這本書(shū)");
  }
}

直接用this.id作為switch的參數(shù)也是可以的。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

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

您可能感興趣的文章: