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 = 'zhangsan';
function demo() {
var str = 'lisi';
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 = 'zhangsan';
(function() {
var username = 'lisi';
alert(this.username); // ??
})()
function demo() {
var username = 'wangwu';
function test() {
alert(this.username);
}
test(); // ??
}
demo();
</script>Nach dem Login kopieren
Dritte Frage
<script>
function Person() {
this.username = 'zhangsan';
this.say = function() {
alert('我叫' + this.username);
}
}
var p = new Person();
p.say(); // ??
var p1 = new Person();
p1.say(); // ??
</script>Nach dem Login kopieren
Frage 4
<script>
var username = 'zhangsan';
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 = 'zhangsan';
function demo() {
var str = 'lisi';
//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 = 'zhangsan';
// 匿名函数自执行 this->window
(function() {
var username = 'lisi';
console.log(this); // window
alert(this.username); // zhangsan
})()
function demo() {
var username = 'wangwu';
// 无主函数 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 = 'zhangsan';
// 方法
this.say = function() {
// this->p
console.log(this); // Person对象
alert('我叫' + 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 = 'zhangsan';
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!
