フロントエンド開発が知っておくべきJSクロージャとアプリケーション_JavaScriptスキル

「フロントエンド開発者が知っておくべき JS プロトタイプと継承」の記事で、クロージャに関する記事を書くと書きましたが、最近、クロージャ アプリケーションの機能を強化する必要があることに気づいたので、この記事を延期することはできません。もっと長く。この記事では関数クロージャについて説明しており、オブジェクト クロージャ (with の使用など) については説明しません。私の言ったことは間違っていると思われる場合は、お気軽にコメントしてアドバイスをください。
1. クロージャの理論
まず、次の概念を理解する必要があります。

実行環境
関数が呼び出されるたび (関数が呼び出されるとき)が実行されると)、システムは関数の閉じられたローカル実行環境、つまり関数の実行環境を作成します。関数は、ローカル変数、関数パラメータの読み書き、内部ロジックの実行など、常に独自の実行環境で実行されます。実行環境を作成するプロセスには関数のスコープの作成が含まれており、関数も独自のスコープ内で実行されます。別の観点から見ると、各関数実行環境にはスコープ チェーンがあり、子関数のスコープ チェーンには親関数のスコープ チェーンが含まれます。スコープとスコープチェーンについては以下を参照してください。

スコープ、スコープチェーン、呼び出しオブジェクト
関数スコープは字句スコープと動的スコープに分かれています。
レキシカルスコープは関数定義時のスコープ、つまり静的スコープです。関数が定義されると、その字句範囲が決定され、関数構造の入れ子関係に基づいて関数の範囲が記述されます。このとき、関数のスコープチェーンが形成されます。スコープ チェーンは、これらのスコープをネストされた階層関係で接続します。関数の内部 [[scope]] 属性は、このスコープ チェーンを指します。
動的スコープとは、関数呼び出しが実行されるときのスコープです。関数が呼び出されるとき、関数内の [[scope]] 属性は最初に関数のスコープ チェーンを指し、次に呼び出しオブジェクトが作成され、呼び出しオブジェクトは関数パラメーターとローカル変数を記録するために使用されます。関数を作成し、ドメイン チェーンの先頭に置きます。動的スコープは、呼び出し元のオブジェクトをスコープ チェーンの先頭に追加することによって作成されます。このとき、[[scope]] は定義時にスコープ チェーンを持つだけでなく、呼び出し時に呼び出し元のオブジェクトも作成されます。つまり、実行環境のスコープは、関数の定義時に決定されたスコープ チェーンに、関数によって作成されたばかりの呼び出しオブジェクトを加えたものと等しく、新しいスコープ チェーンが形成されます。したがって、これは動的スコープであり、スコープ チェーンもそれに応じて変化します。ここでスコープを見ると、実際にはオブジェクト チェーンです。これらのオブジェクトは、関数が呼び出されたときに作成される呼び出しオブジェクトと、その上の最上位のグローバル オブジェクトまでの呼び出しオブジェクトです。
たとえば、グローバル環境の関数 A に関数 B がネストされている場合、関数 B のスコープ チェーンは、関数 B のスコープ -> 関数 A のスコープ -> グローバル ウィンドウのスコープになります。 。関数Bが呼び出された場合、識別子を探す際には、関数Bのスコープ→関数Aのスコープ→グローバルウィンドウのスコープに従って検索されます。実際には、呼び出しに従って検索されます。関数Bのオブジェクト→関数Aの呼び出しオブジェクト→グローバルオブジェクトの順で検索されます。つまり、関数が呼び出されるとき、関数のスコープ チェーンは実際には呼び出し元のオブジェクト チェーンになります。

クロージャ
動的実行環境では、データはリアルタイムで変化します。これらの非永続変数の値を維持するために、これらの動的データを格納するキャリアとしてクロージャを使用します。以下の文を当てはめるとよく理解できるでしょう）。クロージャの定義: いわゆる「クロージャ」とは、多くの変数とこれらの変数にバインドされた環境を持つ式 (通常は関数) を指します。つまり、これらの変数も式の一部です。
クロージャは関数内にネストされた内部関数であり、内部関数はすべてのローカル変数、パラメータ、および外部関数で宣言された他の内部関数にアクセスできます。内部関数が外部関数の外部で呼び出される場合、クロージャが生成されます。 (実際には、どの関数もグローバルスコープの内部関数であり、グローバル変数にアクセスできるので、ウィンドウのクロージャになります)
例えば、以下の例:

コードをコピー コードは次のとおりです。

コードは次のとおりです:

同理，也可以用这种思想实现自增长的ID。　　

复制代码 代码如下:

应用4：
　　这个是无忧上月MM的例子（点击这里查看原帖），用闭包实现程序的暂停执行功能，还蛮创意的。

<input type="button" value="继续" onclick="st();"> <script type="text/javascript"><!-- var st = (function() { alert(1); alert(2); return function() { alert(3); alert(4); } })(); // --></script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

把这个作用延伸下，我想到了用他来实现window.confirm。

<title></title> <script type="text/javascript"> var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id; } var doConfirm = function(divId) { $(divId).style.display = ""; function closeDiv() { $(divId).style.display = "none"; } return function(isOk) { if (isOk) { alert("Do deleting..."); } closeDiv(); } } </script> <style type="text/css"> body { font-family: Arial; font-size: 13px; background-color: #FFFFFF; } #confirmDiv { width: 200px; height: 100px; border: dashed 1px black; position: absolute; left: 200px; top: 150px; } </style> <div> <input name="btn2" type="button" value="删除" onclick="doConfirm('confirmDiv');"> <div id="confirmDiv" style="display: none;"> <div style="position: absolute; left: 50px; top: 15px;"> <p> 你确定要删除吗?</p> <input type="button" value="确定" onclick="doConfirm('confirmDiv')(true);"> <input type="button" value="取消" onclick="doConfirm('confirmDiv')(false);"> </div> </div> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

看了上面的这些应用，再回到前面的一句话：在动态执行环境中，数据实时地发生变化，为了保持这些非持久型变量的值，我们用闭包这种载体来存储这些动态数据。这就是闭包的作用。也就说遇到需要存储动态变化的数据或将被回收的数据时，我们可以通过外面再包裹一层函数形成闭包来解决。
　　当然，闭包会导致很多外部函数的调用对象不能释放，滥用闭包会使得内存泄露，所以在频繁生成闭包的情景下我们要估计下他带来的副作用。
　　毕了。希望能对大家有所帮助。
者：JayChow
出处：http://ljchow.cnblogs.com