Achievement Goals

によって開示された定義および特徴を理解することができる.

Closureを使用すると、外部関数の変数にアクセスできます.

Closeのいくつかの有用な符号化モード

を理解することができる.

入る前に。

正式にモジュールに入る前に、必要なコンセプトチェックを行います!

正解:innerfnがアクセスできるscopeには、「innerfn、outerfn、グローバル」が3つあります.

今、これをもとに、次の問題を解きましょう.


「

正解:1.」outer' 'inner' 2. 「実行されていないinnerfn 3」inner'

JSの特徴の一つは,関数そのものを返すことである.また、これが可能なので、「シャーシ」という概念を使うことができます.

Closerとは?

閉じたスペースにアクセスできる関数を指します.要するに、外部関数にアクセスできる内部関数です.

一目瞭然で、新しい概念ではありません.これはスコフの法則の一つにすぎず、ここではCloserと名付けられたそうです.
しかし、あるものに用語をつけるのは理由があるのではないでしょうか.
だからこそ、このパターンはよく使われていて、役に立ちます.

エンクロージャの可用性

- 1. カードリング

要約すると、外部関数の変数は、内部関数の継続的な使用に伴って再利用可能なスタンプ関数のように使用できることが特徴です.
上記の例から、add 100ではx値が固定され、y値のみが置換され続けることがわかる.これにより,関数の再利用が可能となる.
コリンのもう一つの例を見て!!

HTMLを作成するときに、x値に希望するタグ値を設定し、y値にタグに追加したい単語だけを追加すると、複数の関数を宣言することなく、非常に簡単なタグマシンを作成できます.すなわち,1つの関数は多くのことを行う再利用性を向上させることができる.
しかし、一つ疑問があります.

Q.内部関数が外部関数より長く生きている場合、外部関数の変数はどうなりますか？

let outer = function(){
 let a= 1; // 외부 함수에 존재하는 변수
 
    let inner = function(){
      let b = 5;
      let c = 6;
	  console.log( "더하기 전 a값은 ", a); // => 1
      a = a + b + c; 

      console.log(a); // => 12 상위 부모 변수에 접근할 수 있다.
    }
  return inner;
}
const innerFromOuter = outer(); // => 실행되지 않은 inner함수 반환
innerFromOuter(); //  => 12 

ちょっとおかしいです.
変数aはouter関数にのみ存在するため、return inner;になった瞬間、破壊されるはずですが、内関数でaを召喚できます.
すなわち、innerは、outerが戻った後もouterの変数aへのアクセス権を有する.
これは、関数が独自の関数を含むscopeにアクセスできるためです.したがって,a変数はメモリから解放されなかった.
=>それが理解できないなら、最初に出した質問をもう一度見てみましょう!
したがって、Closerとは、内部関数のみにアクセスできる閉じた空間の関数です.

- 2. モジュールモード

例ではprivateCounterは誰にも直接置き換えることはできません.しかし、間接的に内部関数に変換することができる.

-メリット1。重要な変数を直接変更しない

理解を深めるために、もう一つの例を見てみましょう!

person.年齢を30に変えた、person.ageを印刷すると、30が印刷されます.では、person.getAge( );出力の時も30だったはずなのに、なぜ15だったのでしょうか?
人間です.年齢と人.getAge()ターゲットが違うからです.
person.ageはグローバルからアクセスできないため、存在しません.グッチ、このように近づきたいなら、return{...}中で作るつまり、内部関数(=モジュール)を使用する必要があります.
言い換えれば、person.age = 30; やったときに初めてやったまた、letやconstが作成しない変数はグローバルオブジェクトにリンクされ、グローバル変数となります.だから最後の行はtrue
そして、person.getAge()はouterのvarageを取得します.内部関数でアクセスできるので...
=>これが非公開オブジェクトの作成です!!

-メリット2。誰もが独立したprivateCounterを持っていて、オブジェクトのように再利用することができます。

counter 1とcounter 2はそれぞれ独立したprivateCounter変数を有する.したがって、counter 1の変化はcounter 2に影響しません.
つまり、複数の関数を宣言する必要はなく、1つの関数だけでループできます.客体のようだ.
まとめ

ポイント

javascriptは、内部関数から独自の外部関数を含むscopeにアクセスできます.

の内部関数がまだ生きている場合、外部関数が破壊されると、外部関数の変数へのアクセス権は内部関数に限定されます.

のような閉じた空間にアクセスできる関数はCloserです.

エンクロージャの欠点

エンクロージャの欠点は、適切に使用しないと、パフォーマンスの問題やメモリの問題が発生する可能性があります.

パッケージ内の非公開変数は、いつクリーンアップする必要があるか分からないため、メモリの浪費を引き起こす可能性があります.プログラムの作成中にメモリの問題が発生した場合は、エンクロージャを確認します.

scope chainを遡る行為があるので、ちょっと遅いです.

-IFE(重要)

上記の例のコードでは、(function(){...})(); 構文のある関数.

この関数はIIFE(=インスタントコール関数式)と呼ばれます.モジュールモードとも呼ばれ、関数を宣言するとすぐに実行するのが特徴です.関数をfunction(){}と宣言するとともに()を加えることが直ちに実行される原理である.非公開変数のないJavaScriptで非公開変数機能を作成するため、多くのライブラリでこの構文が使用されています.(ライブラリは、開発者のみがアクセスできるプライベート領域とパブリック領域に分ける必要があります.プライベート領域がない場合は、誰でも任意にライブラリを変更できるため、必要です.)必ずこのパターンを覚えておきましょう!

資料の出所と参考資料

今日のTILは、CodeStatesで学んだ内容と、個人的に補習した内容を基にしています.
理解しても难しくない内容なのになぜ说明が难しいのか...
笑うだけでしょ~~
コンテキストとモジュールの実行
JavaScriptモジュール、わかりやすい
匿名関数とモジュールは通常一緒にあります