JavaScript ( JS )のスコープ

スコープとはメリアムウェブスターによると、範囲はunhamperedされた運動、活動または考えのためのスペースまたは機会です.メリアムウェブスターはまた、治療、活動、または影響の範囲として定義します.コンピューターサイエンス用語の範囲は、結合が有効であるコンピュータプログラムの領域として定義されます:名前が実体を参照するのに用いられることができるところ.MDN(JavaScriptドキュメンテーション)によれば-“scope”は実行の現在の文脈です.値と式が「見える」文脈または参照できる文脈
JavaScript(JS)のスコープの3つのレベルがあります.
1 .グローバルスコープ
機能範囲
この読み取りの各スコープを見てみましょう.私は、このコード全体を通して同じコード断片を使用するとすぐに指摘したい.コードスニペットのコメントを見てください.スコープ、コンテキスト、スコープチェインについて議論しているので、意図的にこれをしました.これらのコメントをチェック!
グローバルスコープはJSの最も外側のスコープです.任意の変数{} 's(機能にない)は世界的な範囲に住んでいます.グローバルスコープで定義されている変数は、アプリケーションファイルのどこでも「見える」です.
例えば、

let pizzaDough = 'brooklyn style'

// The variable pizzaDough lives in global scope (notice it is defined outside of any function). You can ignore the rest of this code for now.

function orderPizza() {
  const sauce = 'marinara'

  function pizzaToppings() {
    const cheese = 'mozzarella'

    return pizzaDough + ' with ' + sauce + ' and ' + cheese + ' please!'

  }

  const wholePizza = pizzaToppings();

  return wholePizza;
}

orderPizza();

関数スコープとブロックスコープの両方がローカルスコープと見なされます.ローカルスコープで定義されている変数は「可視」で、実行可能です.コードの特定の部分だけです.
まず関数スコープの例を見てみましょう.

let pizzaDough = 'brooklyn style'

// The variable sauce is NOT visible here (sauce's outer context). Remember, this context is global scope.

function orderPizza() {
  const sauce = 'marinara'

  // The variable sauce is defined and visible in the function orderPizza. The variable sauce is not visible in it's outer context.

  function pizzaToppings() {
    const cheese = 'mozzarella'

    return pizzaDough + ' with ' + sauce + ' and ' + cheese + ' please!'

  }

  const wholePizza = pizzaToppings();

  return wholePizza;
}

orderPizza();

ブロックスコープの例を見る前に、まずJSのスコープチェーンを簡単に説明したい.
変数を解決するとき、内部関数は最初に自分のスコープを見ます.変数が局所的に割り当てられていない場合(前述の内部関数のスコープ内で)、JSは変数の値に対して関数の外部コンテキストを参照します.必要に応じて外部コンテキストを連続的にチェックするこのプロセスはスコープチェインです.
以前は、グローバルスコープで定義されている変数がアプリケーションファイルのどこかに「見える」のを見ました.これが本当のスコープチェーンのbecuaseです!スコープチェーンの最終注記:スコープ連鎖は一方向です.これは、JSが1つの方向だけにチェーンすることを意味します内側のほとんどのコンテキスト(例コードの関数スコープ)から外側のほとんどのコンテキスト(常にグローバルスコープ)に.スコープの視覚的な表現のために以下のイメージをチェックしてください、そして、あなたが再び例コードを見る前に、Scope Chainについて考えてください.

さて、下のコードでは、アクションのスコープチェーンの例を見ることができます.先に行くと自分でこのコードを実行してみてください!
次の出力が表示されます.

let pizzaDough = 'brooklyn style'

function orderPizza() {
  const sauce = 'marinara'

  function pizzaToppings() {
    const cheese = 'mozzarella'

    return pizzaDough + ' with ' + sauce + ' and ' + cheese + ' please!'

  }

  const wholePizza = pizzaToppings();

  return wholePizza;
}

orderPizza();

// => 'brooklyn style with marinara and mozzarella please!'

コードが実行されるときに起こることを壊しましょう.上記のコードでは、関数pizzaToppings まず変数の値の範囲内で見てください.pizzaDough sauce and cheese . それはcheese 「mozzarella」の値が割り当てられますが、まだ他の2つの変数の割り当てられた値を見ることができません.JSチェックpizzaToppings 's外部コンテキストorderPizza 'この場合、sコンテキストsauce : 「マリナラ」.最後に、JSはスコープチェーンを続けてpizzaDough : ブルックリン.
きれいなきちんとした!さて、うまくいけば、JSでスコープとスコープのチェーンについてもう少し理解できます.