Was ist der Geltungsbereich von Variablen in JavaScript?

Question

Was ist der Umfang der Variablen in Javascript? Haben sie innerhalb und außerhalb einer Funktion den gleichen Geltungsbereich? Oder spielt das überhaupt eine Rolle? Und wo werden die Variablen gespeichert, wenn sie global definiert sind?

Answer 1

Ich habe festgestellt, dass viele JavaScript-Neulinge Schwierigkeiten haben, zu verstehen, dass Vererbung in der Sprache standardmäßig verfügbar ist und dass der Funktionsbereich der einzige Bereich ist, so weit. Ich habe eine Erweiterung für ein Verschönerungsprogramm namens JSPretty bereitgestellt, das ich Ende letzten Jahres geschrieben habe. Das Feature färbt Funktionsbereiche im Code und ordnet allen Variablen, die in diesem Bereich deklariert sind, immer eine Farbe zu. Closure wird visuell demonstriert, wenn eine Variable mit einer Farbe aus einem Bereich in einem anderen Bereich verwendet wird.

Testen Sie die Funktion unter:

• http://prettydiff.com/jspretty.xhtml?c=white&jsscope

Sehen Sie sich eine Demo an:

• http://prettydiff.com/jspretty.xhtml?c=white&jsscope&s=http://prettydiff.com/lib/markup_beauty.js

Sehen Sie sich den Code an:

• http://prettydiff.com/lib/jspretty.js
• https://github.com/austincheney/Pretty-Diff/blob/master/lib/jspretty.js

Derzeit bietet die Funktion Unterstützung für eine Tiefe von 16 verschachtelten Funktionen, färbt aber derzeit keine globalen Variablen.

Answer 2

Globaler Geltungsbereich :

Globale Variablen sind genau wie globale Stars (Jackie Chan, Nelson Mandela). Sie können von jedem Teil Ihrer Anwendung aus auf sie zugreifen (den Wert abrufen oder setzen). Globale Funktionen sind wie globale Ereignisse (Neujahr, Weihnachten). Sie können sie von jedem Teil Ihrer Anwendung aus ausführen (aufrufen).

//global variable
var a = 2;

//global function
function b(){
   console.log(a);  //access global variable
}

Lokaler Geltungsbereich :

Wenn Sie in den USA leben, kennen Sie vielleicht Kim Kardashian, die berüchtigte Berühmtheit (sie schafft es irgendwie in die Boulevardpresse). Aber Menschen außerhalb der USA werden sie nicht erkennen. Sie ist ein lokaler Star, der an sein Territorium gebunden ist.

Lokale Variablen sind wie lokale Sterne. Sie können nur innerhalb des Bereichs auf sie zugreifen (den Wert erhalten oder setzen). Eine lokale Funktion ist wie ein lokales Ereignis - man kann sie nur innerhalb dieses Bereichs ausführen (feiern). Wenn Sie von außerhalb des Bereichs auf sie zugreifen wollen, erhalten Sie einen Referenzfehler

function b(){
   var d = 21; //local variable
   console.log(d);

   function dog(){  console.log(a); }
     dog(); //execute local function
}

 console.log(d); //ReferenceError: dddddd is not defined    

---

In diesem Artikel finden Sie ein ausführliches Verständnis des Anwendungsbereichs

Answer 3

JavaScript hat nur zwei Arten von Anwendungsbereichen:

1. Globaler Geltungsbereich : Global ist nichts anderes als ein Bereich auf Fensterebene, d.h. eine Variable, die überall in der Anwendung vorhanden ist.
2. Funktionsumfang : Variable, die innerhalb einer Funktion mit var Schlüsselwort hat einen funktionalen Umfang.

Jedes Mal, wenn eine Funktion aufgerufen wird, wird ein variables Scope-Objekt erstellt (und in die Scope-Kette aufgenommen), dem in JavaScript Variablen folgen.

        a = "global";
         function outer(){ 
              b = "local";
              console.log(a+b); //"globallocal"
         }
outer();

Umfangskette -->

1. Fensterebene - a y outer Funktion befinden sich auf der obersten Ebene der Geltungskette.
2. wenn die äußere Funktion eine neue variable scope object (und in der Geltungskette enthalten) mit der Variablen b in ihm.

Wenn nun eine Variable a benötigt, sucht es zuerst nach dem nächstgelegenen Variablenbereich und wenn die Variable dort nicht vorhanden ist, geht es zum nächsten Objekt der Variablenbereichskette, die in diesem Fall die Fensterebene ist.

Answer 4

Führen Sie den Code aus. Ich hoffe, dies vermittelt eine Vorstellung vom Scoping

Name = 'global data';
document.Name = 'current document data';
(function(window,document){
var Name = 'local data';
var myObj = {
    Name: 'object data',
    f: function(){
        alert(this.Name);
    }
};

myObj.newFun = function(){
    alert(this.Name);
}

function testFun(){
    alert("Window Scope : " + window.Name + 
          "\nLocal Scope : " + Name + 
          "\nObject Scope : " + this.Name + 
          "\nCurrent document Scope : " + document.Name
         );
}

testFun.call(myObj);
})(window,document);

Answer 5

Nur um die anderen Antworten zu ergänzen: scope ist eine Nachschlageliste aller deklarierten Bezeichner (Variablen) und erzwingt eine strenge Reihe von Regeln, wie diese für den aktuell ausgeführten Code zugänglich sind. Dieses Nachschlagen kann zum Zweck der Zuweisung an die Variable erfolgen, was eine LHS-Referenz (linke Seite) ist, oder zum Zweck des Abrufs ihres Wertes, was eine RHS-Referenz (rechte Seite) ist. Diese Verweise werden von der JavaScript-Engine intern durchgeführt, wenn sie den Code kompiliert und ausführt.

Unter diesem Gesichtspunkt würde mir ein Bild helfen, das ich in dem Buch Scopes and Closures von Kyle Simpson gefunden habe:

Ich zitiere aus seinem ebook:

Das Gebäude stellt den verschachtelten Regelsatz unseres Programms dar. Die erste Stockwerk des Gebäudes repräsentiert Ihren aktuell ausgeführten Bereich, wo immer Sie sich befinden. Die oberste Ebene des Gebäudes ist der globale Bereich. Sie lösen LHS- und RHS-Referenzen auf, indem Sie in Ihrem aktuellen Stockwerk suchen, und wenn Sie sie nicht finden, nehmen Sie den Aufzug in die nächste Etage, Dort suchen Sie, dann im nächsten und so weiter. Sobald Sie in der obersten Etage angekommen sind (dem globalen Bereich) angekommen sind, finden Sie entweder, was Sie suchen, oder nicht. Aber Sie müssen auf jeden Fall anhalten.

Es ist erwähnenswert, dass "Scope look-up stoppt, sobald es die erste Übereinstimmung findet".

Diese Idee der "Bereichsebenen" erklärt, warum "this" mit einem neu erstellten Bereich geändert werden kann, wenn er in einer verschachtelten Funktion nachgeschlagen wird. Hier ist ein Link, der auf all diese Details eingeht, Alles, was Sie über den Anwendungsbereich von Javascript wissen wollten