Ausführliche Testerklärung des Problems, auf das dieses Schlüsselwort in Javascript hinweist

Dies ist eine Funktion in Javascript, die sehr leicht missverstanden und dann falsch verwendet werden kann. Daher stellt Ihnen der folgende Artikel vor allem die relevanten Informationen zum Problem des Verweisens auf dieses Schlüsselwort in Javascript vor. Die Testfragen im Artikel testen Ihre Vertrautheit damit. Lassen Sie uns gemeinsam einen Blick darauf werfen.

Vorwort

Javascript ist eine objektbasierte dynamische Sprache, das heißt, alles ist ein Objekt, ein sehr A Ein typisches Beispiel ist, dass Funktionen auch als gewöhnliche Objekte behandelt werden. Javascript kann objektorientierte Programmierung durch bestimmte Entwurfsmuster implementieren, wobei dieser „Zeiger“ ein sehr wichtiges Merkmal bei der Realisierung objektorientierter Programmierung ist. Dieser Artikel gibt Ihnen eine detaillierte Einführung in die relevanten Inhalte, auf die das Schlüsselwort this in Javascript verweist. Lassen Sie uns zunächst einen kleinen Test durchführen. Herzlichen Glückwunsch, Sie müssen nicht weiter lesen.

Testfragen

Erste Frage

<script>
 var str = &#39;zhangsan&#39;;

 function demo() {
  var str = &#39;lisi&#39;;
  alert(this.str);
 }
 window.demo(); // ??

 var obj = {
  str: "wangwu",
  say: function() {
   alert(this.str);
  }
 }
 obj.say(); // ??

 var fun = obj.say;
 window.fun(); // ??
</script>

Zweite Frage

<script>
 var username = &#39;zhangsan&#39;;

 (function() {
  var username = &#39;lisi&#39;;
  alert(this.username); // ??
 })()

 function demo() {
  var username = &#39;wangwu&#39;;

  function test() {
   alert(this.username);
  }

  test(); // ??
 }
 demo();
</script>

Dritte Frage

<script>
 function Person() {
  this.username = &#39;zhangsan&#39;;
  this.say = function() {
   alert(&#39;我叫&#39; + this.username);
  }
 }

 var p = new Person();
 p.say(); // ??

 var p1 = new Person();
 p1.say(); // ??
</script>

Frage 4

<script>
 var username = &#39;zhangsan&#39;;

 function demo() {
  alert(this.username)
 }

 var obj1 = {
  username: "lisi"
 };
 var obj2 = {
  username: "wangwu"
 };

 demo(); // ??
 demo(obj1); // ??
 demo(obj2); // ??
 demo.call(obj1); // ?? 
 demo.apply(obj2); // ??
</script>

Antwort

• Erste Frage: zhangsan wangwu zhangsan

• Zweite Frage: zhangsan zhangsan

• Die dritte Frage: Mein Name ist zhangsan. Mein Name ist zhangsan

• Die vierte Frage: zhangsan zhangsan zhangsan lisi wangwu

(Schauen Sie nach unten, unten finden Sie eine detaillierte Analyse)

das

• Zeigt auf das Objekt der aufrufenden Funktion

• Kein Objekt ruft die Funktion auf/Anonyme Funktion ruft sich selbst auf (dies zeigt auf das Fenster)

• Durch neu generiertes Objekt

• Aufruf anwenden/aufrufen

1. Objekt, das auf die aufrufende Funktion zeigt

<script>
 // this:指向调用函数的对象
 var str = &#39;zhangsan&#39;;

 function demo() {
  var str = &#39;lisi&#39;;

  //this->window
  console.log(this);
  alert(this.str);
 }
 window.demo(); // zhangsan

 var obj = {
  str: "wangwu",
  say: function() {
   // this->obj
   alert(this.str);
  }
 }
 obj.say(); // wangwu

 var fun = obj.say;
 window.fun(); // zhangsan
</script>

• Die globale Funktion (demo) gehört zur Methode des Fensterobjekts, also zeigt dies auf window

• obj ruft die Methode say auf, und dies zeigt auf obj

• fun() ist eine globale Funktion, und der deklarierte Spaß erhält eine einfache Funktion in obj und wird nicht aufgerufen (obj.say() ist die aufgerufene Funktion), fun ist zu diesem Zeitpunkt eine Funktion (function(){alert(this.str);}), und wenn fun() die Funktion aufruft, Dies zeigt auf Fenster

• Wer auch immer die Funktion aufruft, dann zeigt dies auf wen

2. Funktionsaufruf ohne Objekt/anonyme Funktion self-calling-> ;this zeigt auf window

<script>
 // 2.匿名函数自执行|匿名函数|无主函数 this->window
 var username = &#39;zhangsan&#39;;

 // 匿名函数自执行 this->window
 (function() {
  var username = &#39;lisi&#39;;
  console.log(this); // window
  alert(this.username); // zhangsan
 })()

 function demo() {
  var username = &#39;wangwu&#39;;

  // 无主函数 this->window
  function test() {
   // this->window
   alert(this.username);
  }

  test(); // zhangsan
 }
 demo();
</script>

• Da die anonyme Funktion keinen Namen hat, ist sie es verknüpft mit window

• test(), wer auch immer test Punkte aufruft, wer auch immer test aufruft. Nach dem Testen wird es natürlich nicht von Fenster aufgerufen, und auch nicht von der Demo. Wenn es niemanden interessiert, zeigt es auf Fenster. Es entspricht einer mainless-Funktion, die von keinem Eigentümer aufgerufen wird.

3. Objekte, die durch neue

<script>
 // 3.通过new的对象：this指向产生的对象
 // 函数
 function Person() {
  // 属性
  this.username = &#39;zhangsan&#39;;
  // 方法
  this.say = function() {
   // this->p
   console.log(this); // Person对象
   alert(&#39;我叫&#39; + this.username);
  }
 }

 // 实例化出一个对象:p就具有了username属性和say方法
 var p = new Person();
 console.log(p); // Person对象
 console.log(p.username); // zhangsan
 p.say(); // 我叫zhangsan

 // this->p1
 var p1 = new Person();
 p1.say(); // Person对象 我叫zhangsan
</script>

• < 🎜 generiert werden >Wenn unsere Funktion Person dieses Format zum Schreiben von Attributen und Methoden verwendet, müssen wir new verwenden, um die Attribute und Methoden wertvoll zu machen, und new verwenden, um die Attribute und Methoden in der Funktion zu verwenden

4. apply/call

Lassen Sie uns zunächst verstehen, was apply()/call() ist.

apply()/call(): Schließlich wird die Funktion aufgerufen, aber das interne This zeigt auf thisObj

function.call([thisObj[,arg1[, arg2[, [,.argN]]]]])
function.apply([thisObj[,argArray]])

Hinweis:

1. Rufen Sie die Funktion function auf, aber dies in der Funktion zeigt auf thisObj (ändern Sie den internen Zeiger des Objekts)

2. Wenn thisObj keine Parameter übergeben werden, ist der Standardwert das globale Objekt

3. Kontakt und Unterschied zwischen call()/apply()

Kontakt : Die Funktionen sind gleich, der erste Parameter ist derselbe thisObj

Unterschied: Wenn mehr Parameter übergeben werden

werden die tatsächlichen Parameter von call() einzeln aufgelistet um eins

apply() Die tatsächlichen Parameter werden alle im zweiten Array-Parameter platziert

Ein Beispiel für das Verständnis von apply()/call():

<script>
 // apply()/call()
 function demo() {
  console.log(123);
 }

 // 调用函数的时候，demo.call()/demo.apply()最终调用的还是demo()
 demo(); // 123
 demo.call(); //123
 demo.apply(); // 123
</script>

<script>
 // call()/apply()的区别：
 // call()参数单独再call中罗列
 // apply()的参数通过数组表示
 function demo(m, n, a, b) {
  alert(m + n + a + b);
 }
 demo(1, 5, 3, 4); // 13
 demo.call(null, 1, 5, 3, 4); // 13
 demo.apply(null, [1, 5, 3, 4]); // 13
</script>

Das vierte Anwendungsbeispiel dafür

<script>
 // this的第四个用法：call(obj)/apply(obj)：强制性的将this指向了obj
 var username = &#39;zhangsan&#39;;

 function demo() {
  alert(this.username)
 }

 var obj1 = {
  username: "lisi"
 };
 var obj2 = {
  username: "wangwu"
 };

 // call()/apply()：打劫式的改变了this的指向
 demo(); // zhangsan
 demo(obj1); //zhangsan
 demo(obj2); //zhangsan
 demo.call(obj1); // lisi 
 demo.apply(obj2); // wangwu
</script>

• Wenn Sie die Demo direkt aufrufen Unabhängig davon, ob es sich um obj1 oder obj2 handelt, wird die Demo weiterhin über das Fenster aufgerufen.

• Unabhängig davon, ob Sie call oder apply verwenden, ist der letzte Aufruf die Demofunktion, aber sie erzwingen, dass diese auf obj1/obj2 zeigt, und erzwingen, dass diese auf ihr erstes Parameterobjekt zeigt.

Zusammenfassung

Das obige ist der detaillierte Inhalt vonAusführliche Testerklärung des Problems, auf das dieses Schlüsselwort in Javascript hinweist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!