JavaScript中的this用法詳解(續)

    上篇中介紹了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
      需要說明的是,在函數也是個對象,因此需要區分 變量定義 和 成員變量定義,如下:

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


上面的代碼執行結果是:
頁面加載時,彈出對話框,輸出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,應該是因爲其中用到了沒有定義的變量 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章