Heim > Web-Frontend > js-Tutorial > Hauptteil

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

黄舟
Freigeben: 2017-08-11 10:34:58
Original
1304 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren
  • 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>
Nach dem Login kopieren
  • 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>
Nach dem Login kopieren
  • < 🎜 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]])
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren
  • 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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage