Eine kurze Einführung in diese Variable in JS

Diese Variable in JavaScript ist ein sehr leistungsfähiges Schlüsselwort. In diesem Artikel wird die Verwendung dieser Variable in JavaScript ausführlich vorgestellt.

Die Verwendung dieser Variable in JavaScript

Diese Variable ist in JavaScript ein schwer fassbares Schlüsselwort. Man kann sagen, dass es sehr hilfreich ist, das entsprechende Wissen darüber zu verstehen. Wir können objektorientiert JavaScript-Programme mit Leichtigkeit.
Das Wichtigste an dieser Variable ist, klarstellen zu können, auf welches Objekt sie sich bezieht. Vielleicht gibt es für viele Informationen eine eigene Erklärung, aber einige Konzepte sind etwas kompliziert. Mein Verständnis ist: Analysieren Sie zuerst, welches Objekt die Funktion, in der sich this befindet, als Methode aufgerufen wird, und dann ist das Objekt das Objekt, auf das this verweist.

Beispiel 1,

Der Code lautet wie folgt:

var obj = {}; 

obj.x = 100; 

obj.y = function(){ alert( this.x ); }; 

obj.y(); //弹出 100

Dieser Code ist sehr einfach zu verstehen, wenn obj.y() ausgeführt wird. Die Funktion wird als Objekt verwendet. Die Methode von obj wird aufgerufen, sodass diese im Funktionskörper auf das obj-Objekt zeigt, sodass 100 angezeigt wird.

Beispiel 2,

Der Code lautet wie folgt:

var checkThis = function(){ 

alert( this.x); 

}; 

var x = 'this is a property of window'; 

var obj = {}; 

obj.x = 100; 

obj.y = function(){ alert( this.x ); }; 

obj.y(); //弹出 100 

checkThis(); //弹出 'this is a property of window'

Warum hier „Dies ist eine Eigenschaft von Fenster“ erscheint, kann etwas verwirrend sein . Im Variablenbereich von JavaScript gibt es eine Regel: „Globale Variablen sind Attribute des

Fensterobjekts“. Wenn checkThis() ausgeführt wird, entspricht es window.checkThis(). Daher wird zu diesem Zeitpunkt der Punkt des Schlüsselworts this in der Funktion checkThis zum Fensterobjekt, und da das Fensterobjekt über ein weiteres x-Attribut verfügt („thisis eine Eigenschaft von Fenster‘ ), daher wird „Dies ist eine Eigenschaft von Fenster“ angezeigt.
Die beiden oben genannten Beispiele sind relativ einfach zu verstehen, denn solange Sie bestimmen, welches Objekt die aktuelle Funktion als Methode aufruft (welches Objekt aufgerufen wird), können Sie den aktuellen Punkt dieser Variablen leicht bestimmen.

this.x und apply(), call()

Durch call und apply können Sie
die Ausführungsumgebung der Funktion neu definieren, d. h Dies ist ein Punkt, der für einige Anwendungen nützlich ist. Er wird sehr häufig verwendet.
Beispiel 3: call()

Der Code lautet wie folgt:

function changeStyle( type , value ){ 

this.style[ type ] = value; 

} 

var one = document.getElementByIdx( 'one' ); 

changeStyle.call( one , 'fontSize' , '100px' ); 

changeStyle('fontSize' , '300px'); //出现错误，因为此时changeStyle中this引用的是window对象，而window并无style属性。

Beachten Sie, dass es in changeStyle.call() drei Parameter gibt, nämlich die Der erste Parameter wird verwendet für: Gibt das Objekt an, für das diese Funktion aufgerufen wird. Hier wird eins angegeben, was bedeutet, dass die Funktion „changeStyle“ von eins aufgerufen wird, sodass dieser Punkt im Funktionskörper das einzige Objekt ist. Der zweite und dritte Parameter entsprechen den beiden formalen Parametern Typ und Wert in der Funktion „changeStyle“. Der häufigste Effekt, den wir sehen, ist, dass die Schriftart des ersten Dom-Elements 20 Pixel groß wird.

Beispiel 4: apply()

Der Code lautet wie folgt:

function changeStyle( type , value ){ 

this.style[ type ] = value; 

} 

var one = document.getElementByIdx( 'one' ); 

changeStyle.apply( one , ['fontSize' , '100px' ]); 

changeStyle('fontSize' , '300px'); //出现错误，原因同示例三

Die Verwendung von apply ist ungefähr die gleiche wie call, Mit nur einem Unterschied: Akzeptiert nur zwei Parameter. Der zweite Parameter muss ein Array sein. Die Elemente im Array entsprechen den formalen Parametern der Funktion.

Bedeutungslose (seltsame) Verwendung davon

Beispiel 5:

Der Code lautet wie folgt:

var obj = { 

x : 100, 

y : function(){ 

setTimeout( 

function(){ alert(this.x); } //这里的this指向的是window对象，并不是我们期待的obj,所以会弹出undefined 

, 2000); 

} 

}; 

obj.y();

Wie man das erreicht gewünschter Effekt

Der Code lautet wie folgt:

var obj = { 
x : 100, 
y : function(){ 
var that = this; 
setTimeout( 
function(){ alert(that.x); } 
, 2000); 
} 
}; 
obj.y(); //弹出100

Dieser

Code in der Event-Listening-Funktion lautet wie folgt:

var one = document.getElementByIdx( 'one' ); 

one.onclick = function(){ 

alert( this.innerHTML ); //this指向的是one元素，这点十分简单.. 

};

Hinweis: js Die globalen Variablen in werden dynamisch als Eigenschaften zum Instanzfenster von Window hinzugefügt.

Dies ist ein Schlüsselwort in js. Der Wert davon ändert sich, wenn die Funktion in verschiedenen Situationen verwendet wird. Aber es gibt immer ein Prinzip, das heißt, dieses bezieht sich auf das Objekt, das die Funktion aufruft.

1. Reiner Funktionsaufruf.

Der Code lautet wie folgt:

function test() { 
this.x = 1; 
alert(x); 
} 
test();

Tatsächlich ist dies hier die globale Variable. Sie können es deutlich verstehen, indem Sie sich das folgende Beispiel ansehen. Tatsächlich handelt es sich hierbei um das globale Objekt Global.

Der Code lautet wie folgt:

var x = 1; 
function test() { 
alert(this.x); 
} 
test();//1 

var x = 1; 
function test() { 
this.x = 0; 
} 
test(); 
alert(x);//0

2. Als Methodenaufruf bezieht sich dies dann auf das übergeordnete Objekt.

Der Code lautet wie folgt:

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

var o = {}; 
o.x = 1; 
o.m = test; 
o.m(); //1

3. Wird als
Konstruktor aufgerufen. Die sogenannte Konstruktorfunktion besteht darin, ein neues Objekt zu generieren. Zu diesem Zeitpunkt bezieht sich dies auf dieses Objekt.

Der Code lautet wie folgt:

function test() { 
this.x = 1; 
} 
var o = new test(); 
alert(o.x);//1

4. Apply-Aufruf

dies zeigt auf den ersten Parameter in apply.

Der Code lautet wie folgt:

var x = 0; 
function test() { 
alert(this.x); 
} 

var o = {}; 
o.x = 1; 
o.m = test; 
o.m.apply(); //0 
o.m.apply(o);//1

Wenn apply keine Parameter hat, wird es als globales Objekt dargestellt. Der Wert ist also 0.

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in diese Variable in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!