JavaScript の基礎: スコープ

AO と BO について話す前に、スコープの概念を理解する必要があります。これにより、this が何を指すのかなど、後で多くのことを理解しやすくなります。

範囲

スコープとは、変数、関数、およびオブジェクトが定義された後に使用できる範囲のことです。

コンソールログ(a)
{
    var a = 1;
}
関数テスト(){
     var b = 2;
}

変数bは外部では使用できないことがわかります。スコープにより、外部からのデータの恣意的なアクセスや変更を防止できることがわかります。スコープによって互いの変数を分離できることは容易にわかります。つまり、異なるスコープ内の同じ名前の変数は競合しません。

最も重要かつよく使用されるスコープは、グローバル スコープと関数スコープです。しかし、ES6 以降では、let および const キーワードの登場により、ブロックレベルのスコープが導入されました。

グローバルスコープ

簡単に言えば、グローバル スコープとは、すべてのドメインがスコープ内の変数とメソッド オブジェクトにアクセスできることを意味します。

var a = "global1";
 関数テスト(){
    b="var がない場合、暗黙的にグローバル変数に変換されます";
    window.c="変数 c を window として直接設定すると、グローバルにもなります";
    var d="非グローバルスコープ";
 }
 #最初のステップはtest()を実行することです
test() #メソッド内の変数を定義して値を割り当てます #ステップ2 console.log(a)
コンソールログ(b)
コンソール.log(c)
コンソールログ(d)

一般的に言えば、window のプロパティはグローバル変数であり、window.c 形式では実際に c が wi​​ndow のプロパティとして扱われます。変数を宣言するときは、var を使用しないことに注意してください。グローバル変数に昇格してデータが汚染されないように、var を使用することをお勧めします。

また、テストメソッドもグローバルメソッドです。

関数テスト(){
    var a = 関数(){
        console.log("リテラルメソッド")
    }
    b = 関数(){
        console.log("var リテラルのないメソッド")
    } 
   関数test1(){
       console.log("通常の宣言方法")
   }
     
}
 

これは、リテラル宣言方法が、関数を変数に割り当ててそれを変数として扱うことに似ていることを示しています。これはプリコンパイル中にも実証されました。

関数のスコープ

関数スコープはグローバル スコープの反対です。どこでも使用されるわけではなく、特定の範囲内でのみ使用されます。通常、宣言された変数は関数内でのみ使用されます。

関数テスト(){
     var a="非グローバルスコープ";
     コンソールログ(a)
}

ここで別の問題が発生します。関数スコープ内の変数はグローバル メソッドで使用できます。では、関数は、その下の関数によって生成される関数スコープを持つことができるのでしょうか?また、それらの変数は互換的に使用できるでしょうか?

関数テスト(){
     var a="テストメソッドのスコープ";
    関数test1(){
         var b="test1 メソッドのスコープ";
        console.log("aの値=",a);
    }
    # 関数 test1() 内で関数を呼び出します。
     console.log("bの値=",b);
 }

ここで、スコープが階層化されていることがわかります。内側のスコープは外側のスコープの変数にアクセスできますが、外側のスコープは内側の変数にアクセスできません。

もし、スイッチ、のために、その間

条件文と論理ループは関数ではなく、関数のように動作せず、新しいスコープも作成しません。 **ブロックが定義されている変数は、存在するスコープ内に残ります。

関数テスト(a){
    もし(a>1){
        var b = 13;
    }それ以外{
       var b = 1;  
    }
    コンソールログ(b);
}

したがって、条件文や論理ループを使用する場合は、グローバル スコープで使用しないようにしてください。メソッド本体内の変数が他のデータに影響を与えるためです。

ブロックスコープ

ブロック スコープの出現には通常、let または const の 2 つのキーワードのいずれかが必要です。そうでない場合、ブロック スコープは存在しません。

関数テスト(a){
    定数b="23";
    (a>2)の場合{
        定数 c=3
        console.log("一人称 if---c-----",c)
    }
    (a>1)の場合{
        console.log("二人称 if----b----",b)
        console.log("二人称if----c----",c)
    }
     
}

キーワード let と const がある場合、変数のスコープはその変数が宣言されている中括弧のペア内にあることがわかります。したがって、最初の if の c 変数は 2 番目の if では取得できません。もちろん、内部スコープは外部スコープの変数にアクセスできることになります。

letとconstの詳細については、前の記事をご覧ください。アドレス

スコープチェーン

この一見魔法のような概念は、簡単に言えば、スコープ内に存在する場合は直接使用され、次のレベルに存在しない場合は、グローバル スコープが見つかったときに終了される、というものです。

変数a=1
var b = 3
関数テスト(){
    変数a=2
    console.log("aの値",a);
    console.log("bの値",b);
}
 

ちなみに、スコープチェーンの検索ロジックは、実はプロトタイプチェーンの検索ロジックと同じです。これについては後ほど引き続きお話しします。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。