JavaScriptクロージャの詳細な説明とケース

1.可変スコープ

関数内でグローバル変数を使用できます
関数の外部でローカル変数を使用することはできません
関数が実行されると、このスコープ内のローカル変数は破棄されます

2.閉鎖

クロージャ：別の関数のスコープ内の変数にアクセスできる関数（変数が配置されている関数はクロージャ関数であり、クロージャは典型的な高階関数です）
クロージャの役割：変数のスコープを拡張する

//方法一
function fn() {
            var num = 10;
            return function() {
                console.log(num);
            }
}
var f = fn();
f();  //10

//方法二
function fn() {
            var num = 10;
            function fn1() {
                console.log(num);
            }
            return fn1();
}
fn();  //10

3.ケース

ケース1：各料理をクリックすると、対応するインデックス番号が印刷されます

<body>
    <ul class="nav">
        <li>红烧茄子</li>
        <li>凉拌海带丝</li>
        <li>泡椒风爪</li>
        <li>韩式烤肉</li>
    </ul>
    <script>
        //点击每一道菜会打印出索引号
        //方法1.利用动态添加属性的方法(传统方法)
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].index = i;
            lis[i].onclick = function() {
                alert(this.index);
            }
        }
        //方法2.利用闭包的方法
        for (var i = 0; i < lis.length; i++) {
            (function(i) {
                lis[i].onclick = function() {
                    console.log(i);

                }
            })(i); //立即执行函数最后一个小括号用来传递参数，第一个小括号用来接收参数
        }
    </script>
</body>

ケース2：3秒後にすべてのli要素のコンテンツを印刷する

<body>
    <ul class="nav">
        <li>红烧茄子</li>
        <li>凉拌海带丝</li>
        <li>泡椒风爪</li>
        <li>韩式烤肉</li>
    </ul>
    <script>
        //3秒钟之后打印所有li元素的内容
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            (function(i) {
                setTimeout(function() {
                    console.log(lis[i].innerHTML);

                }, 3000)

            })(i);
        }
    </script>
</body>

ケース3：タクシー料金を計算します（3 km以内のタクシーの開始価格は13で、追加の1 kmは5元を超えます。混雑している場合、ユーザーはキロメートル数を入力してタクシー料金を計算できます。合計金額は10元以上になります）

var car = (function() {
        var start = 13;
        var total = 0;
        return {
                price: function(n) {
                    if (n <= 3) {
                        total = start;
                    } else {
                        total = (n - 3) * 5 + start;
                    }
                    return total;
                },
                jam: function(n) {
                    if (n = 0) {
                        return total = total;
                    } else {
                        return total = total + 10;
                    }
                }
      };
})();
car.price(5);
var money = car.jam(1);
console.log(money);

4.考える

次のコードの戻り値

var name = 'The Window';
        var object = {
            name: "My Object",
            getNameFunc: function() {
                that = this;
                return function() {
                    return that.name;
                };
            }
        };
console.log(object.getNameFunc()());  //My Object

次のコードの戻り値

var name = 'The Window';
        var object = {
            name: "My Object",
            getNameFunc: function() {
                return function() {
                    return this.name;
                };
            }
        };
console.log(object.getNameFunc()());  //The Window

あなたはそれを正しく理解しましたか？

JavaScriptクロージャの詳細な説明とケース

JavaScriptクロージャの詳細な説明とケース

おすすめ