クロージャー - JavaScript

Susan Sarandon
リリース: 2024-11-11 04:57:02
オリジナル
785 人が閲覧しました

Closures - Javascript

ご存知ですか? JavaScript では、すべての関数は当然ながらクロージャです (1 つだけ例外があります)。実際に、これがどのように機能するかを理解してみましょう。

クロージャーは、字句参照とともにバンドルされた関数です。これが正式な定義ですが、クロージャとは実際には何を意味するのでしょうか?クロージャに入る前に、第一級関数を理解することは、クロージャがどのように機能するかを理解するのに役立つ基礎知識を提供するため有益です。

最初に知っておくべき重要な概念:

1.第一級関数: 変数に代入でき、引数として渡され、関数から返される関数。
2.関数スコープ: 関数は、独自のスコープと周囲 (外部) スコープから変数にアクセスできます。
3.実行コンテキスト: 関数が呼び出されるたびに、新しい実行コンテキストが作成されます。これには、変数環境とスコープ チェーンが含まれます。

一般に、関数内で作成された変数はその関数にスコープされ、関数の実行が完了するとすぐに破棄されます。たとえば、premiumContentAccess という 2 つの変数、articlesAllowedToAccesscurrentlyAccessed.
を含む関数について考えてみましょう。

function premiumContentAccess() {
  let articlesAllowedToAccess = 3;
  let currentlyAccessed = 0;
}

premiumContentAccess();
ログイン後にコピー

premiumContentAccess が実行されると、ローカル変数 articlesAllowedToAccesscurrentlyAccessed が作成されます。関数の実行が完了すると、これらの変数はスコープ外になり、ガベージ コレクションの対象になります。つまり、事実上破棄され、その後はアクセスできなくなります。

premiumContentAccess の実行後でも、これらの変数へのアクセスを保持することは可能ですか?これで終わります。

クロージャとは何ですか?

クロージャは、周囲の (外部) 変数にアクセスできる関数が返されたときに形成されます。これらの変数参照は関数と一緒にバンドルされているため、永続化できます。

function premiumContentAccess() {
  let articlesAllowedToAccess = 3;
  let currentlyAccessed = 0;  

  function accessArticle() {
    if (currentlyAccessed >= articlesAllowedToAccess) {
      return 'Premium Article Access Reached';
    }
    currentlyAccessed++;
    return 'Article accessed';
  }
  return accessArticle;
}

let accessArticle = premiumContentAccess();

console.log(accessArticle()); // Outputs: Article accessed
console.log(accessArticle()); // Outputs: Article accessed
console.log(accessArticle()); // Outputs: Article accessed
console.log(accessArticle()); // Outputs: Premium Article Access Reached
ログイン後にコピー

例の内訳

1.外部関数: premiumContentAccess() は、変数 articlesAllowedToAccess および currentlyAccessed を定義する外部関数です。
2.内部関数: accessArticle は、外部関数で定義された字句スコープから変数にアクセスする内部関数です。
3.クロージャ: premiumContentAccess() が呼び出されると、変数 articlesAllowedToAccess および currentlyAccessed へのアクセスを保持する accessArticle 関数が返されます。外部関数が終了した後でも実行中です。
4.状態保持: クロージャにより、accessArticle はアクセスされた記事の数に関する独自の状態を維持できます。 accessArticle を呼び出すたびに、currentlyAccessed が変更されます。これは、閉鎖により保持されます。

すべての関数はクロージャです:

最初に述べたように、すべての関数は当然ながらクロージャです。

つまり、非表示の [[Environment]] プロパティを通じて作成コンテキストへの参照が自動的に保持され、コードが外部変数にアクセスできるようになります。

例外: 新しい Function コンストラクターを使用して作成された関数は、[[Environment]] を作成コンテキストではなくグローバル コンテキストに設定します。


読んでいただきありがとうございます!このブログが有益で魅力的であると感じていただければ幸いです。不正確な点に気づいた場合、またはフィードバックがある場合は、遠慮なくお知らせください。

以上がクロージャー - JavaScriptの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート