Ich versuche, dieses Schlüsselwort in Javascript zu verstehen, ich habe verschiedene Artikel über gelesen, aber es scheint, ich habe noch einige Verwirrung.Bindung an dieses Schlüsselwort in Javascript
Zum Beispiel wollen wir den folgenden Code betrachten:
/*
* script.js
*/
var data = 'global data';
var myObj = {
data: 'object data',
scope: function() {
console.log(this.data);
}
};
myObj.scope(); // print "object data"
Also in diesem Fall der Aufrufkontext des Anwendungsbereichs() Funktion ist das Objekt, und diese auf das Objekt selbst gebunden ist.
Lassen Sie uns jetzt einige html hinzufügen ..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="clickme" id="button">
<script src="script.js"></script>
</body>
</html>
.. und ein Klick-Ereignis-Listener auf die Schaltfläche den Umfang auslösen() Funktion
document.getElementById("button").addEventListener('click', myObj.scope, false);
// click on the button => print "undefined"
Auf dem Click-Ereignis diese verweist zu dem Button-Objekt, das keine Dateneigenschaft hat, so druckt es korrekt undefiniert. Nun möchte ich dieses Problem zur Deklarationszeit mit der Bind-Methode beheben (anstelle von Call oder Apply). So schreibe ich:
/*
* script.js
*/
var data = 'global data';
var myObj = {
data: 'object data',
scope: function() {
console.log(this.data);
}.bind(this)
};
document.getElementById("button").addEventListener('click', myObj.scope, false);
myObj.scope(); // print "global data"
// click on the button => print "global data"
Es scheint, dass ich an das globale Objekt (Fenster) anstelle von myObj bin. Warum? Was ist der Unterschied zwischen dem dieses Schlüsselwort, das in der Zeile console.log (this.data) im ersten Beispiel verwendet wird und das in der Zeile bind (this) im letzten Beispiel? Sollten sich beide nicht auf das myObj beziehen? Ich bin sicher, ich habe etwas Verwirrung über diesen Punkt, also danke im Voraus für jede Erklärung :)
Sie müssen 'myObj.scope.bind (myObj)' an 'addEventListener' übergeben. Sie können die Funktion nicht innerhalb des Objektliterals binden. – Bergi
Es liegt daran, dass Sie * nur * die Funktion 'myObj.scope' selbst eingegeben haben - denken Sie darüber nach, wie diese Funktion aussieht, wenn Sie sie aus' myObj' herausreißen und als Funktion für sich einfügen; Wie wird es den Umfang wissen, auf den Sie zugreifen möchten? Müssen Ihre Daten so strukturiert sein? Sie sollten stattdessen eine Funktion haben, die einen Parameter mit welchem Gültigkeitsbereich verwendet, um auf –
mögliche Duplikate von [Wie wirkt das "this" -Schlüsselwort in Javascript innerhalb eines Objektliterals?] (Http://stackoverflow.com/q/13441307/1048572) – Bergi