Dies, dies, besprechen Sie dies noch einmal in Javascript, super umfassende (klassische)_Javascript-Kenntnisse

JavaScript ist eine Skriptsprache und wird daher von vielen als leicht zu erlernen angesehen. Im Gegenteil, JavaScript unterstützt erweiterte Funktionen wie funktionale Programmierung, Abschlüsse, prototypbasierte Vererbung und mehr. Dieser Artikel verwendet nur ein Beispiel: das Schlüsselwort this in JavaScript und analysiert auf einfache und leicht verständliche Weise seine Bedeutung in verschiedenen Situationen, die Gründe für diese Situation und die von JavaScript-Tools wie Dojo bereitgestellte Bindungsmethode . Man kann sagen, dass Sie nur durch die korrekte Beherrschung des Schlüsselworts this in JavaScript den Schwellenwert der JavaScript-Sprache erreichen können.

Was dieses Ding in js betrifft, haben es viele Leute erklärt. Es sieht sehr hochwertig aus. Ich frage mich, ob Sie es verstehen.

Zitieren Sie zunächst die anspruchsvollere Version von Script Home, Ja, das

Okay, hier ist meine frustrierende Erklärung

Argument: Dies ist keine Variable, keine Eigenschaft und es kann kein Wert zugewiesen werden. Es zeigt immer auf das Objekt, das es aufruft

Es fühlt sich zu vage an, denken Sie nur an das Wichtigste: „Es zeigt immer auf das Objekt, das es aufruft.“ Wenn Sie also das Objekt finden, das dies aufruft, wissen Sie, auf wen es verweist

1.

alert(this); 

Sehen Sie, was erscheint? Es ist entweder ein „Objektfenster“ oder ein „Objekt“.

alert(this === window); 

Das Ergebnis ist „wahr“, also ist das Objekt, das es aufruft, jetzt „window“

2.

var test = function(){
  alert(this);
}
test(); 

Raten Sie mal, was oben erscheint: Ist es dasselbe wie „alert(this)“
?

var test = function(){
  alert(this === window);
 }
test(); 

Führen Sie den obigen Code aus. Wird „true“ angezeigt?

Ist die Sache damit erledigt?

Wenn es so einfach ist, warum diskutieren dann so viele Menschen über diesen Vogel?

3.

Kommen Sie wieder

var test = function(){
  alert(this === window);
 }
new test(); 

Hey, warum ist es dieses Mal „falsch“?

Denken Sie daran, dass „dies immer auf das Objekt verweist, das diesen Code bei „1“ aufruft, d. h. „Fenster“ ist eine Funktion. Der Aufruf lautet immer noch „window“ (seien Sie nicht verwirrt, obwohl die Funktion ein Objekt ist, sie jedoch von einem anderen Objekt aufgerufen wird). Zu diesem Zeitpunkt wird „new“ verwendet Dies ist tatsächlich ein Konstruktor. Der Konstruktor erstellt beim Erstellen ein neues leeres Objekt, dh „new test ()“ erstellt ein neues Objekt, und dieses Objekt zeigt dann auf den Code in der Funktion „test“. Dies ist kein Fensterobjekt mehr, sondern ein neues Objekt, das von diesem Konstruktor erstellt wurde.

4.

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
test.b(); 

Mit den oben genannten Argumenten ist es jetzt klar!

5.

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
var test1 = test;
test1.b(); 

Sie denken also nicht, dass das Ergebnis „falsch“ ist, Sie irren sich, obwohl der Wert von „test1“ „test“ ist, ist „test1“ nicht immer noch das Objekt von „test“, es hat einen Sie verstehen vorerst, dass es sich um ein neues Objekt handelt. Beide verweisen auf dasselbe Objekt. Hier ist der Code unten als Beweis

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
var test1 = test;
test.a = 2;
alert(test1.a); 

Wenn „1“ auftaucht, komm und schimpfe mit mir

6. Der gesamte Komplex

var test ={
  'a':1,
  'b':{
   'b1':function(){
    alert(this === test);
   }
  }
 }
test.b.b1(); 

Ist das „wahr“ oder „falsch“?

Gemäß der obigen Theorie wird „this“ zu diesem Zeitpunkt nicht mehr direkt von „test“, sondern von „test.b“ aufgerufen, wie der folgende Codeabschnitt zeigt

var test ={
  'a':1,
  'b':{
   'b1':function(){
    alert(this === test.b);
   }
  }
 }
test.b.b1(); 

7. Es ist besser, es komplizierter zu machen

var test = function(){
  var innerTest = function(){
   alert(this === test);
  }
  innerTest();
 }
test(); 

Glauben Sie nicht, dass „wahr“ auftaucht? Nach der obigen Theorie wird „innerTest“ von „test“ aufgerufen und „this“ zeigt dann auf „test“?

Nun, der Fehler liegt darin, wer „innerTest“ aufgerufen hat. Tatsächlich werden diese Funktionen alle vom „window“-Objekt aufgerufen. Selbst wenn Sie tausend Ebenen verschachteln, wird jede Funktion vom „window“-Objekt aufgerufen . Ein Stück Code als Beweis

var test = function(){
  var innerTest = function(){
   alert(this === window);
   var innerTest1 = function(){
    alert(this === window);
   }
   innerTest1();
  }
  innerTest();
 }
test(); 

8. Noch etwas Besonderes

var test = function(){
  alert(this === window);
 }
var test1 = {
}
test.apply(test1); 

Ich denke, jeder wird das richtig erraten. Die Funktion dieser Funktion besteht darin, „eine Methode eines Objekts aufzurufen und das aktuelle Objekt durch ein anderes Objekt zu ersetzen“. es ist „falsch“, hier ist der folgende Code zum Beweis

var test = function(){
  alert(this === test1);
 }
 var test1 = {
  }
test.apply(test1); 

Dann werden Dinge wie „Anrufen“ ähnlich sein

9. Eine weitere Prototyp-Vererbung, die sich von der wörtlichen Vererbung unterscheidet

var test = function(){
 }
 var my = function(){
  this.a = function(){
   alert(this === mytest2);
  }
 }
 var mytest = new my();
 test.prototype = mytest;
 var mytest2 = new test();
 mytest2.a(); 

10. Was übrig bleibt, ist vielleicht das „Dom“-Objekt

<script>
  var mytest = function(context){
   alert(context.getAttribute('id'));
   alert(this === window);
  }
 </script>
 <div id="test" onclick="mytest(this)">aaaa</div> 

Nachdem Sie das oben Gesagte gelesen haben, sollten Sie verstehen, dass das „dies“ darin jeweils Shenma darstellt