成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript中的this妙用

jayzou / 3049人閱讀

摘要：關(guān)鍵字始腳本能夠根據(jù)使用這個(gè)關(guān)鍵字的上下文將值傳遞給函數(shù)。替我們完成的工作之一是從鏈接獲得也就是標(biāo)簽的屬性。實(shí)際上，可以讓站點(diǎn)上的所有鏈接都調(diào)用這個(gè)相同的代碼，這一行代碼都會(huì)自動(dòng)獲得相應(yīng)的值。

JavaScript關(guān)鍵字this始JS腳本能夠根據(jù)使用這個(gè)關(guān)鍵字的上下文將值傳遞給函數(shù)。
我們先來(lái)看如下一個(gè)網(wǎng)頁(yè)，在用戶單擊鏈接之后，彈出一個(gè)alert框，然后再轉(zhuǎn)到href屬性所指的網(wǎng)頁(yè)
HTML：




    
    JavaScript中的this妙用
    


    

        你好，點(diǎn)擊這里去舊物商店

JS：

window.onload = initAll;
function initAll(){
    document.getElementById("redirect").onclick = initRedirect;
}
function initRedirect(){
    alert("這是我創(chuàng)建的舊物商城，歡迎訪問！");
    window.location = this;
    return false;
}

在線演示

你可能會(huì)主要到，代碼中并沒有引用特定的網(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值。
這樣寫還有一個(gè)好處：如果用戶的瀏覽器不理解JavaScript（比如禁用了JS）,那么它只會(huì)加載HTML頁(yè)面，而不顯示alert提示，當(dāng)他們點(diǎn)擊鏈接時(shí)，會(huì)像一般情況下那樣加載頁(yè)面，不會(huì)發(fā)生錯(cuò)誤，沒有任何問題。
我們?cè)趤?lái)看一個(gè)switch/case例子，創(chuàng)建如下頁(yè)面：


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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78835.html

相關(guān)文章

  • Javascript中數(shù)組方法reduce的妙用之處

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

    yiliang 評(píng)論0 收藏0

  • React 應(yīng)用設(shè)計(jì)之道 - curry 化妙用

    摘要：右側(cè)展現(xiàn)對(duì)應(yīng)產(chǎn)品。我們使用命名為的對(duì)象表示過(guò)濾條件信息，如下此數(shù)據(jù)需要在組件中進(jìn)行維護(hù)。因?yàn)榻M件的子組件和都將依賴這項(xiàng)數(shù)據(jù)狀態(tài)?；瘧?yīng)用再回到之前的場(chǎng)景，我們?cè)O(shè)計(jì)化函數(shù)，進(jìn)一步可以簡(jiǎn)化為對(duì)于的偏應(yīng)用即上面提到的相信大家已經(jīng)理解了這么做的好處。 showImg(https://segmentfault.com/img/remote/1460000014458612?w=1240&h=663...

    sewerganger 評(píng)論0 收藏0

  • React 應(yīng)用設(shè)計(jì)之道 - curry 化妙用

    摘要：右側(cè)展現(xiàn)對(duì)應(yīng)產(chǎn)品。我們使用命名為的對(duì)象表示過(guò)濾條件信息，如下此數(shù)據(jù)需要在組件中進(jìn)行維護(hù)。因?yàn)榻M件的子組件和都將依賴這項(xiàng)數(shù)據(jù)狀態(tài)?；瘧?yīng)用再回到之前的場(chǎng)景，我們?cè)O(shè)計(jì)化函數(shù)，進(jìn)一步可以簡(jiǎn)化為對(duì)于的偏應(yīng)用即上面提到的相信大家已經(jīng)理解了這么做的好處。 showImg(https://segmentfault.com/img/remote/1460000014458612?w=1240&h=663...

    LinkedME2016 評(píng)論0 收藏0

  • javascript-從toString方法在判斷復(fù)雜數(shù)據(jù)類型上的妙用，引申到對(duì)原型鏈的理解

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

    sean 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<