Heim > Web-Frontend > js-Tutorial > Hauptteil

Dies in Javascript verstehen

怪我咯
Freigeben: 2017-04-05 13:55:24
Original
1128 Leute haben es durchsucht

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);      //10
Nach 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);      //undefined
Nach 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(&#39;foo&#39;).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(&#39;foo&#39;).addEventListener(&#39;click&#39;,this.handleClick.bind(this));      
}
Listener.prototype.handleClick = function (event) {
    console.log(this);    //Listener {}
}
var listener = new Listener();
document.getElementById(&#39;foo&#39;).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:

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

function test(){
    var this = {};     //Uncaught SyntaxError: Unexpected token this
}
Nach dem Login kopieren
  • 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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage