ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript での変数ホイスティングを理解する方法

JavaScript での変数ホイスティングを理解する方法

清浅
清浅オリジナル
2019-04-20 11:20:522779ブラウズ

JavaScript における変数のプロモーションとは、変数と関数の宣言がコードの先頭に移動することを意味しますが、実際には、変数と関数の宣言の場所は移動せず、コンパイル プロセス中にメモリ内に配置されるだけです。 。

JavaScript はインタープリタ言語ですが、Web 開発における実行前の重要なステップは、インタープリタがコードを参照して、宣言されたすべての変数を識別し、いつ再割り当てされるかを記録し、コード ブロックを 3 つのレベルのスコープに分割することです。 : ブロック、関数、グローバル。次にJavaScriptでの変数プロモーションについて詳しく紹介していきますので、お役に立てれば幸いです。 #JavaScriptTutorial

JavaScript での変数ホイスティングを理解する方法]

例:

function exampleFunction() { 
 var x = "declared inside function";
 console.log("Inside function"); 
 console.log(x);
 }
 console.log(x);
レンダリング:

#上記の例の関数のスコープには変数 x が含まれているため、変数は関数内でのみ認識されます。グローバル スコープでアクセスすると、x は宣言された変数ではないため、エラーが報告されます。 x の宣言を関数の外に移動すると、その宣言はグローバル スコープになり、関数の外でも内でも使用できます。


var x = "declared outside function";
exampleFunction();
function exampleFunction() { 
 console.log("Inside function");
 console.log(x);}
 console.log("Outside function");
 console.log(x);
JavaScript での変数ホイスティングを理解する方法

レンダリング:

ES6 の登場により、2 つ変数をプロモートする新しいメソッド、let メソッドと const メソッドが導入されました。これらのメソッドにより、変数で使用可能な範囲をより詳細に制御できます。 let と const で定義されたローカル変数は、それらが定義されているレベルでのみ使用できます。

変数のプロモーション

次の例では、x は var を宣言します。 、および x は、関数全体とサブブロックで同じ変数を呼び出します。 x が let または const で宣言されている場合、サブモジュールで let x を再度宣言すると、外部スコープはそれにアクセスできなくなります; 実際には、それは別の変数です JavaScript での変数ホイスティングを理解する方法

function varTest() { 
 var x = 1; 
 if (true) { 
   var x = 2;  
   console.log(x); // 2 
 }
 console.log(x); // 2 
 }
 function letTest() {
 let x = 1; 
 if (true) {
   let x = 2; 
   console.log(x); // 2
 }
 console.log(x); // 1}

例:

function doSomething() {
 console.log(bar); // undefined
 console.log(foo); // ReferenceError
 var bar = 1; 
 let foo = 2;}
この関数では、宣言バーがスコープの先頭に昇格されます。実際には、次のように実行されます。
function doSomething() {
 var bar;
 console.log(bar); // undefined
 console.log(foo); // ReferenceError
 bar = 1; 
 let foo = 2;}

これが、console.log(bar) の結果が未定義であり、console.log(foo) がエラーを報告する理由です。

これにより、おそらく:

num = 6;
console.log(num); // returns 6
var num;

および:

dogName("Watson");
function dogName(name) {
 console.log("My dog's name is " + name);
 }

最初の例では、var num は割り当ての後に宣言されていますが、コンピュータの観点からは、次のことに注意してください。グローバルに宣言したので、宣言を先頭に移動して、コードの残りの実行を続けます。 2 番目の例では、関数を定義する前に関数を呼び出したり呼び出したりした場合でも、定義はスコープの先頭に引き上げられるため、実際にコードの実行を開始する頃には、インタープリターはそれが DogName() であることをすでに認識しています。

注: var 変数の場合、宣言のみが昇格され、割り当ては昇格されません。

まとめ: 以上がこの記事の全内容ですので、皆様の変数改善学習の一助になれば幸いです。

以上がJavaScript での変数ホイスティングを理解する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:TypeScript 入門次の記事:TypeScript 入門