Verständnis von JavaScript Scoping & Hoisting (2)_Javascript-Kenntnisse

Scoping & Heben

var a = 1;

function foo() {
  if (!a) {
    var a = 2;
  }
  alert(a);
};

foo();

Welche Ergebnisse liefert der obige Code, wenn er ausgeführt wird?

Obwohl dies für erfahrene Programmierer nur ein Kinderspiel ist, folge ich dennoch den gängigen Vorstellungen von Anfängern und beschreibe es:

1. Erstellte die globale Variable a und definierte ihren Wert als 1
2. Funktion foo
erstellt 3. Im Funktionskörper von foo wird die if-Anweisung nicht ausgeführt, da !a die Variable a in einen booleschen falschen Wert umwandelt, d. h. false
4. Überspringen Sie den bedingten Zweig, Alarmvariable a, das Endergebnis sollte 1 ausgegeben werden

Nun, es scheint eine einwandfreie Argumentation zu sein, aber das Überraschende ist: Die Antwort ist tatsächlich 2! Warum?

Keine Sorge, ich erkläre es dir. Lassen Sie mich zunächst sagen, dass dies kein Fehler ist, sondern eine (inoffizielle) Funktion des JavaScript-Sprachinterpreters. Jemand (Ben Cherry) hat diese Funktion als Hoisting< bezeichnet 🎜> (Es gibt noch keine Standardübersetzung, die gebräuchlichere ist Promote).

Erklärungen und Definitionen

Wissen Sie, was diesen Code betrifft, welche der beiden Anweisungen „Variable a deklarieren“ oder „Variable a definieren“ richtig ist?
•Das folgende Beispiel heißt „Variablen deklarieren“:

var a; // Dies ist eine Aussage

var a = 1; // Kombiniere zwei zu eins: Deklariere die Existenz einer Variablen und weise ihr einen Wert zu

Hier ist der entscheidende Punkt: Wenn Sie denken, Sie hätten nur eine Sache getan (var a = 1), hat der Interpreter diese Sache tatsächlich in zwei Schritte zerlegt, einer ist die Deklaration (var a) und der andere ist die Definition ( a = 1).

Was hat das mit Heben zu tun?

Um auf das verwirrende Beispiel am Anfang zurückzukommen, möchte ich Ihnen erklären, wie der Interpreter Ihren Code analysiert:

var a;
a = 1;

function foo() {
  var a;    // 关键在这里
  if (!a) {
    a = 2;
  }
  alert(a);   // 此时的 a 并非函数体外的那个全局变量
}

Jemand könnte fragen: „Warum nicht die Variable a innerhalb der if-Anweisung deklarieren?“

Neuen Bereich erstellen

Wenn alert(a) ausgeführt wird, wird nach dem Speicherort der Variablen a gesucht. Die Suche erfolgt vom aktuellen Bereich nach oben (oder nach außen) zum Bereich der obersten Ebene. Wenn sie nicht gefunden wird, wird „undefiniert“ gemeldet .

你或许在无数的 JavaScript 书籍和文章里读到过：“请始终保持作用域内所有变量的声明放置在作用域的顶部”，现在你应该明白为什么有此一说了吧？因为这样可以避免 Hoisting 特性给你带来的困扰（我不是很情愿这么说，因为 Hoisting 本身并没有什么错），也可以很明确的告诉所有阅读代码的人（包括你自己）在当前作用域内有哪些变量可以访问。但是，变量声明的提升并非 Hoisting 的全部。在 JavaScript 中，有四种方式可以让命名进入到作用域中（按优先级）：

1.语言定义的命名：比如 this 或者 arguments，它们在所有作用域内都有效且优先级最高，所以在任何地方你都不能把变量命名为 this 之类的，这样是没有意义的
2.形式参数：函数定义时声明的形式参数会作为变量被 hoisting 至该函数的作用域内。所以形式参数是本地的，不是外部的或者全局的。当然你可以在执行函数的时候把外部变量传进来，但是传进来之后就是本地的了
3.函数声明：函数体内部还可以声明函数，不过它们也都是本地的了
4.变量声明：这个优先级其实还是最低的，不过它们也都是最常用的

另外，还记得之前我们讨论过 声明 和 定义 的区别吧？当时我并没有说为什么要理解这个区别，不过现在是时候了，记住：

Hosting 只提升了命名，没有提升定义

这一点和我们接下来要讲到的东西息息相关，请看：

函数声明与函数表达式的差别

先看两个例子：

function test() {
  foo();

  function foo() {
    alert("我是会出现的啦……");
  }
}

test();

function test() {
  foo();

  var foo = function() {
    alert("我不会出现的哦……");
  }
}

test();

同学，在了解了 Scoping & Hoisting 之后，你知道怎么解释这一切了吧？

在第一个例子里，函数 foo 是一个声明，既然是声明就会被提升（我特意包裹了一个外层作用域，因为全局作用域需要你的想象，不是那么直观，但是道理是一样的），所以在执行 foo() 之前，作用域就知道函数 foo 的存在了。这叫做函数声明（Function Declaration），函数声明会连通命名和函数体一起被提升至作用域顶部。

然而在第二个例子里，被提升的仅仅是变量名 foo，至于它的定义依然停留在原处。因此在执行 foo() 之前，作用域只知道 foo 的命名，不知道它到底是什么，所以执行会报错（通常会是：undefined is not a function）。这叫做函数表达式（Function Expression），函数表达式只有命名会被提升，定义的函数体则不会。

尾记：Ben Cherry 的原文解释的更加详细，只不过是英文而已。我这篇是借花献佛，主要是更浅显的解释给初学者听，若要看更多的示例，请移步原作，谢谢。