JavaScript中关闭的实际用法是什么？

2018-05-28 23:34:58

我正在努力将自己的头围绕在JavaScript关闭之上。

我通过返回一个内部函数来获取它，它将有权访问其直接父级中定义的任何变量。

这对我有用吗？也许我还没有完全理解它。我在网上看到的大多数例子都没有提供任何真实世界的代码，只是模糊的例子。

有人能告诉我一个真正的世界使用封闭？

例如，这是一个吗？

var warnUser = function (msg) {
    var calledCount = 0;
    return function() {
       calledCount++;
       alert(msg + 'nYou have been warned ' + calledCount + ' times.');
    };
};

var warnForTamper = warnUser('You can not tamper with our HTML.');
warnForTamper();
warnForTamper();

我已经使用闭包来执行如下操作：

a = (function () {
    var privatefunction = function () {
        alert('hello');
    }

    return {
        publicfunction : function () {
            privatefunction();
        }
    }
})();

正如你在那里可以看到的， a现在是一个对象，具有调用privatefunction的方法publicfunction （ a.publicfunction() ），该privatefunction只存在于闭包中。你不能叫privatefunction直接（即a.privatefunction()只是publicfunction()

它是一个简单的例子，但也许你可以看到它的用途？我们用这个来强制执行公共/私人方法。

假设你想要统计用户点击网页上的按钮的次数 。
为此，您正在触发onclick事件按钮上的函数来更新变量的计数

<button onclick="updateClickCount()">click me</button>

现在可以有许多方法，例如：

1）你可以使用一个全局变量和一个函数来增加计数器 ：

var counter = 0;

function updateClickCount() {
    ++counter;
    // do something with counter
}

但是， updateClickCount()是页面上的任何脚本都可以更改计数器，而无需调用updateClickCount() 。

2）现在，您可能正在考虑在函数内部声明变量：

function updateClickCount() {
    var counter = 0;
    ++counter;
    // do something with counter
}

但是，嘿！每次updateClickCount()函数时， 计数器都会再次被设置为1。

3）关于嵌套函数的思考？

嵌套函数可以访问“之上”的范围。
在这个例子中，内部函数updateClickCount()可以访问父函数countWrapper()的计数器变量

function countWrapper() {
    var counter = 0;
    function updateClickCount() {
    ++counter;
    // do something with counter
    }
    updateClickCount();    
    return counter; 
}

如果你可以从外部访问updateClickCount()函数，并且你还需要找到一种方法来每次只执行一次counter = 0 ，这可能解决了counter counter的困境。

4） 关闭营救！ （自我调用功能） ：

 var updateClickCount=(function(){
    var counter=0;

    return function(){
     ++counter;
     // do something with counter
    }
})();

自调用函数只运行一次。它将counter设置为零（0），并返回一个函数表达式。

这样updateClickCount就成为一个函数。 “精彩”部分是它可以访问父范围中的计数器。

这被称为JavaScript关闭 。它使得函数具有“私有”变量成为可能。

该counter受匿名函数范围的保护，只能使用add函数进行更改！

关闭的更生动的例子：

  <script>
    var updateClickCount=(function(){
    var counter=0;

    return function(){
    ++counter;
     document.getElementById("spnCount").innerHTML=counter;
    }
  })();
</script>

<html>
 <button onclick="updateClickCount()">click me</button>
  <div> you've clicked 
    <span id="spnCount"> 0 </span> times!
 </div>
</html>

你给的例子是一个很好的例子。闭包是一种抽象机制，可让您非常干净地分离问题。你的例子是从语义（错误报告API）中分离检测（计数调用）的情况。其他用途包括：

将参数化行为传递给算法（经典的高阶编程）：

function proximity_sort(arr, midpoint) {
    arr.sort(function(a, b) { a -= midpoint; b -= midpoint; return a*a - b*b; });
}

模拟面向对象编程：

function counter() {
    var a = 0;
    return {
        inc: function() { ++a; },
        dec: function() { --a; },
        get: function() { return a; },
        reset: function() { a = 0; }
    }
}

实现异国流量控制，如jQuery的事件处理和AJAX API。

链接地址: http://www.djcxy.com/p/151.html

上一篇: What is a practical use for a closure in JavaScript?

下一篇: Can someone explain it to me what closure is in real simple language ?