Zugriff auf Instanzvariablen aus anderen Funktionen

Ich kann nicht auf eine JavaScript-Variable von einer anderen Funktion zugreifen, die in der Konstruktorfunktion instanziiert wurde. Es gibt undefined zurück.Zugriff auf Instanzvariablen aus anderen Funktionen

Ich bin instanziieren ein neues Objekt der Klasse Box, und in der Konstruktorfunktion, Definieren von Instanzvariablen, Erstellen von HTML-Elementen und Einrichten eines Ereignis-Listeners. Der Handler für diesen Listener, clickHandler, ist eine Funktion, die auf dem Prototyp definiert ist. Von clickHandler versuche ich auf die Variable this.selected zuzugreifen. Aber ich bekomme undefined.

Der Code:

HTML

<!DOCTYPE html> 
<html> 
<head> 

<title>Test</title> 
</head> 
<body> 

<div id="element1"></div> 
<br/> 
<div id="element2"></div> 

<script type="text/javascript" src="script.js"></script> 
<script> 
    init([{id: "element1"}, {id: "element2"}]); //call init function 
</script> 

</body> 
</html>

Javascript script.js

function Box(id, count) { //the class 
    this.selected = false; //need this variable in clickHandler 
    this.div = document.createElement("div"); 
    this.div.id = "container" + count; 
    this.div.style.width = "250px"; 
    this.div.style.height = "150px"; 
    this.div.style.border = "1px solid black"; 
    document.getElementById(id).appendChild(this.div); 
    this.div.addEventListener("click", this.clickHandler, false); //add event listener on the created div element 
} 

Box.prototype.clickHandler = function() { //click handler 
    console.log("clickHandler, selected = " + this.selected); // undefined 
}; 

function init(settings) { 
    //var obj; 
    for(var i = 0; i < settings.length; i++) { 
     new Box(settings[i].id, (i+1)); //instantiate new object 
    } 
}

Wie kann ich die this.selected Variable in verschiedenen Event-Handler-Funktionen zugreifen? Ich plane auf mehrere Ereignisse zu hören und brauche dafür die Variable this.selected. Danke für die Hilfe.

Quelle

2017-02-12 John

Mögliche Duplikat http://stackoverflow.com/questions/8100469/preserve-this-reference-in-javascript-prototype-event-handler und http://stackoverflow.com/questions/2025789/preserving-to-this-in-javascript-prototype-funktionen und http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a -Rückrufen – Connum

Ändern der Handler hinzugefügt:

this.div.addEventListener("click", this.clickHandler.bind(this), false);

Dies bindet das Objekt als „dieses“ Kontext in der Callback-Funktion.

function Box(id, count) { //the class 
 
    this.selected = false; //need this variable in clickHandler 
 
    this.div = document.createElement("div"); 
 
    this.div.id = "container" + count; 
 
    this.div.style.width = "250px"; 
 
    this.div.style.height = "150px"; 
 
    this.div.style.border = "1px solid black"; 
 
    document.getElementById(id).appendChild(this.div); 
 
    this.div.addEventListener("click", this.clickHandler.bind(this), false); 
 
} 
 

 
Box.prototype.clickHandler = function() { //click handler 
 
    console.log("clickHandler, selected = " + this.selected); // undefined 
 
}; 
 

 
function init(settings) { 
 
    //var obj; 
 
    for(var i = 0; i < settings.length; i++) { 
 
     new Box(settings[i].id, (i+1)); //instantiate new object 
 
    } 
 
} 
 
    init([{id: "element1"}, {id: "element2"}]); //call init function

<div id="element1"></div> 
 
<br/> 
 
<div id="element2"></div>

Quelle

2017-02-12 10:47:08 Connum

Zugriff auf Instanzvariablen aus anderen Funktionen

Antwort

Verwandte Themen