Dies in Javascript verstehen

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

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();

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);      //10

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);      //undefined

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();

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();

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();

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();

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();

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)();

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(&#39;foo&#39;).click();

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);

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();

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();

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;

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();

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:

• Dies ist ein reserviertes Wort, Sie können es nicht umschreiben.

function test(){
    var this = {};     //Uncaught SyntaxError: Unexpected token this
}

• Hostobjekt:

1. Wenn eine Sprache ausgeführt wird, eine Umgebung erforderlich ist, eine sogenannte Host-Umgebung.

2. 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.

3. 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.

4. 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!