Umfang in JavaScript verstehen

Scope oder eine Reihe von Regeln, die bestimmen, wo sich eine Variable befinden soll, ist eines der grundlegendsten Konzepte jeder Programmiersprache. Tatsächlich ist es so grundlegend, dass wir leicht vergessen können, wie subtil diese Regeln sind!

Wenn Sie genau verstehen, wie die JavaScript-Engine über den Umfang „denkt“, können Sie häufige Fehler vermeiden, die durch das Heben von Texten entstehen können, Sie können sich darauf vorbereiten, sich auf Abschlüsse zu konzentrieren, und Sie kommen dem Ziel, nie wieder das Falsche zu schreiben, einen Schritt näher .

...Jedenfalls wird es Ihnen helfen, das Heben und Schließen zu verstehen.

In diesem Artikel erfahren wir mehr über:

• Grundkenntnisse des Umfangs in JavaScript
• Wie der Interpreter entscheidet, welche Variablen zu welchem ​​Bereich gehören
• Das eigentliche Funktionsprinzip des Hebens
• ES6-Schlüsselwörter let 和 const So ändern Sie das Spiel

Lassen Sie uns tiefer graben.

Wenn Sie mehr über ES6 erfahren möchten und wissen möchten, wie Sie Syntax und Funktionen zur Verbesserung und Vereinfachung Ihres JavaScript-Codes nutzen können, schauen Sie sich diese beiden Kurse an:

lexikalischer Geltungsbereich

Wenn Sie schon einmal eine Zeile JavaScript geschrieben haben, wissen Sie, dass wo Sie Variablen definieren, bestimmt, wo Sie sie verwenden >. Die Tatsache, dass die Sichtbarkeit einer Variablen von der Struktur des Quellcodes abhängt, wird als lexikalischer Scope bezeichnet.

Es gibt drei Möglichkeiten, Bereiche in JavaScript zu erstellen:

1. Funktionen erstellen. Innerhalb einer Funktion deklarierte Variablen sind nur innerhalb dieser Funktion sichtbar, auch innerhalb verschachtelter Funktionen.
2. Verwenden Sie let 或 const , um Variablen innerhalb eines Codeblocks zu deklarieren. Solche Deklarationen sind nur innerhalb von Blöcken sichtbar.
3. Erstellen Sie catch Blöcke. Ob Sie es glauben oder nicht, dadurch entsteht tatsächlich ein neues Sortiment!

   "use strict";
   var mr_global = "Mr Global";
   
   function foo () {
       var mrs_local = "Mrs Local";
       console.log("I can see " + mr_global + " and " + mrs_local + ".");
       
       function bar () {
           console.log("I can also see " + mr_global + " and " + mrs_local + ".");
       }
   }
   
   foo(); // Works as expected
   
   try {
       console.log("But /I/ can't see " + mrs_local + "."); 
   } catch (err) {
       console.log("You just got a " + err + ".");
   }
   
   {
       let foo = "foo";
       const bar = "bar";
       console.log("I can use " + foo + bar + " in its block...");
   }
   
   try {
       console.log("But not outside of it.");   
   } catch (err) {
       console.log("You just got another " + err + ".");
   }
   
   // Throws ReferenceError!
   console.log("Note that " + err + " doesn't exist outside of 'catch'!") 
   

   Nach dem Login kopieren
Der obige Codeausschnitt demonstriert alle drei Scoping-Mechanismen. Sie können es in Node oder Firefox ausführen, aber Chrome funktioniert noch nicht gut mit

letWir werden jeden einzelnen davon im Detail besprechen. Schauen wir uns zunächst genauer an, wie JavaScript bestimmt, welche Variablen zu welchem ​​Bereich gehören.

Zusammenstellungsprozess: Vogelperspektive

Wenn Sie ein Stück JavaScript ausführen, passieren zwei Dinge, damit es ordnungsgemäß funktioniert.

1. Dann wird der kompilierte Code ausgeführt.
Während des

schritt führt die JavaScript-Engine Folgendes aus:

1. Registrieren Sie sie im entsprechenden Bereich
2. Schaffen Sie Platz für Ihre eigenen Werte
Nur während der

setzt die JavaScript-Engine tatsächlich den Wert einer Variablenreferenz auf den ihm zugewiesenen Wert. Bis dahin sind sie . undefinedSchritt 1: Kompilieren

// I can use first_name anywhere in this program 
var first_name = "Peleke";

function popup (first_name) {
    // I can only use last_name inside of this function
    var last_name = "Sengstacke";
    alert(first_name + ' ' + last_name);
}

popup(first_name);

Lassen Sie uns Schritt für Schritt verstehen, was ein Compiler tut.

Zunächst liest es die Zeile var first_name = "Peleke". Als nächstes wird der

bestimmt, in dem die Variable gespeichert werden soll. Da wir uns auf der obersten Ebene des Skripts befinden, erkennt es, dass wir uns im var first_name = "Peleke"。接下来，它确定将变量保存到的范围。因为我们位于脚本的顶层，所以它意识到我们处于全局范围。然后，它将变量 first_name 保存到全局范围，并将其值初始化为 undefinedglobalen Bereich

. function popup (first_name) Zweitens liest der Compiler Zeilen mit . Da das Schlüsselwort

als Erstes in der Zeile steht, erstellt es einen neuen Bereich für die Funktion, registriert die Funktionsdefinition im globalen Bereich und sucht darin nach der Variablendeklaration. var last_name = "Sengstacke"，因此编译器会将变量 last_name 保存到 </em> class="inline">popup —不到全局范围 — 并将其值设置为 undefined

nicht zum globalen Bereich – und seinen Wert auf setzen.

Da es innerhalb der Funktion keine Variablendeklarationen mehr gibt, greift der Compiler auf den globalen Gültigkeitsbereich zurück. Da keine Variablendeklarationen mehr vorhanden sind, ist diese Phase abgeschlossen.

1. 全局范围内有一个名为 first_name 的变量。
2. 全局范围内有一个名为 popup 的函数。
3. 在 popup 范围内有一个名为 last_name 的变量。
4. first_name 和 last_name 的值均为 undefined。

它并不关心我们是否在代码中的其他地方分配了这些变量值。引擎在执行时会处理这个问题。

第 2 步：执行

在下一步中，引擎再次读取我们的代码，但这一次，执行它。

首先，它读取行 var first_name = "Peleke"。为此，引擎会查找名为 first_name 的变量。由于编译器已经用该名称注册了一个变量，引擎会找到它，并将其值设置为 "Peleke"。

接下来，它读取行 function popup (first_name)。由于我们没有在这里执行该函数，因此引擎不感兴趣并跳过它。

最后，它读取行 popup(first_name)。由于我们在这里执行一个函数，因此引擎：

1. 查找 popup 的值
2. 查找 first_name 的值
3. 将 popup 作为函数执行，并传递 first_name 的值作为参数

当执行 popup 时，它会经历相同的过程，但这次是在函数 popup 内。它：

1. 查找名为 last_name 的变量
2. 将 last_name 的值设置为等于 "Sengstacke"
3. 查找 alert，将其作为函数执行，并以 "Peleke Sengstacke" 作为参数

事实证明，幕后发生的事情比我们想象的要多得多！

既然您已经了解了 JavaScript 如何读取和运行您编写的代码，我们就准备好解决一些更贴近实际的问题：提升的工作原理。

显微镜下的吊装

让我们从一些代码开始。

bar();

function bar () {
    if (!foo) {
        alert(foo + "? This is strange...");
    }
    var foo = "bar";
}

broken(); // TypeError!
var broken = function () {
    alert("This alert won't show up!");
}

如果运行此代码，您会注意到三件事：

1. 在分配之前，您可以引用 foo，但其值为 undefined。
2. 您可以在定义之前调用 已损坏的，但您会收到 TypeError。
3. 您可以在定义之前调用 bar，它会按需要工作。

提升是指 JavaScript 使我们声明的所有变量名称在其作用域内的任何地方都可用，包括在我们分配给它们之前 .

代码段中的三种情况是您在自己的代码中需要注意的三种情况，因此我们将一一逐步介绍它们。

提升变量声明

请记住，当 JavaScript 编译器读取像 var foo = "bar" 这样的行时，它会：

1. 将名称 foo 注册到最近的范围
2. 将 foo 的值设置为未定义

我们可以在赋值之前使用 foo 的原因是，当引擎查找具有该名称的变量时，它确实存在。这就是为什么它不会抛出 ReferenceError。

相反，它获取值 undefined，并尝试使用该值执行您要求的任何操作。通常，这是一个错误。

记住这一点，我们可能会想象 JavaScript 在我们的函数 bar 中看到的更像是这样：

function bar () {
    var foo; // undefined
    if (!foo) {
        // !undefined is true, so alert
        alert(foo + "? This is strange...");
    }
    foo = "bar";
}

如果您愿意的话，这是提升的第一条规则：变量在其整个范围内都可用，但其值为 undefined ，直到您代码分配给他们。

常见的 JavaScript 习惯用法是将所有 var 声明写入其作用域的顶部，而不是首次使用它们的位置。用 Doug Crockford 的话来说，这可以帮助您的代码阅读更像它运行。

仔细想想，这是有道理的。当我们以 JavaScript 读取代码的方式编写代码时，为什么 bar 的行为方式非常清楚，不是吗？那么为什么不一直这样写呢？

提升函数表达式

事实上，当我们在定义之前尝试执行 broken 时，我们得到了 TypeError，这只是第一条提升规则的一个特例。

我们定义了一个名为 broken 的变量，编译器会在全局范围内注册该变量，并将其设置为等于 undefined。当我们尝试运行它时，引擎会查找 broken 的值，发现它是 undefined，并尝试将 undefined 作为函数执行.

显然，undefined 不是一个函数，这就是为什么我们得到 TypeError！

提升函数声明

最后，回想一下，在定义 bar 之前，我们可以调用它。这是由于第二条提升规则：当 JavaScript 编译器找到函数声明时，它会使其名称和定义在其作用域的顶部可用。再次重写我们的代码：

function bar () {
    if (!foo) {
        alert(foo + "? This is strange...");
    }
    var foo = "bar";
}

var broken; // undefined

bar(); // bar is already defined, executes fine

broken(); // Can't execute undefined!

broken = function () {
    alert("This alert won't show up!");
}

同样，当您编写作为JavaScript读取时，它更有意义，您不觉得吗？

查看：

1. 变量声明和函数表达式的名称在其整个范围内都可用，但它们的值在赋值之前为 undefined。
2. 函数声明的名称​​和定义在其整个范围内都可用，甚至在其定义之前。

现在让我们来看看两个工作方式稍有不同的新工具：let 和 const。

<strong>let</strong>、<strong></strong>const 和临时死区<强>

"use strict"; 
// You have to "use strict" to try this in Node
broken(); // ReferenceError!
let broken = function () {
    alert("This alert won't show up!");
}

// This is legal
const React = require('react');

// This is totally not legal
const crypto;
crypto = require('crypto');

"use strict";

{
  let foo = "foo";
  if (foo) {
      const bar = "bar";
      var foobar = foo + bar;

      console.log("I can see " + bar + " in this bloc.");
  }
  
  try {
    console.log("I can see " + foo + " in this block, but not " + bar + ".");
  } catch (err) {
    console.log("You got a " + err + ".");
  }
}

try {
  console.log( foo + bar ); // Throws because of 'foo', but both are undefined
} catch (err) {
  console.log( "You just got a " + err + ".");
}

console.log( foobar ); // Works fine

var foo = {
    name: 'Foo',
    languages: ['Spanish', 'French', 'Italian'],
    speak : function speak () {
        this.languages.forEach(function(language) {
            console.log(this.name + " speaks " + language + ".");
        })
    }
};

foo.speak();

function foo () {
    var bar = "bar";
    function baz () {
        // Reusing variable names like this is called "shadowing" 
        var bar = "BAR";
        console.log(bar); // BAR
    }
    baz();
}

foo(); // BAR

var foo = {
    name: 'Foo',
    languages: ['Spanish', 'French', 'Italian'],
    speak_self : function speak_s () {
        var self = this;
        self.languages.forEach(function(language) {
            console.log(self.name + " speaks " + language + ".");
        })
    },
    speak_bound : function speak_b () {
        this.languages.forEach(function(language) {
            console.log(this.name + " speaks " + language + ".");
        }.bind(foo)); // More commonly:.bind(this);
    }
};

var foo = {
    name: 'Foo',
    languages: ['Spanish', 'French', 'Italian'],
    speak : function speak () {
        this.languages.forEach((language) => {
            console.log(this.name + " speaks " + language + ".");
        })
    }
};