<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    "this" of JavaScript你理解有多少?

    Posted on 2006-11-27 16:48 Jaunt 閱讀(250) 評論(0)  編輯  收藏 所屬分類: JavaScript
    譯者:Flyingis
    編輯:Jaunt
    原載:http://www.tkk7.com/flyingis/archive/2006/09/15/69888.html

    this是JavaScript中功能最強大的關鍵字之一。

    Owner

    接下來文章中我們將要討論的問題是:在函數doSomething()中this所指的是什么?

    function ?doSomething()? {
    ??
    this .style.color? =
    ?'#cc0000';
    }

    在JavaScript中,this通常指向的是我們正在執行的函數本身,或者是,指向該函數所屬的對象。當我們在頁面中定義了函數doSomething()的時候,或者是JavaScript中的window對象(或global對象)。對于一個onclick屬性,它為它所屬的HTML元素所擁有,this應該指向該HTML元素。

    這種“所有權”就是JavaScript中面向對象的一種方式。?

    this1.gif

    如果我們在沒有任何更多準備情況下執行doSomething(),this關鍵字會指向window,并且該函數試圖改變window的 style.color。因為window并沒有style對象,這個函數將非常不幸的運行失敗,并產生JavaScript錯誤。

    Copying
    ??
    因此如果我們想充分利用this,我們不得不注意使用this的函數應該被正確的HTML元素所擁有。換句話說,我們應該復制這個函數到我們的onclick屬性。


    element.onclick? = ?doSomething;

    這個函數被完整復制到onclick屬性(現在成為了函數)。因此如果這個event handler被執行,this將指向HTML元素,并且該元素的顏色得以改變。

    this2.gif

    這種方法使得我們能夠復制這個函數到多個event handler。每次this都將指向正確的HTML元素:

    this3.gif


    這樣你就可以最大限度使用this。每當執行該函數,this所指向的HTML元素都正確響應事件,這些HTML元素擁有doSomething()的一個拷貝。

    Referring

    然而,如果你使用inline event registration(內聯事件注冊)

    <element?onclick="doSomething()">

    你將不能拷貝該函數!反而這種差異是非常關鍵的。onclick屬性并不包含實際的函數,僅僅是一個函數調用。

    doSomething();

    因此,它將聲明“轉到doSomething()并且執行它”。當我們到達doSomething(),this關鍵字又重新指向了全局的window對象,函數返回錯誤信息。

    this4.gif

    The difference

    如果你想使用this來指向HTML元素響應的事件,你必須確保this關鍵字被寫在onclick屬性里。只有在這種情況下它才指向event handler所注冊的HTML元素。
    ?
    element.onclick?=?doSomething;
    alert(element.onclick)

    你將得到

    function?doSomething()?{
    ??
    this.style.color?=?'#cc0000';
    }

    正如你所見,this關鍵字被展現在onclick函數中,因此它指向HTML元素。
    但是如果執行

    <element?onclick="doSomething()">
    alert(element.onclick)

    你將得到

    function?onclick()?{
    ??doSomething()
    }

    這僅僅是到doSomething()函數的一個引用。this關鍵字并沒有出現在onclick函數中,因此它不指向HTML元素。
    主站蜘蛛池模板: 全部免费毛片在线播放| 久久亚洲精品国产精品婷婷| 亚洲av日韩片在线观看| 国产伦精品一区二区三区免费迷| 亚洲AV成人潮喷综合网| 边摸边吃奶边做爽免费视频99| 国产高清对白在线观看免费91| 一级毛片免费播放| 国产美女无遮挡免费网站| 久久精品国产亚洲av麻豆| 亚洲av产在线精品亚洲第一站| 亚洲精品国产高清在线观看| 国产精品免费在线播放| 亚洲一区二区三区AV无码| 亚洲av永久无码精品天堂久久| 韩国免费一级成人毛片| 久久亚洲中文字幕精品一区| 亚洲噜噜噜噜噜影院在线播放| aa在线免费观看| 性一交一乱一视频免费看| 亚洲视频在线免费观看| 色多多免费视频观看区一区| 国产亚洲人成网站在线观看| 免费人成在线观看视频高潮| 又大又黄又粗又爽的免费视频| 亚洲狠狠成人综合网| 免费在线观看亚洲| 色www永久免费网站| 中文字幕亚洲不卡在线亚瑟| 午夜免费啪视频在线观看| 国产成人精品亚洲日本在线| 精品一区二区三区免费毛片爱| 亚洲一区二区三区国产精品| 自拍偷区亚洲国内自拍| 亚洲精品国产va在线观看蜜芽| 亚洲精品美女久久久久久久| 国产亚洲精品成人a v小说| 91精品免费国产高清在线| 香蕉视频在线观看亚洲| 成全视频免费观看在线看| 456亚洲人成影院在线观|