Warum schreibst du diesen Artikel?
Diese Frage wurde mir schon einmal bei Vorstellungsgesprächen bei Alibaba und anderen Unternehmen gestellt, daher möchte ich sie mit allen teilen. Wenn Sie den Unterschied zwischen den folgenden sieben Situationen klar verstehen, können Sie dem Vorstellungsgespräch folgen Eine klare Erklärung ist zweifellos ein großes Plus. Wenn der Interviewer diesen Artikel verstanden hat, wird er keine Angst mehr haben, Sie danach zu fragen.
Wenn man in Javascript darüber spricht, bereitet es den Leuten tatsächlich Kopfschmerzen. Im Gegensatz zu Java verweist dies in C++ auf das Objekt, das dies aufruft.
Der Wert davon in einer Funktion wird bestimmt, wenn die Funktion tatsächlich aufgerufen und ausgeführt wird, und kann nicht bestimmt werden, wenn die Funktion definiert wird.
Da der Wert hiervon Teil des Ausführungskontexts ist, wird bei jedem Aufruf einer Funktion ein neuer Ausführungskontext generiert. Wenn Sie dies in Ihrem Code verwenden, wird der Wert direkt aus dem Ausführungskontext abgerufen, ohne dass in der Bereichskette gesucht werden muss.
In Bezug auf den Wert davon kann es grob in die folgenden sieben Situationen unterteilt werden:
Fall 1: Global & ruft gewöhnliche Funktionen auf
In der globalen Umgebung ist dies immer der Fall zeigt auf Fenster.
console.log(this === window); //true
Nach dem Login kopieren
Wenn eine normale Funktion aufgerufen wird (beachten Sie, dass es sich nicht um einen Konstruktor handelt, wird kein Neues vorangestellt), zeigt diese auch auf das Fenster.
var x = 10;
function foo(){
console.log(this); //Window
console.log(this.x); //10
}
foo();Nach dem Login kopieren
Fall 2: Konstruktor
Der sogenannte Konstruktor ist ein von einer Funktion abgeleitetes Objekt. Im Allgemeinen wird der erste Buchstabe des Funktionsnamens des Konstruktors großgeschrieben, z Objekt, Funktion, Array Dies sind alles Konstruktoren.
function Foo(){
this.x = 10;
console.log(this); //Foo {x:10}
}
var foo = new Foo();
console.log(foo.x); //10Nach dem Login kopieren
Wenn im obigen Code die Funktion als Konstruktor verwendet wird, stellt dies darin das Objekt dar, das neu erstellt werden soll.
Aber wenn Sie die Foo-Funktion direkt anstelle von new Foo() aufrufen, wird es zu Fall 1 und Foo() wird zu einer normalen Funktion.
function Foo(){
this.x = 10;
console.log(this); //Window
}
var foo = Foo();
console.log(foo.x); //undefinedNach dem Login kopieren
Fall 3: Objektmethode
Wenn die Funktion als Methode des Objekts verwendet wird, zeigt diese in der Methode auf das Objekt.
var obj = {
x: 10,
foo: function () {
console.log(this); //Object
console.log(this.x); //10
}
};
obj.foo();Nach dem Login kopieren
Hinweis: Wenn die Funktion in einer Objektmethode definiert ist, ist die Situation anders.
var obj = {
x: 10,
foo: function () {
function f(){
console.log(this); //Window
console.log(this.x); //undefined
}
f();
}
}
obj.foo();Nach dem Login kopieren
Es kann so verstanden werden: Obwohl die Funktion f in obj.foo definiert ist, gehört sie immer noch zu einer gewöhnlichen Funktion, und diese zeigt immer noch auf das Fenster. (Dies ist eine Falle, bitte beachten Sie dies.)
Wenn Sie hier die Variable obj.x im oberen Bereich aufrufen möchten, können Sie self verwenden, um die externe Variable this zwischenzuspeichern.
var obj = {
x: 10,
foo: function () {
var self = this;
function f(){
console.log(self); //{x: 10}
console.log(self.x); //10
}
f();
}
}
obj.foo();Nach dem Login kopieren
Wenn die foo-Funktion nicht als Objektmethode aufgerufen wird:
var obj = {
x: 10,
foo: function () {
console.log(this); //Window
console.log(this.x); //undefined
}
};
var fn = obj.foo;
fn();Nach dem Login kopieren
obj.foo wird einer globalen Variablen zugewiesen und nicht als Eigenschaft von obj aufgerufen this Der Wert davon ist window.
Fall 4: Konstruktor-Prototyp-Attribut
function Foo(){
this.x = 10;
}
Foo.prototype.getX = function () {
console.log(this); //Foo {x: 10, getX: function}
console.log(this.x); //10
}
var foo = new Foo();
foo.getX();Nach dem Login kopieren
In der Funktion Foo.prototype.getX zeigt dies auf das foo-Objekt. Darüber hinaus repräsentiert dies auch in der gesamten Prototypenkette den Wert des aktuellen Objekts.
Fall 5: Die Funktion wird mit call, apply oder bind aufgerufen.
var obj = {
x: 10
}
function foo(){
console.log(this); //{x: 10}
console.log(this.x); //10
}
foo.call(obj);
foo.apply(obj);
foo.bind(obj)();Nach dem Login kopieren
Wenn eine Funktion durch Aufruf, Anwendung oder Bindung aufgerufen wird, ist der Wert davon der Wert des übergebenen Objekts.
Fall 6: DOM-Ereignis this
In einem HTML-DOM-Ereignishandler zeigt this immer auf den HTML-DOM-Knoten, an den dieser Handler gebunden ist:
function Listener(){
document.getElementById('foo').addEventListener('click', this.handleClick); //这里的 this 指向 Listener 这个对象。不是强调的是这里的 this
}
Listener.prototype.handleClick = function (event) {
console.log(this); //<p id="foo"></p>
}
var listener = new Listener();
document.getElementById('foo').click();Nach dem Login kopieren
This ist leicht zu verstehen. Es entspricht der Übergabe von Parametern an die Funktion, die den handleClick-Laufzeitkontext ändert:
var obj = {
x: 10,
fn: function() {
console.log(this); //Window
console.log(this.x); //undefined
}
};
function foo(fn) {
fn();
}
foo(obj.fn);Nach dem Login kopieren
Sie können den Kontext auch über bind wechseln:
function Listener(){
document.getElementById('foo').addEventListener('click',this.handleClick.bind(this));
}
Listener.prototype.handleClick = function (event) {
console.log(this); //Listener {}
}
var listener = new Listener();
document.getElementById('foo').click();Nach dem Login kopieren
Die ersten sechs Situationen lassen sich in einem Satz zusammenfassen: Dieser zeigt auf das Objekt, das die Methode aufruft.
Fall 7: Dies in der Pfeilfunktion
Bei Verwendung der Pfeilfunktion ist die Situation anders: Dies innerhalb der Pfeilfunktion ist der lexikalische Bereich, der durch den Kontext bestimmt wird.
var obj = {
x: 10,
foo: function() {
var fn = () => {
return () => {
return () => {
console.log(this); //Object {x: 10}
console.log(this.x); //10
}
}
}
fn()()();
}
}
obj.foo();Nach dem Login kopieren
Jetzt legt die Pfeilfunktion die Ausrichtung hiervon vollständig fest. Dies zeigt immer auf den lexikalischen Bereich, der das äußere Aufrufobjekt ist.
Wenn Sie Pfeilfunktionen verwenden, ist die bisherige Hack-Schreibmethode:
var self = this;
Nach dem Login kopieren
nicht mehr erforderlich.
var obj = {
x: 10,
foo: function() {
var fn = () => {
return () => {
return () => {
console.log(this); // Object {x: 10}
console.log(this.x); //10
}
}
}
fn.bind({x: 14})()()();
fn.call({x: 14})()();
}
}
obj.foo();Nach dem Login kopieren
Da dies gemäß dem lexikalischen Bereich in der Pfeilfunktion gebunden wurde, kann dies beim Aufrufen der Pfeilfunktion mit call () oder apply () nicht gebunden werden, d. h. der eingehende Das erste Parameter wird ignoriert.
Zusätzlicher Hinweis:
function test(){
var this = {}; //Uncaught SyntaxError: Unexpected token this
}Nach dem Login kopieren
Wenn eine Sprache ausgeführt wird, eine Umgebung erforderlich ist, eine sogenannte Host-Umgebung.
Für JavaScript ist die häufigste Hostumgebung ein Webbrowser. Der Browser stellt eine Umgebung für die Ausführung von JavaScript bereit. In dieser Umgebung müssen einige Schnittstellen bereitgestellt werden, damit die JavaScript-Engine funktioniert kann mit dem Andocken der Host-Umgebung interagieren.
Die JavaScript-Engine ist der Ort, an dem JavaScript-Code tatsächlich ausgeführt wird. Zu den gängigen Engines gehören V8 (derzeit die schnellste JavaScript-Engine, produziert von Google) und der JavaScript-Kern.
Der Browser oder Server (nodejs) verfügt über eine eigene JS-Engine. Im Browser ist das globale Objekt window und in nodejs ist das globale Objekt global.
Das obige ist der detaillierte Inhalt vonDies in Javascript verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
