JavaScript中的this妙用

jayzou 發布于2019-08-19 17:47 / 3041人閱讀

摘要：關鍵字始腳本能夠根據使用這個關鍵字的上下文將值傳遞給函數。替我們完成的工作之一是從鏈接獲得也就是標簽的屬性。實際上，可以讓站點上的所有鏈接都調用這個相同的代碼，這一行代碼都會自動獲得相應的值。

JavaScript關鍵字this始JS腳本能夠根據使用這個關鍵字的上下文將值傳遞給函數。
我們先來看如下一個網頁，在用戶單擊鏈接之后，彈出一個alert框，然后再轉到href屬性所指的網頁
HTML：

JavaScript中的this妙用

你好，點擊這里去舊物商店

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：




    
    JavaScript中的this妙用
    


    閑置二手圖書

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的參數也是可以的。

GPU云服務器云服務器 javaScript中的this js中的this js中的this機制 js中的this與html

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78835.html

Javascript中數組方法reduce的妙用之處

摘要：數組方法中，相比等常用的迭代方法，常常被我們所忽略，今天一起來探究一下在我們實戰開發當中，能有哪些妙用之處，下面從語法開始介紹。按順序運行異步函數我們可以做的另一件事是按順序運行而不是并行。函數返回一個對象，可以使用方法添加回調函數。 showImg(https://segmentfault.com/img/remote/1460000019423051); Javascript數組方...

yiliang 2019-08-23 18:01 評論0 收藏0
React 應用設計之道 - curry 化妙用

摘要：右側展現對應產品。我們使用命名為的對象表示過濾條件信息，如下此數據需要在組件中進行維護。因為組件的子組件和都將依賴這項數據狀態。化應用再回到之前的場景，我們設計化函數，進一步可以簡化為對于的偏應用即上面提到的相信大家已經理解了這么做的好處。 showImg(https://segmentfault.com/img/remote/1460000014458612?w=1240&h=663...

sewerganger 2019-08-22 16:27 評論0 收藏0
React 應用設計之道 - curry 化妙用

摘要：右側展現對應產品。我們使用命名為的對象表示過濾條件信息，如下此數據需要在組件中進行維護。因為組件的子組件和都將依賴這項數據狀態。化應用再回到之前的場景，我們設計化函數，進一步可以簡化為對于的偏應用即上面提到的相信大家已經理解了這么做的好處。 showImg(https://segmentfault.com/img/remote/1460000014458612?w=1240&h=663...

LinkedME2016 2019-08-02 10:14 評論0 收藏0
javascript-從toString方法在判斷復雜數據類型上的妙用，引申到對原型鏈的理解

摘要：所以，當我們使用時，不能進行復雜數據類型的判斷，因為它調用的是，雖然也繼承自，但在上重寫了，而我們通過實際上是通過原型鏈調用了。關于 toString 方法在有關js的開發中使用應該是相當廣泛的，這兩天在看jQuery的源碼，從 toString 本身了解與鞏固了不少知識，寫出來與大家一同分享。首先先上一段代碼： var arr=[1,2,3]; toString.call(arr)...

sean 2019-08-20 10:41 評論0 收藏0