Javascript dieses Schlüsselworts detaillierte Erklärung

Javascript dieses Schlüsselworts detaillierte Erklärung_Grundkenntnisse

WBOY

Freigeben： 2016-05-16 16:33:05

Original

1222 Leute haben es durchsucht

1. Dies zeigt auf das vom Konstruktor instanziierte Objekt

Im vorherigen Artikel haben wir den Unterschied zwischen dem Aufruf des Konstruktors mit new und dem Aufruf ohne new erwähnt, wie im folgenden Beispiel gezeigt:

Code kopieren Der Code lautet wie folgt:

Funktion Benjamin(Benutzername, Geschlecht) {

This.username = Benutzername;

This.sex = Sex;

}

var benjamin = neuer Benjamin("zuojj", "männlich");

//Ausgaben: Benjamin{sex: "male",username: "zuojj"}

console.log(benjamin);

var ben = Benjamin("zhangsan", "weiblich");

//Ausgaben: undefiniert

console.log(ben);

Wenn der Konstruktor als normale Funktion aufgerufen wird, gibt es keinen Rückgabewert und dieser zeigt auf das globale Objekt. Wie können wir also Probleme vermeiden, die durch das Fehlen eines neuen Schlüsselworts verursacht werden?

Code kopieren Der Code lautet wie folgt:

Funktion Benjamin(Benutzername, Geschlecht) {

//Überprüfen Sie, ob „this“ ein „Benjamin“-Objekt ist

if(diese Instanz von Benjamin) {

This.username = Benutzername;

This.sex = Sex;

}else {

Geben Sie den neuen Benjamin zurück (Benutzername, Geschlecht);

}

}

var benjamin = neuer Benjamin("zuojj", "männlich");

//Ausgaben: Benjamin{sex: "male",username: "zuojj"}

console.log(benjamin);

var ben = Benjamin("zhangsan", "weiblich");

//Ausgaben: Benjamin {Benutzername: „zhangsan“, Geschlecht: „weiblich“} 

console.log(ben);

Im obigen Beispiel prüfen wir zunächst, ob es sich um eine Instanz von Benjamin handelt. Wenn nicht, verwenden Sie new, um den Konstruktor automatisch aufzurufen und zu instanziieren. Dies bedeutet, dass wir uns keine Sorgen mehr machen müssen, dass das Schlüsselwort new zum Instanziieren fehlt Konstrukteur. Natürlich können wir auf diese Weise eine schlechte Angewohnheit entwickeln. Was wäre, wenn wir dieses Phänomen vermeiden würden? Wir können einen Fehler wie diesen auslösen:

Code kopieren Der Code lautet wie folgt:

Funktion Benjamin(Benutzername, Geschlecht) {

//Überprüfen Sie, ob „this“ ein „Benjamin“-Objekt ist

if(diese Instanz von Benjamin) {

This.username = Benutzername;

This.sex = Sex;

}else {

// Wenn nicht, Fehler auslösen.

throw new Error("`Benjamin` aufgerufen ohne `new`");

}

}

2. Dies zeigt auf das Objekt, das die Funktion aufruft

Sehen Sie sich das Beispiel unten an:

Code kopieren Der Code lautet wie folgt:

var x = 10;

var obj = {

x: 10,

Ausgabe: function() {

//Ausgaben: true

console.log(this === obj);

Geben Sie this.x;
 zurück
},

innerobj: {

x: 30,

Ausgabe: function() {

//Ausgaben: true

console.log(this === obj.innerobj);

Geben Sie this.x;
 zurück
}

}

};

//Ausgaben: 10

console.log(obj.output());

//Ausgaben: 30

console.log(obj.innerobj.output());

3. Dies zeigt auf das globale Objekt

Als wir oben den Konstruktor besprochen haben, haben wir auch besprochen, dass dieser auf das globale Objekt verweist, wenn new nicht anwendbar ist:

Code kopieren Der Code lautet wie folgt:

var x = 100;

var obj = {

x: 10,

Ausgabe: function() {

(function() {

//Ausgaben: true

console.log(this === window);

//Ausgaben: Inner: 100

console.log("Inner:" this.x);

})();

Geben Sie this.x;
 zurück
}

};

//Ausgaben: 10

console.log(obj.output());

Bei Verwendung von „Closure“ ändert sich der Bereich und zeigt auf das Fenster (im Browser).

Code kopieren Der Code lautet wie folgt:

var x = 100;

var obj = {

x: 10,

Ausgabe: function() {

Geben Sie this.x;
 zurück
}

};

var-Ausgabe = obj.output;

//Ausgaben: 10

console.log(obj.output());

//Ausgaben: 100

console.log(output());

var obj2 = {

x: 30,

Ausgabe: obj.output

}

//Ausgaben: 30

console.log(obj2.output());

Zu diesem Zeitpunkt zeigt dies immer auf das Objekt, wenn die Funktion aufgerufen wird.

4. Dies zeigt auf das von der apply/call()-Methode zugewiesene Objekt

Code kopieren Der Code lautet wie folgt:

var x = 100;

var obj = {

x: 10,

Ausgabe: function() {

Geben Sie this.x;
 zurück
}

};

//Ausgaben: 10

console.log(obj.output());

var obj2 = {

x: 40,

Ausgabe: obj.output

}

//Ausgaben: 40

console.log(obj.output.call(obj2));

//Ausgaben: 10

console.log(obj2.output.apply(obj));

5. Dies in der Rückruffunktion zeigt auf das Objekt, auf das dies in der Funktion zeigt, die den Rückruf aufruft

Code kopieren Der Code lautet wie folgt:

//
$("#username").on("click", function() {
console.log(this.value);
});

6. dies

in Function.prototype.bind

Die bind()-Methode erstellt eine neue Funktion, deren Schlüsselwort this beim Aufruf auf den bereitgestellten Wert gesetzt wird, wobei eine bestimmte Folge von Argumenten allen Argumenten vorausgeht, die beim Aufruf der neuen Funktion angegeben werden.
Beispiel 1:

Code kopieren Der Code lautet wie folgt:

Funktion person() {

return this.name;

}

//Function.prototype.bind

var per = person.bind({

Name: „zuojj“

});

console.log(per);

var obj = {

Name: „Ben“,

Person: Person,

pro: pro

};

//Ausgaben: Ben, zuojj

console.log(obj.person(), obj.per());

Beispiel 2:

Code kopieren Der Code lautet wie folgt:

this.x = 9; 

var module = {

x: 81,

getX: function() { return this.x;
};

//Ausgaben: 81

console.log(module.getX()); 

var getX = module.getX;

//Ausgaben: 9, denn in diesem Fall bezieht sich „this“ auf das globale Objekt

console.log(getX); 

// eine neue Funktion erstellen, wobei „this“ an das Modul
 gebunden ist
varboundGetX = getX.bind(module);

//Ausgaben: 81

console.log(boundGetX());