jsにおけるクロージャの定義は何ですか? jsクロージャの応用シナリオ-jsチュートリアル-php.cn

jsにおけるクロージャの定義は何ですか? jsクロージャの応用シナリオ

不言

リリース： 2018-09-10 17:29:05

オリジナル

2887 人が閲覧しました

この記事でわかるのは、JS におけるクロージャの定義とは何ですか? js クロージャのアプリケーションシナリオには一定の参考値があります。必要な方は参考にしていただければ幸いです。

クロージャとは何ですか?

クロージャは、別の関数のスコープ内の変数にアクセスできる関数です。

function createFunc() {
    var name = "wheeler";
    return function () {
        return name;
    }
}

var nameFunc = createFunc();  // nameFunc是一个闭包

var name = nameFunc();

console.log(name);

// 解除对匿名函数的应用（以便释放内存）
nameFunc=null;

ログイン後にコピー

内部関数は外部関数の変数名にアクセスできます
内部関数のスコープには外部関数のスコープが含まれます

(クロージャーはそれを含む関数のスコープを保持するため、占有量が多すぎる可能性があります)クロージャ)

ブロックレベルのスコープを模倣することで、クロージャによる過剰なメモリ使用量を減らすことができます

// 块级作用域（通常称为私有作用域）的匿名函数的语法
(function(){
    // 块级作用域
})();

ログイン後にコピー

ブロックレベルのスコープでクロージャを定義します

// 可以减少闭包占用的内存问题，因为没有指向匿名函数的引用。只要函数执行毕，就可以立即销毁其作用域链了
(function(){
    function createFunc() {
        var name = "wheeler";
        return function () {
            return name;
        }
    }

    var nameFunc = createFunc();

    var name = nameFunc();

    console.log(name);
})();

ログイン後にコピー

クロージャのアプリケーションシナリオ

クロージャを使用して、プライベートメソッドをシミュレートする

var returnNum = (function () {
    var num = 0;

    function changeNum(value) {
        num = value;
    }

    return {
        add: function () {
            changeNum(10);
        },
        delete: function () {
            changeNum(-10);
        },
        getNum: function () {
            return num;
        }
    }
})();

// 闭包
console.log(returnNum.getNum());
returnNum.add();
console.log(returnNum.getNum());
returnNum.delete();
console.log(returnNum.getNum());

ログイン後にコピー

キャッシュ

var CacheCount = (function () {
    var cache = {};
    return {
        getCache: function (key) {
            if (key in cache) {// 如果结果在缓存中
                return cache[key];// 直接返回缓存中的对象
            }
            var newValue = getNewValue(key); // 外部方法，获取缓存
            cache[key] = newValue;// 更新缓存
            return newValue;
        }
    };
})();

console.log(CacheCount.getCache("key1"));

ログイン後にコピー

カプセル化

var person = function(){
    var name = "default";//变量作用域为函数内部，外部无法访问
    return {
        getName : function(){
            return name;
        },
        setName : function(newName){
            name = newName;
        }
    }
}();

console.log(person.name);// undefined
console.log(person.getName());
person.setName("wheeler");
console.log(person.getName());

ログイン後にコピー

setTimeout

function func(param) {
    return function() {
        console.log(param);
    }
}
var myFunc = func('wheeler');
setTimeout(myFunc, 1000);

ログイン後にコピー

関数内の変数を保護します。

変数をメモリ内に維持します。