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>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>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>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>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>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>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>4. apply/call
function.call([thisObj[,arg1[, arg2[, [,.argN]]]]]) function.apply([thisObj[,argArray]])
Hinweis:
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 = '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>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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
