Erweiterte JavaScript-Funktionen – Details zum Scope-Beispielcode

Der Geltungsbereich ist in Javascript in globalen Geltungsbereich und lokalen Geltungsbereich unterteilt, und der lokale Geltungsbereich bezieht sich tatsächlich auf den Funktionsumfang. JavaScript betrachtet die Funktion als den Mindestumfang des Geltungsbereichs.

Globaler Geltungsbereich

Objekt, auf das überall im Code zugegriffen werden kann, z. B. das Fensterobjekt und die Eigenschaft des Fensterobjekts, It hat globale Reichweite.
1. In der äußersten Ebene definierte Variablen sind standardmäßig alle Attribute des Fensterobjekts;
2. Dies ist ein häufiger Fehler Die neue Version des Browsers hat dieses Problem behoben!
Zum Beispiel:

var firstName = "leo";
function changeName() {
    var secondName = "jut";
    fullName = "jutleo";
    function getName() {
        console.log(secondName);
    }
    getName();
}
console.log(firstName);
console.log(fullName);//报错
// console.log(secondName);//报错
changeName();
// getName();//报错

Lokaler Bereich/Funktionsbereich (Lokaler Bereich/Funktionsbereich)

Wenn eine Variable in einer Funktion definiert ist, ist die Variable nur für den aktuellen sichtbar Funktion. Wenn die Funktion nicht gefunden wird, wird sie weiter nach oben durchsucht, bis sie nicht mehr im globalen Bereich gefunden wird in der f1-Funktion gefunden, fahren Sie mit der Suche

var version = "version_1";
var f1 = function() {
    console.log(version);//version_1
}
f1();

fort und finden Sie

var version = "version_1";
var f2 = function() {
    var version = "version_2";
    console.log(version);//version_2
}
f2();

direkt in der f2-Funktion. Warum ist das so? Es stellt sich heraus, dass JavaScript in der f3-Funktion nach der Bereichsvariablen sucht und diese findet. Zu diesem Zeitpunkt wird der äußere Bereich ignoriert, aber wenn die Ausführung

erreicht, wurde der Bereich nicht initialisiert, also

var socpe = "scope_01";
var f3 = function() {
    console.log(scope); //undefined
    var scope = "scope_02";
}
f3();

console.log(scope) wird zurückgegeben. undefined Die Verschachtelung muss den gleichen Regeln folgen. Wenn nicht, fahren Sie mit der oberen Ebene fort.

var f4 = function() {
    var scope = "scope_02";
    (function(){
        var scope = "scope_03";
        (function(){
            console.log(scope); //scope_03
        })();
    })();
}
f4();

Warum ist das so? Es stellt sich heraus, dass bei der Verschachtelung von JavaScript-Funktionen der Umfang durch die Verschachtelungsbeziehung bestimmt wird und die Reihenfolge der Aufrufe ignoriert wird!

var x_scope = "leo";
var f5 = function() {
    console.log(x_scope); //leo
}
var f6 = function() {
    var x_scope = "jut";
    f5();
}
f6();

Nachdem ich so viel gesagt habe, wie nutzt man dieses Zielfernrohr? Aus den obigen Beispielen können wir ersehen, dass bei der Suche von JavaScript nach Variablen die Kette, die in der Reihenfolge aufsteigt, die Bereichskette ist. In tatsächlichen Anwendungen ist die Lese- und Schreibgeschwindigkeit umso langsamer, je tiefer die Position der Variablen liegt, bis sie im globalen Bereich gefunden wird.

Sehen Sie sich das Beispiel an:

Gemäß der Suchlogik der Bereichskette muss die Suche nach der Dokumentvariablen die gesamte Bereichskette durchlaufen, bis sie schließlich im globalen Objekt gefunden wird . Diese Funktion referenziert zwei zweitklassige. Die Optimierung ist wie folgt:

function setLabelBgColor(){
    document.getElementById("btn").onclick=function(){
        document.getElementById("label").style.backgroundColor="red";
    };
}

Dies ist nur ein Beispiel. Dadurch wird die Leistung nicht wesentlich verbessert! Bei der tatsächlichen Verwendung muss jedoch vermieden werden, dass in großen Mengen auf globale Variablen zugegriffen wird.

function setLabelBgColor(){
    var doc = document;
    doc.getElementById("btn").onclick=function(){
        doc.getElementById("label").style.backgroundColor="red";
    };
}

Denken Sie darüber nach: Warum fangen alle Bibliotheken und Frameworks, die Sie sehen, so an?

(function(exports){
    //do some thing ...
})(window);

Das obige ist der detaillierte Inhalt vonErweiterte JavaScript-Funktionen – Details zum Scope-Beispielcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!