• JavaScript中的this用法詳解(續)

    2016-07-12

        上篇中介紹了JavaScript中this關鍵字的各種用法,已經相當想盡,只是有些凌亂,另外第6點中的代碼如何解釋也是個問題,俺研究了半天,就在此做個補充和總結吧~

        歸納起來,JavaScript中的this用法有以下3種(詳細用法參原文):
        1.在HTML元素事件屬性 或 CSS的expression表達式 中inline方式使用this關鍵字——對應原文的1、7
        2.在事件處理函數中使用this關鍵字——對應原文的2、3
          其中可分為兩種方式
          (1)DOM方式——此種方式的結果是this指向窗口(window)對象
          (2)DHTML方式——此種方式的結果是this指向div元素對象實例
        3.在類定義中使用this關鍵字并在其 內部函數 或 成員函數(主要是prototype產生)中使用——對應原文的4、5、8
          需要說明的是,在函數也是個對象,因此需要區分 變量定義 和 成員變量定義,如下:
    <textarea cols="50" rows="15" name="code" class="javascript">var variableName; //變量定義 //作用域:函數定義范圍內 //使用方法:直接使用variableName this.varName; //成員變量定義 //作用域:函數對象定義范圍內及其成員函數中 //使用方法:this.varName</textarea>

     以上歸納出的三類this的使用方法中,第一種比較容易理解,這里對原文中第6點提到的程序進行了測試和改進如下,以說明上述后兩種使用方法:

    <textarea cols="50" rows="15" name="code" class="javascript">&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt; &lt;title&gt;Test "this"&lt;/title&gt; &lt;mce:script type="text/javascript"&gt;&lt;!-- function JSClass() { var varText = "func variable!"; //函數中的普通變量 this.m_Text = 'func member!'; //函數類的成員變量 this.m_Element = document.createElement('DIV'); //成員變量,創建一個div對象 this.m_Element.innerHTML = varText; //使用函數的普通變量 this.m_Element.attachEvent('onclick', this.ToString); //給這個對象的事件連上處理函數 this.newElement = document.createElement('DIV'); this.newElement.innerHTML = "new element"; this.newElement.m_Text = "new element text!"; //給創建的對象建個成員 this.newElement.onclick = function() { alert(this.m_Text); //指向div對象的成員 }; } JSClass.prototype.Render = function() { document.body.appendChild(this.m_Element); //把div對象掛在窗口上 document.body.appendChild(this.newElement); } JSClass.prototype.ToString = function() { alert(this.m_Text); //指向窗口(window)對象 }; function initialize(){ var jc = new JSClass(); jc.Render(); jc.ToString(); //里面的this指向JSClass類的實例,里面有m_Text成員 } // --&gt;&lt;/mce:script&gt; &lt;/head&gt; &lt;body&gt; &lt;mce:script type="text/javascript"&gt;&lt;!-- initialize(); // --&gt;&lt;/mce:script&gt; &lt;/body&gt; &lt;/html&gt; </textarea>
    上面的代碼執行結果是:
    頁面加載時,彈出對話框,輸出func member!
    頁面上顯示
      func variable!
      new element
    單擊func variable時,彈出對話框,顯示undefined
      ——因為這時toString函數里的this指針指向window
    單擊new element時,彈出對話框顯示new element text!
      ——因為這時toString函數里的this指針指向div元素,而該元素已經定義了m_Text成員(this.newElement.m_Text = "new element text!")

    注:此代碼及執行結果已在Opera及各IE內核的瀏覽器中測試通過,但不支持Firefox,應該是因為其中用到了沒有定義的變量 


    天堂网