JavaScript のスコープを理解する

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

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

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

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

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

let radius = 7;

function createSpecialButton(radius) {
  return <button radius={radius}>Click Me!</button>
}

const button = createSpecialButton(radius);

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

let radius = 7;

function createSpecialButton() {
  return <button radius={radius}>Click Me!</button>
}

function profileButton() {
  radius = 10;
  return <button radius={radius}>Click Me!</button>
}

function registrationButton() {
  radius = 16;
  return <button radius={radius}>Click Me!</button>
}

const profileButton = profileButton();
const registrationButton = registrationButton();
const button = createSpecialButton();

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

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

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

function createSpecialButton() {
  const radius = 7;
  return <button radius={radius}>Click Me!</button>
}

function profileButton() {
  const radius = 10;
  return <button radius={radius}>Click Me!</button>
}

function registrationButton() {
  const radius = 16;
  return <button radius={radius}>Click Me!</button>
}

const profileButton = profileButton();
const registrationButton = registrationButton();
const button = createSpecialButton();

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

JavaScript のスコープの種類

グローバルスコープ

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

を使用して宣言をグローバル スコープに置くことができます。

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

<script>
  let username = "Garrett";
</script>

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

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

  window.username = "Garrett";

モジュールのスコープ

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

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

// user.ts

const name = "Garrett";

function greet() {
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

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

// user.ts

function greet() {
  const name = "Garrett";
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

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

// user.ts

export function greet(name: string) {
  console.log("Hello, ", name)
}

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

機能範囲

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

// user.ts

function greet() {
  const name = "Garrett";
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

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

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

ブロックスコープ

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

{
  let firstName = "Garrett";
  const lastName = "Love";
  var fullName = "Garrett Love";
  // firstName and lastName CAN be accessed here
  // fullName CAN be accessed here
}

// firstName and lastName CANNOT be accessed here
// fullName CAN STILL be accessed here

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

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

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

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

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