ホームページ  >  記事  >  ウェブフロントエンド  >  jsにおけるクロージャの定義は何ですか? jsクロージャの応用シナリオ

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

不言
不言オリジナル
2018-09-10 17:29:052871ブラウズ

この記事でわかるのは、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);
        • 関数内の変数を保護します。
        • 変数をメモリ内に維持します。
        • 関連する推奨事項:

          js クロージャとは何ですか? js クロージャを理解する (コード付き)

          js クロージャとは何ですか? jsクロージャを理解する

          🎜

          以上がjsにおけるクロージャの定義は何ですか? jsクロージャの応用シナリオの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

          声明:
          この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。