jsスコープの詳しい説明

この記事では、主にjsスコープの詳細な説明を紹介します。これは、必要な友達に参考にしてもらいたいです

1.ES5のスコープ

for(var i =0;i<10;i++){
 } 
console.log(i)

jsコード、あなたはどう思いますか？出力はどうなるでしょうか？答えは 10 です。Java に慣れている学生は、なぜこれなのかと少し驚くでしょう。 js は Java とはまだ異なるため、ES5 ではグローバル スコープと関数スコープのみが存在し、ブロック スコープの機能は当然実装できます。以下のコードを見てください:

(function(){
  for(var i =0;i<10;i++){
   
   } 
})() 
console.log(i)

この記述方法は、即時呼び出し関数式 (IIFE) と呼ばれます。Baidu を知らない場合、これは実際にローカル スコープを作成します。このスコープで宣言された変数はブロック内でのみ有効です。外部からはアクセスできません。この書き方の利点は、グローバル変数を汚さないことです。

ここでもう 1 つ言及しておきたいのは、ES5 では変数の宣言が厳密ではないということです。a=10 を直接使用してグローバル変数を宣言できます。以下のように:

a=10; 
   console.log(a)

出力 10、ここでは変数を宣言せずに使用できます。実際、js は 1 つのことを行います。次のコードが実行されます:

var a=undefined; 
   a=10;
   console.log(a)

変数を宣言せずに関数内で直接使用してみてください。個人的には、この柔軟なアプローチはあまり良くないと思います。ただし、ES6 では、変数を宣言せずに使用することは推奨されなくなりました。
それでは、さらに高度なこと、変数改善をやってみましょう。 (ES5 の概念、ES6 での新しい使用法では変数の昇格は発生しません)、コードを見てください:

a=10;
 (function(){
    console.log(a) 
    var a=1; 
})();

出力は何だと思いますか?未定義、正しく答えられましたか?混乱しても構いません。変数の昇格とは何かを見てみましょう。実際には、変数の宣言を関数の先頭に昇格させることです。実際、上記のコードは、js を説明すると次のようになります:

var a=undefined;
 a=10;
 (function(){
     var a=undefined;
     console.log(a)
     a=1;
 })();

これで、変数のプロモーションが何を意味するか理解できました。実際、これはステートメントを前面に持ってくることを意味するため、出力は未定義になります。

2. ES6 のスコープ

ES5 では多くの問題があるため、ES6 では var の宣言が let に置き換えられていますが、ES5 との互換性を保つために、以前の var を引き続き使用できます。ただし、let を使用することをお勧めします。
let は、ブロック スコープである新しいスコープを js に追加します。コードを見てください:

for(let i=0;i<10;i++){
 }
 console.log(a)

出力 a は定義されていません ここでは、Java およびその他の構文を完全に使用して変数の宣言を理解できますが、let を使用して宣言された変数は宣言で使用できません。
a=3
let a =10;
alert(a)
は a が定義されていないと出力します。なぜですか? Ruan Yifeng の ES6 では、let コマンドがブロックレベルのスコープに存在する限り、宣言された変数はこの領域に「バインド」され、外部の影響を受けなくなると述べています。 ES6 では、
ブロック内に let および const コマンドがある場合、このブロック内でこれらのコマンドによって宣言された変数は最初から閉じられたスコープを形成することを明確に規定しています。宣言前にこれらの変数を使用すると、エラーが発生します。もちろん、その理由を説明する際に、彼は一時的なデッドゾーンについて言及しました。
. 概要 (本題から外れます)
ES6 が登場してからまだ時間が経っていないため、ES5 の記述や使用方法がまだたくさん出てきます。そのため、JS es5 と es6 を理解することが重要です。エンドまたはバックエンドで、js を使用することになります。また、js について深く理解する必要があります。さらに、フロントエンドの関数を記述するだけでは済みません。私は今でも js の開発について非常に楽観的です。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

JSのプロトタイプの詳細な説明

jsを介して疑似配列を配列に変換する方法

以上がjsスコープの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。