Heim > Artikel > Web-Frontend > Bereiche und Bereichsketten in JavaScript erklärt

Bereiche und Bereichsketten in JavaScript erklärt

PHPznach vorne: 2023-09-07 09:25:02935Durchsuche

解释 JavaScript 中的作用域和作用域链

In JavaScript definiert Scope, wie und in welchem Teil des Codes wir auf Variablen und Funktionen zugreifen. Einfach ausgedrückt: Der Umfang kann uns dabei helfen, die Sicherheit und Lesbarkeit unseres Codes zu verbessern. Daher können wir auf Variablen und Funktionen nur innerhalb ihres Gültigkeitsbereichs zugreifen und nicht außerhalb.

In diesem Tutorial werden wir verschiedene Arten von Zielfernrohren besprechen.

Globaler Geltungsbereich in JavaScript

Global definierte Variablen und Funktionen sind außerhalb aller Blöcke und Funktionen gemeint, die einen globalen Geltungsbereich haben. Wir können überall im Code auf alle Variablen und Funktionen mit globalem Gültigkeitsbereich zugreifen.

Grammatik

Benutzer können der folgenden Syntax folgen, um Variablen mit globalem Gültigkeitsbereich zu definieren.

var global = 30;
function func() {
   var b = global; // global variable has a global scope so we can access it inside the function.
}

Hier wird die globale Variable global außerhalb jeder Funktion deklariert, sodass sie einen globalen Gültigkeitsbereich hat. Der Zugriff darauf erfolgt dann innerhalb der Funktion func, indem die lokale Variable b deklariert und ihr der Wert der globalen Variablen global zugewiesen wird.

Beispiel

In diesem Beispiel definieren wir eine globale Variable mit globalem Gültigkeitsbereich. Wir greifen innerhalb einer Funktion namens func() darauf zu und geben seinen Wert von der Funktion zurück.

In der Ausgabe können wir beobachten, dass die Funktion func() 20 zurückgibt, was dem Wert der globalen Variablen entspricht.

<html>
   <body>
      <h2> Defining a variable with <i> global </i> scope </h2>
      <div id = "output"> </div>
      <script>
         let output = document.getElementById("output");
         var global = 20;
         function func() {
            return global;
         }
         output.innerHTML += "The value of variable named global: " + func();
      </script>
   </body>
</html>

Lokaler/Funktionsbereich

Der lokale Bereich wird auch als Funktionsumfang bezeichnet. Innerhalb einer Funktion definierte Variablen haben einen Funktionsbereich/lokalen Bereich. Wir können nicht auf Variablen außerhalb der Funktion zugreifen.

Grammatik

Sie können der folgenden Syntax folgen, um den lokalen Umfang von Variablen und Funktionen zu kennen -

function func() {
   var local_var = "Hi!";
}
console.log(local_var); // this will raise an error

Hier hat local_var einen Funktionsumfang innerhalb der Funktion func(), sodass wir außerhalb davon nicht darauf zugreifen können.

Beispiel

In diesem Beispiel haben wir die Funktion func() erstellt. Innerhalb der Funktion func() haben wir die Variable local_var mit lokalem Gültigkeitsbereich definiert, was bedeutet, dass wir nur innerhalb der Funktion func() darauf zugreifen können. Wir können sehen, dass, wenn wir versuchen, außerhalb der Funktion func() auf local_var zuzugreifen, ein Fehler ausgegeben wird, weil local_var undefiniert ist. Um diesen Fehler anzuzeigen, müssen Sie eine Konsole öffnen.

<html>
   <body>
      <h2>Defining a variable with <i> function </i> scope</h2>
      <div id = "output"> </div>
      <script>
         let output = document.getElementById("output");
         function func() {
            let local_var = 20;
            output.innerHTML += "The value of local_var inside fucntion: " + local_var + "<br/>";
         }
         func();
         // the local_var can't be accessed here
         output.innerHTML += "The value of local_var outside fucntion: " +local_var+ "<br/>";
      </script>
   </body>
<html>

Blockbereich

In JavaScript können wir zwei geschweifte Klammern ({ ….. }) verwenden, um Blöcke zu definieren. Blockumfang bedeutet, dass auf jede Variable, die wir innerhalb eines bestimmten Blocks definieren, nur innerhalb des Blocks und nicht außerhalb des Blocks zugegriffen werden kann. Mit den Schlüsselwörtern let und const deklarierte Variablen haben einen Blockbereich.

Grammatik

Benutzer können der folgenden Syntax folgen, um den Blockumfang von Variablen zu verstehen.

{
   let block_var = 6707;
   // block_var accessible here
}

// we can't access the block_var variable here.

Hier können wir nicht auf block_var außerhalb der geschweiften Klammern zugreifen, da wir es innerhalb eines bestimmten Blocks definiert haben.

Hinweis – Variablen, die mit dem Schlüsselwort var deklariert wurden, haben keinen Blockbereich.

Beispiel

In diesem Beispiel haben wir einen Block mit geschweiften Klammern definiert und eine Variable num definiert. Wir versuchen, innerhalb und außerhalb des Blocks auf diese Variable zuzugreifen. Sie können beobachten, dass wir außerhalb der geschweiften Klammern nicht auf num zugreifen können, da wir es innerhalb des Blocks definiert haben.

<html>
   <body>
      <h2>Defining the variable with <i> block </i> scope </h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         {
            const num = 200;
            output.innerHTML += "Value of num inside the block: " + num + "<br>";
         }
         // num is accessible here - outside the block
         output.innerHTML += "value of num outside the block: " + num + "<br>";
      </script>
   </body>
</html>

lexikalischer Geltungsbereich

Der lexikalische Geltungsbereich ist derselbe wie der statische Geltungsbereich. Wenn wir in JavaScript eine verschachtelte Funktion ausführen und versuchen, auf eine beliebige Variable innerhalb der verschachtelten Funktion zuzugreifen, findet es die Variable zunächst im lokalen Kontext. Wenn die Variable im lokalen Kontext der verschachtelten Funktion nicht gefunden werden kann, versucht sie, sie im übergeordneten Kontext der Funktionsausführung zu finden usw. Wenn die Variable schließlich nicht im globalen Kontext gefunden wird, gilt sie als undefiniert.

Grammatik

Benutzer können der folgenden Syntax folgen, um den lexikalischen Umfang zu verstehen.

var parent_var = 343;
var test = function () {
   console.log(parent_var);
};
test();

In der obigen Syntax haben wir aus dem Bereich der Funktionsausführung auf parent_var zugegriffen. Da die Funktion log() parent_var nicht im lokalen Bereich findet, wird sie versuchen, sie in dem Bereich zu finden, in dem die Funktion aufgerufen wurde (d. h. im globalen Bereich).

Beispiel

In diesem Beispiel haben wir die Funktion test() und die Funktion nested() darin definiert. Darüber hinaus greifen wir innerhalb der Funktion nested() auf global_var und parent_var zu. Da JavaScript diese beiden Variablen im lokalen Kontext nicht findet, sucht es zuerst im Ausführungskontext der Funktion „nested()“ und dann im Ausführungskontext der Funktion „test()“.

<html>
   <body>
      <h2>Defining the variables with <i> lexical </i> scope</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         var global_var = 576505;
         var test = function () {
            var parent_var = 343;
            var nested = function () {
               output.innerHTML += "The value of parent_var: " + parent_var + "<br/>";
               output.innerHTML += "The value of global_var: " + global_var + "<br/>";
            };
            nested();
         };
         test();
      </script>
   </body>
</html>

Scope-Kette

Wie der Begriff Scope Chain andeutet, handelt es sich um eine Scope Chain. Angenommen, wir definieren eine verschachtelte Funktion innerhalb einer Funktion. In diesem Fall kann der lokale Gültigkeitsbereich verwendet werden, und auf Variablen, die in der verschachtelten Funktion deklariert sind, kann in der äußeren Funktion nicht zugegriffen werden.

Wir erstellen also eine Scope-Kette; deshalb nennen wir sie Scope-Kette.

Grammatik

Benutzer können der folgenden Syntax folgen, um die Bereichskette zu verstehen.

function outer() {
   function inner() {
      // inner’s local scope.
      
      // we can access variables defined inside the outer() function as inner is inside the local scope of outer
   }
   
   // variables defined in the inner() function, can’t be accessible here.
}

Beispiel

In diesem Beispiel liegt die Funktion inner() im Bereich der Funktion OUTER(), was bedeutet, dass wir die Funktion Inner() nicht außerhalb der Funktion OUTER() aufrufen können. Die Funktion inner() erstellt die Bereichskette innerhalb der Funktion OUTER().

<html>
   <body>
      <h2>Scope Chain in JavaScript </i></h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         function outer() {
            var emp_name = "Shubham!";
            function inner() {
               var age = 22;
               output.innerHTML += ("The value of the emp_name is " + emp_name) +"<br/>";
               output.innerHTML += "The value of the age is " + age;
            }
            inner();
            
            // age can't be accessible here as it is the local scope of inner
         }
         outer();
      </script>
   </body>
</html>

在本教程中，我们讨论了 JavaScript 中的作用域和作用域链。我们讨论了全局、局部/函数、块和词法作用域。在上一节中，我们了解了作用域链在 Javascript 中的工作原理。

Das obige ist der detaillierte Inhalt vonBereiche und Bereichsketten in JavaScript erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript const 局部变量全局变量 var 作用域

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Konvertieren Sie eine vorzeichenlose 32-Bit-Dezimalzahl in die entsprechende IPv4-Adresse in JavaScriptNächster Artikel：Konvertieren Sie eine vorzeichenlose 32-Bit-Dezimalzahl in die entsprechende IPv4-Adresse in JavaScript

In Verbindung stehende Artikel

Mehr sehen