Heim  >  Artikel  >  Web-Frontend  >  Lassen Sie uns über die Deklarationsförderung in JavaScript sprechen

Lassen Sie uns über die Deklarationsförderung in JavaScript sprechen

WBOY
WBOYnach vorne
2022-11-14 17:59:021091Durchsuche

Dieser Artikel vermittelt Ihnen relevantes Wissen über JavaScript, das hauptsächlich den relevanten Inhalt zur Anweisungsförderung einführt, eine Funktion des JavaScript-Parsers, die die Auswirkungen von Funktions- und Variablendeklarationsanweisungen im Code extrahiert Werfen wir einen Blick auf den Bereich, in dem es sich befindet. Ich hoffe, es wird für alle hilfreich sein.

Lassen Sie uns über die Deklarationsförderung in JavaScript sprechen

[Verwandte Empfehlungen: JavaScript-Video-Tutorial, Web-Frontend]

Das Deklarationsheben (Hosting) ist eine Funktion des JavaScript-Parsers, der die Funktionen und Variablendeklarationsanweisungen im Code in diesen extrahiert Die Vorderseite des Zielfernrohrs.

Funktionsförderung

JavaScript unterstützt den Aufruf von Funktionen vor der Funktionsdeklaration.

say();function say() {  console.log("Hello");
}

Der Parser scannt den Code innerhalb des Gültigkeitsbereichs und extrahiert die Funktionsdeklaration an den Anfang des ausgeführten Codes. So betrachtet der Parser diesen Code:

function say() {  console.log("Hello");
}say();

Zusätzlich zu gewöhnlichen Funktionen gibt es auch async function, function *, async function * Gleicher Lifting-Effekt. async function, function *, async function * 也有相同的提升效果。

var 变量声明提升

var 关键字的变量声明会被提升,但变量的赋值不会被提升。

console.log(foo); // undefinedvar foo = "bar";console.log(foo); // 'bar'

以上代码的解析结果为:

var foo;console.log(foo);
foo = "bar";console.log(foo);

这可能会导致一些奇怪的问题:

var x = "x in global";

(function () {  // 这里期望读取全局变量
  console.log(x); // 结果为undefined. 
  /* ... */
  // 在函数内某处
  var x = "x in function";
})();

在过去,为了规避这种奇怪的提升,大家普遍把var 声明写在作用域的最前面。

var x='x';var y='y';function (){    var x;    var foo;    // ...}

当然,现在我们选择不用 var,改用更合理的 letconst

letconst 变量声明和死区

那么,letconst 就不存在变量提升了吗?—— 未必。

看这个例子:

const x = "x in global";

(function () {  // 这里期望读取全局变量
  console.log(x); // ReferenceError: Cannot access 'x' before initialization
  /* ... */
  // 在函数内某处
  const x = "x in function";
})();

执行报错,说明 const x = "x in function"; 一行影响了作用域内的上方区域代码。

解析器会扫描当前作用域下的 constlet 声明,在声明语句之前使用变量名都会触发 ReferenceError。这样可以避免上面提过的 var 提升问题和模糊不清的代码范式。

class 关键字也有同样的效果,new 一个未声明的类也会发生 ReferenceError

new MyClass(); // ReferenceError: Cannot access 'MyClass' before initializationclass MyClass {}

有人认为这种情况不属于提升,毕竟声明和赋值都没有提前;也有人认为这些语句在执行之前就产生了影响,其作用提升了。个人偏向后者,这是对(变量和类名)标识符的提升。

总结

一些 JavaScript 声明语句的效果会影响到所在的整个作用域,这种现象称为提升。

有 3 种类型的提升:

  • function 关键字的声明和赋值都提升。
  • var 关键字声明提升,赋值不提升。
  • let, const, class

    var Förderung der Variablendeklaration

var Die Variablendeklaration des Schlüsselworts wird gefördert, aber die Zuweisung der Variablen wird nicht gefördert.

rrreeeDas Parsing-Ergebnis des obigen Codes ist: rrreeeDies kann zu einigen seltsamen Problemen führen: rrreee

Um diese seltsame Verbesserung zu vermeiden, hat in der Vergangenheit im Allgemeinen jeder den var geschrieben Anweisung an der Vorderseite des Oszilloskops. 🎜rrreee🎜Natürlich entscheiden wir uns jetzt dafür, var nicht zu verwenden und die sinnvolleren let und const zu verwenden. 🎜

let und const Variablendeklaration und Totzone 🎜🎜Also, let und const Existiert keine Variablenförderung? —— Nicht unbedingt. 🎜🎜Sehen Sie sich dieses Beispiel an: 🎜rrreee🎜Der Ausführungsfehler wird gemeldet, was darauf hinweist, dass die Zeile const x = "x in function"; den oberen Bereichscode innerhalb des Bereichs beeinflusst. 🎜🎜Der Parser scannt die const- und let-Deklarationen im aktuellen Bereich. Die Verwendung von Variablennamen vor der Deklarationsanweisung löst ReferenceError aus. Dadurch werden das oben erwähnte Problem der var-Promotion und die mehrdeutigen Codemuster vermieden. 🎜🎜Das Schlüsselwort class hat ebenfalls den gleichen Effekt. new Eine nicht deklarierte Klasse verursacht ebenfalls ReferenceError. 🎜rrreee🎜Manche Leute denken, dass diese Situation keine Verbesserung darstellt, da die Erklärung und Zuordnung nicht im Voraus erfolgt. Andere glauben, dass diese Aussagen Auswirkungen haben, bevor sie ausgeführt werden, und dass ihre Wirkung verbessert wird. Persönlich bevorzuge ich Letzteres, nämlich die Förderung von Bezeichnern (Variablen- und Klassennamen). 🎜

Zusammenfassung🎜🎜Die Auswirkungen einiger JavaScript-Deklarationsanweisungen wirken sich auf den gesamten Bereich aus, in dem sie sich befinden. Dieses Phänomen wird als Promotion bezeichnet. 🎜🎜Es gibt 3 Arten der Werbung: 🎜
  • function Schlüsselwortdeklaration und -zuweisung werden beide beworben. 🎜
  • var-Schlüsselwortdeklaration wird gefördert, die Zuweisung wird jedoch nicht gefördert. 🎜
  • let, const, class-Bezeichner werden hochgestuft und bilden eine tote Zone, und weder Deklaration noch Zuweisung werden hochgestuft. 🎜🎜🎜【Verwandte Empfehlungen: 🎜JavaScript-Video-Tutorial🎜, 🎜Web-Frontend🎜】🎜

Das obige ist der detaillierte Inhalt vonLassen Sie uns über die Deklarationsförderung in JavaScript sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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