1. 定義

クロージャとは、他の関数の内部変数を読み込める関数のことですが、Javascript言語では、関数内のサブ関数のみがローカル変数を読み込めるため、クロージャは「関数内で定義された関数」と簡単に理解できます。したがって、本質的に、クロージャーは関数の内部と関数の外部をつなぐブリッジです。

クロージャの使用:

関数の内部メンバーは、関数の外部で読み取ることができます

関数のメンバーが常にメモリ内に存在するようにする

2.原則

実はjsのスコープ機構には、永続的なスコープ、つまりウィンドウのグローバルスコープがあります.ブラウザのウィンドウを閉じない限りグローバルスコープは破棄されません.このウィンドウのグローバルスコープは永続的です. . グローバルスコープで関数を定義すると、何度呼び出されても、これらの呼び出しは同じグローバル変数を共有して操作できます。

ただし、ローカルスコープはそうではなく、関数が呼び出されたときにのみ有効であり、関数呼び出しが完了すると、ローカルスコープは閉じられます。つまり、ローカル変数は無効になります。そのため、グローバルスコープでローカル変数を取得することはできず、他のスコープでローカル変数を取得することもできません。

しかし、クロージャは異なり、メモリ内に常に存在するWindows のグローバルスコープのように、その親関数のスコープを永続的にすることができます。これは閉鎖の性質でもあります。ローカル変数をロックすることは、クラスで説明したクロージャの 2 番目の関数でもあります。

クロージャー関数が呼び出されると、動的に独自のスコープが開かれます. その上に親関数の永久スコープがあり、親関数のスコープの上に window の永久グローバルスコープがあります. クロージャー関数が呼び出された後、それ自体のスコープは閉じられてメモリから消えますが、親関数の永遠のスコープと window の永遠のスコープはメモリ上でまだ開いています。クロージャー関数が再度呼び出されると、引き続きこれら 2 つのスコープにアクセスでき、前回呼び出されたときに生成されたデータを保存することもできます。クロージャー関数の参照が解放されたときにのみ、その親スコープが最終的に閉じられます (もちろん、親関数は複数のクロージャー関数を作成することができ、すべてのクロージャー関数が解放された後に親関数のスコープが閉じられます。 )

以下のケースが挙げられます

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>闭包</title>
</head>
<body>
  
</body>
<script>
 var num = 100
 function demo1(){
  var str = 'web前端'
  console.log(str);
  console.log(num);
 }
 demo1()
//  console.log(str);
 function demo2(){
  console.log(num);
  console.log(str);
 }
 demo2()
 /* 
    一、闭包：定义在一个函数内部的函数
    二、闭包的本质：让父函数作用域当做永恒作用域
    三、闭包的作用：
          1、可以读取父函数内部的变量
          2、可以锁住父函数内部的变量
 */
</script>
<script>
  
  function outer(){
    var parent = 20;
    function inner(){
      // var child = 30
      // console.log(child);
      console.log(parent);
    }
    inner()
  }
  outer()
</script>
<script>
  /* 
      闭包题的考点：闭包、作用域链的查找规则、预解析、this指向
  */
 var name = 'this window';
 var that =this;
 var object = {
  name:'this object',
  getName:function(){
    // var name = "this getName"
    console.log(this.name);
    console.log(name);
    var name = "this getName"
   /*  function name(){
      console.log(name);
    }
    name() */
    var name1 =function(){
      console.log(name);
      console.log(this.name);
    }.bind(this)
    name1()
    // console.log(name);
    return function(){
      console.log(name);
      console.log(this.name);
    }.bind(that)
    console.log(name);// 不打印
  }
 }
 object.getName()()
</script>
</html>

グローバルスコープ --> グローバル変数 --> どのスコープでも有効:: ブラウザを開いたときに作成され、ブラウザを閉じたときに破棄される

ローカルスコープ (関数) --> ローカル変数 --> 現在のスコープで有効 : : 関数が呼び出されると作成され、呼び出しが完了すると破棄されます

js の高度な - 閉鎖

1. 定義

2.原則

おすすめ