JSスコープとクロージャコアインタビューの質問

可変プロモーションの理解について話す
- JavaScriptでは、関数と変数の宣言は関数の先頭にプロモートされます。
- JavaScriptでは、変数は使用後に宣言できます。つまり、変数を最初に使用してから宣言できます。
これのいくつかの異なる使用シナリオを説明する
- 最初のケース：これはグローバルに
```
function fn1 (){
        
        
　　return this
}
console.log(fn1())  //window
```
  注：「厳密に使用」これは、厳密モードでは定義されていません
- 2番目のケース：コンストラクター
  - 関数がコンストラクターとして呼び出されると、これは新しいオブジェクトを表します。
  - newを使用せずに関数を直接呼び出す場合、this === window;
  - コンストラクターのプロトタイプだけでなく、プロトタイプチェーン全体でも、これは現在のオブジェクトの値を表します。
```
function Foo (name){
          
          
　　this.name = name ;
　　console.log(this)
}

var foo = new Foo('Emma');  //Foo {name: "Emma"} 
Foo() //window
```
- 3番目のケース：オブジェクトの属性として機能する
  - 関数がオブジェクトの属性として呼び出されると、これはオブジェクトを指します。
  - オブジェクトの属性としての関数は、呼び出す別の変数に割り当てられます。this=== window
```
var obj = {
          
          
　　x :10,
　　fn:function(){
          
          
　　　　console.log(this)
　　}
}

obj.fn()   //当前对象
var newFn = obj.fn;  newFn() //window
```
- 4番目のケース：関数がapply（）call（）bind（）で呼び出されると、オブジェクトが渡されます
```
function fn() {
        
        
    console.log(this)
}
fn()  // window
fn.call({
        
        a:100})  // {a:100}  和 call 同理的还有 apply bind
```

10個の<a>ラベルを作成します。クリックすると、対応するシリアル番号がポップアップ表示されます

var i
for (i = 0; i < 10; i++) {
      
      
    (function (i) {
      
      
        var a = document.createElement('a')
        a.innerHTML = i + '<br>'
        a.addEventListener('click', function (e) {
      
      
            e.preventDefault()
            alert(i)
        })
        document.body.appendChild(a)
    })(i)
}

スコープを理解する方法
- 「JavaScriptDefinitiveGuide」では、スコープは次のように説明されています。
  - 変数スコープ：変数のスコープは、変数が定義されているプログラムソースコード内の領域です。
- 「あなたが知らないJavascript、第1巻」のスコープの説明は次のとおりです。
  - すべてのライフの識別子（変数）で構成される一連のクエリを収集および維持し、これらの識別子に対する現在実行中のコードのアクセス権を決定するための非常に厳格なルールセットを実装する責任があります。
- 簡単に言えば、スコープは変数アクセスルールの有効なスコープです。
  - スコープ外では、スコープ内の変数を参照できません。
  - スコープを離れると、関数の実行やブラウザの終了など、スコープ変数のメモリスペースがクリアされます。
  - スコープと実行コンテキストは、2つのまったく異なる概念です。私は一度それらを混乱させましたが、私たちはそれらを注意深く区別しなければなりません。

実際の開発におけるクロージャーアプリケーション

実際のアプリケーションでは、クロージャは主に変数をカプセル化し、権限を収束するために使用されます

function isFirstLoad() {
        
        
    var _list = [];
    return function(id) {
        
        
        if(_list.indexOf(id) >= 0){
        
        
            return false;
        } else {
        
        
            _list.push(id);
            return true;
        }
    }
}

// 使用
var firstLoad = isfirstLoad()
firstLoad(10)  // true
firstLoad(10)  // false
firstLoad(20)  // true

JSスコープとクロージャコアインタビューの質問

4番目のケース：関数がapply（）call（）bind（）で呼び出されると、オブジェクトが渡されます

おすすめ