"this" in OOP Ereignisse

Question

Schauen Sie diesen Code:

<script type = "text/javascript"> 
    function mouseClick (container) { 
     container.appendChild (document.createTextNode ("Can you show me ? Try clicking anywhere.")); 

     this.tryShowMe = "Yes man ! You can !" 

     window.addEventListener ("click", function (event) { 
      var ok = typeof this.tryShowMe === "undefined" ? "No, you can't." : this.tryShowMe; 

      alert (ok); 
     }, false); 
    } 

    window.addEventListener ("load", function() { 
     new mouseClick (document.body); 
    }, false); 
</script> 

Die "this.tryShowMe" bezieht sich auf das Element "Fenster", stattdessen möchte ich auf das Objekt verweisen. Kann ich das machen ?

Dank

Answer 1

Das ist ein häufiger Fehler in JavaScript.

Du fügt den Ereignis-Listener zu window deshalb Fenstern, um die Funktion aufrufen, die in den this innerhalb der Funktion führen wird zu window gesetzt.

this verweist nie einen äußeren Umfang in JavaScript, auch wenn Sie eine einfache Funktion wie foo() in eine andere Funktion aufrufen, die this innerhalb von foo auf das globale Objekt nicht erfüllt.

Wenn Sie eine äußere zugreifen möchten this Sie müssen einen Verweis auf sie halten:

someObject.method = function() { 
    var that = this; 
    function test() { 
     that; // refers to someObject 
     this; // refers to window 
    } 
    test(); 
} 

Eine Übersicht über die möglichen Werte und Tücken des this, werfen Sie einen Blick here.