JavaScript スコープチェーンの基本原理のグラフィカルな説明

序文

JavaScript を学ぶとき、外部空間から内部変数にアクセスできないことは誰もが知っておく必要があります。私たちはこの基本的なルールしか知らないことが多いのですが、この基本的なルールを実装するための基本的な原則は何でしょうか。今日は、白人の視点からスコープ チェーンを理解する方法をお見せし、皆さんのお役に立てればと思います。

範囲

1. スコープとは何ですか?

簡単に言えば、スコープとは、名前で変数を検索するための一連のルールです。スコープは、一般的に閉じた空間として理解できます。この空間は閉じられており、外部に影響を与えません。外部空間は内部空間にアクセスできませんが、内部空間はそれをラップする外部空間にアクセスできます。

2. [[スコープ]] プロパティ

JavaScript では、各関数はオブジェクトです。オブジェクトの一部のプロパティにはアクセスできますが、一部のプロパティには自由にアクセスできません。[[Scopes]] プロパティはその 1 つです。このプロパティは、JavaScript エンジンによってのみ読み取ることができます。

実際、[[scope]] はスコープと呼ばれることが多く、スコープ ランタイムのコンテキスト コレクションを格納します。

ここでは、func.prototype.constructorとfuncは同じ関数を指しているので、関数funcのプロトタイプオブジェクトにアクセスして[[Scopes]]プロパティを表示します。

3. スコープチェーン

[[scope]] に格納されている実行コンテキスト オブジェクトのコレクションは相互にリンクされており、このチェーン接続をスコープ チェーンと呼びます。 JavaScript はスコープ チェーンを通じて変数を検索し、スコープ チェーンの上から下に向かって検索します (オブジェクトが検索される関数のスコープ チェーンが検索されます)。

4. 変数を見つける原理の図解

//次のコードを例として、スコープチェーンを通じて変数を検索する JavaScript の原理を説明します**
関数a() {
  関数b() {
  //ここで示したbの元の値は234でしたが、コメント欄で次の数字が123と書かれていることに気づいたので、bの値を123に変更しました。
      var b = 123;
  }
  var a = 123;
  関数b();
}
var glob = 100;

1. グローバル関数a()が定義されると、スコープチェーンは次のようになります。

関数の [[Scopes]] プロパティは、スコープ チェーン オブジェクトを指します。この時点で、スコープ チェーンには、グローバル オブジェクトを指すキーと値のペアが 1 つだけあります。グローバル オブジェクトには、グローバルにアクセスできるもの、つまり、誰でもアクセスできる最も外側のスコープが格納されます。

2. グローバル関数a()がアクティブ化されて呼び出されると、スコープチェーンは次のようになります。

このとき、スコープ チェーンが最初にアクセスできるのは、アクティベーション オブジェクト内のキーと値のペアです。キーと値のペアがない場合は、グローバル オブジェクトにアクセスします。

3. 関数bが関数a()内で定義されている場合、bのスコープチェーンは次のようになります。

b が定義されているだけで呼び出されていない場合、b のスコープ チェーンは a のスコープ チェーンと同じになります。

4. 関数a()内の関数bがアクティブ化されて呼び出されると、スコープチェーンは次のようになります。

スコープ チェーンは、最初に関数 b() のアクティベーション オブジェクトを指します。変数の検索もスコープ チェーンの順序でアクセスされ、変数が見つかると停止します。

要約する

外側のスコープが内側のスコープにアクセスできない理由は、外側のスコープのスコープ チェーンに内側のスコープのアクティベーション オブジェクトがないため、内部変数にアクセスできないためです。内側のスコープが変数にアクセスする順序は、スコープ チェーンに従います。最初に内部を調べ、見つからない場合は、アプリケーション スコープ チェーンに沿って外側を調べます。外側のスコープはグローバル スコープです。

JavaScript スコープ チェーンの基本原理に関するこの記事はこれで終わりです。JavaScript スコープ チェーンに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。