JavaScript のスコープを理解する

このトピックは何度も取り上げられていますが、対処しようとしている問題の観点から、(JavaScript を使用して) スコープとは何かについて話したいと思います。

スコープは実際にどのような問題を解決しますか?

アプリケーションのサイズが大きくなるにつれて、複雑さも増します。スコープはそのような複雑さを管理するためのツールです。

カップリングとデカップリング

7 に設定されたグローバル変数 radius と、「特別な」ボタンを返す関数 createSpecialButton() があると仮定しましょう:

リーリー

この関数は、特定の半径を持つボタンを返します。この場合は 7 に設定されています。現時点では、半径が何に設定されているかがわかっているため、結果のボタンがどのように見えるかがわかっているため、コードに問題はありません。 。しかし、両方とも radius 変数に依存するさらに 2 つの関数を追加するとどうなるでしょうか?コードは次のようになります:

リーリー

この変更を行った後、createSpecialButton() を呼び出すときの半径の値はどうなりますか? 16 と推測したなら、正解です。

2 つの追加関数を追加するだけで、コードの複雑さが大幅に増加し、現在は複数の無関係なコード部分が同じ依存関係に依存している世界に住んでいます。ここで、これがはるかに大規模なフルスタック アプリケーションであると想像してください。特定の状態の部分がどこから来たのか、バグが発生したときにどのように修正するかを推論するのはすぐに困難になります。

これを修正するには、関数ごとに個別の半径変数を定義できます:

リーリー

この変更を見て、「まあ、分かったが、コードが増えた - それは正しくないようだ」と言うかもしれません。その通りです。コードの量は増えていますが、コードが減って保守性が低下するのであれば、コードが少ない方が良いというわけではありません。私たちが加えた変更により、コードの保守性が向上します。これは常に良いことです。

JavaScript のスコープの種類

グローバルスコープ

グローバル スコープには、アプリケーション全体のあらゆるものからアクセスできます。 Node.JS アプリを作成している場合、おそらくグローバル スコープを使用したり、グローバル スコープに遭遇したりすることはありません。ただし、Web アプリで作業している場合は、script タグまたは window.SOMETHING を使用して宣言をグローバル スコープに置くことができます。

たとえば、script タグを使用すると、次のようなことができます:

リーリー
また、MDN は「グローバル スコープ」の定義を「スクリプト モードで実行されるすべてのコードのデフォルト スコープ」と表現しています。上記の例が彼らが言及しているものだと

思います

。ウィンドウ グローバル オブジェクトを使用しているときに、次のようなことを行うことができます:

リーリー

モジュールのスコープ

Node.JS プロジェクトで作業している場合、モジュール スコープは最高レベルで作業することになります。 .js (または .ts) 拡張子の付いた各ファイルは別個のモジュールです。つまり、宣言を明示的にエクスポートしない限り、指定されたファイル内のすべてのユーザーが宣言にアクセスできることになります。

たとえば、user.ts では、両方の関数が変数名にアクセスできます。

リーリー

ただし、このバージョンの user.ts では、accessName() のみが変数名にアクセスできます:

リーリー

これらのモジュールでは何もエクスポートされないことに注意してください。言い換えれば、他のモジュールのコードはこのコードについて知る方法がないため、それをインポートして使用することはできません。ただし、それは変更できます:

リーリー

これで、両方の関数がエクスポートされ、他のモジュールで使用できるようになります。これは、最初に説明したグローバル スコープの概念とは技術的に異なりますが、あるモジュールから別のモジュールにコードをインポートすることで、アプリケーション全体でコードを利用できるようにするという点では似ています。
機能範囲

実際には関数スコープについてはすでに見てきました。以下のコードをチェックしてください (上記のスニペットの 1 つと同じコードです):

リーリー

これを実行してみてください - 読み取ろうとしているname変数はgreet()のコンテキスト(つまり「スコープ」)内にのみ存在するため、greetAgain()はエラーになります。

注: これは「ローカル スコープ」と呼ばれる場合があります。

ブロックスコープ

ブロック スコープは、新しい変数タイプ、特に var ではなく let と const でのみ機能するため、興味深いものです。見てみましょう。

リーリー

上記の例では、1) コードを {} 内に配置するとコード ブロックが作成されることがわかります。 2) let と const を使用して定義された変数は、そのコード ブロック内でのみアクセスできます。 3) var で作成された変数は、{} の外側でもアクセスできるため、ブロック スコープのルールに従いません。

注: 最新の JavaScript は、変数宣言に var ではなく let と const を使用します。

申告は必要最小限の範囲内で行うこと

最後に、スコープはコードの複雑さを管理するためのツールであることを覚えておいてください。宣言を配置するスコープのレベルが高くなるほど、コードの複雑さが増すため、宣言を配置することを目指すのが最善です。必要最小限の範囲で。

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