JavaScriptの関数スコープとブロックレベルスコープの簡単な説明

この記事では、JavaScript の関数スコープとブロックレベルのスコープについて簡単に説明します。必要な方は参考にしてください。

1. 関数レベルのスコープ

最初にコードの一部を見てみましょう

var a = true;

function hoisting(){
    if(!a){
        var a = 2;
    }
    console.log(a)
}

hoisting();
// 最终结果：2

このコードのロジックは、

1. が最初に現在の函数域内の変数を探すというものです。

2. 存在する場合は、最初に変数ヘッダを宣言します。存在しない場合は、見つかるまで親

3. から再検索します。

その後、

var a; // 变量声明 
a = true; // 变量定义

function hoisting(){
    var a; // 变量声明
    if(!a){
        a = 2; //变量定义
    }
    console.log(a) // 先从自身函数域开始查找，找不到再去父作用域
}

hoisting();

Javascript 変数は関数をスコープとして存在し、ローカルで見つからない場合は親レベルに移動して見つけるように書き換えることができます。

2. 解決策: クロージャ IIFE

はこの記事とはあまり関係ないかもしれません~~、重要なことは、クロージャが新しい関数ドメインを構築するということです。

即時に呼び出される関数式

彼の役割は、呼び出される前に変数に値を割り当てることです

var a = (function(){
    var a = 3
    return a
}())

3. 解決策: let、const

let と const の主な機能は、JavaScript を教えることです。元の関数-level スコープはブロックレベルスコープに合わせられます

let a = 2;

function block(){
    if(!a){
        let a =1
    }
    console.log(a)
}

block() // 2

このとき、関数のスコープはブロックレベルに基づいてより小さな単位に分割されます。

コードを 3 つのブロックに分割できます

• if ブロック

• ブロック ブロック

• ウィンドウ ブロック

さて、関数を書き換えるとどうなるか

let a = 0;

function block(){
    if(!a){
        let a =1
    }
    console.log(a)
}

block() // 0

最終結果は 0 です, 現在のブロックで a が見つからない場合は、親ブロックに移動して検索し、最終的な値は 0 になります

そして、if ブロック内の変数はブロック内でのみ有効です

おすすめ関連記事:

JS オブジェクト指向プログラミングでカプセル化分析

以上がJavaScriptの関数スコープとブロックレベルスコープの簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。