技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

4个示例解释何为JS闭包及何时使用闭包

作者:admin    时间:2022-6-6 17:37:53    浏览:

闭包是一个访问其词法范围的函数,甚至在其词法范围之外执行。

更简单地说,闭包是一个函数,它从定义它的地方记住变量,而不管它后来在哪里执行。在本文中,将通过多个示例介绍什么是闭包,及何时使用闭包。

JavaScript 闭包

在开始认识闭包之前,你得首先了解嵌套函数。

在 JavaScript 中,一个函数可以有一个或多个内部函数。这些嵌套函数在外部函数的范围内。内部函数可以访问外部函数的变量和参数。但是,外部函数不能访问内部函数内部定义的变量。

示例:嵌套函数

function OuterFunction() {

    var outerVariable = 1;

    function InnerFunction() {
        alert(outerVariable);
    }

    InnerFunction();
}

在上面的例子中,InnerFunction() 可以访问 outerVariable 这个变量。

闭包的定义

现在,根据上面的定义,InnerFunction() 可以访问 outerVariable 变量,即使它会单独执行。参看以下示例。

function OuterFunction() {

    var outerVariable = 100;

    function InnerFunction() {
        alert(outerVariable);
    }

    return InnerFunction;
}
var innerFunc = OuterFunction();

innerFunc(); // 100

demodownload

在上面的示例中,return InnerFunction; 当你调用 OuterFunction() 时,从 OuterFunction 返回 InnerFunction。变量innerFunc 仅引用 InnerFunction(),而不引用 OuterFunction()。所以现在,当你调用 innerFunc() 时,它仍然可以访问outerVariableOuterFunction() 中声明的内容,这称为闭包。

闭包:内部函数会更改外部变量的值

一个函数可以在 JavaScript 中返回另一个函数,分配给变量的函数称为函数表达式。

闭包的一个重要特征是外部变量可以在多次调用之间保持其状态。请记住,内部函数不会保留外部变量的单独副本,而是引用外部变量,这意味着外部变量的值将会改变,如果你使用内部函数更改它。示例:

function Counter() {
    var counter = 0;

    function IncreaseCounter() {
        return counter += 1;
    };

    return IncreaseCounter;
}

var counter = Counter();
alert(counter()); // 1
alert(counter()); // 2
alert(counter()); // 3
alert(counter()); // 4

demodownload

在上面的例子中,外部函数Counter返回内部函数IncreaseCounter()的引用。increaseCounter 将外部变量 counter 增加到 1。所以多次调用内部函数会使计数器每次增加一个。

闭包:在多层内部函数中有效

闭包在多层内部函数中是有效的。示例:

function Counter() {
    
    var counter = 0;

    setTimeout( function () {
        var innerCounter = 0;
        counter += 1;
        alert("counter = " + counter);

        setTimeout( function () {
            counter += 1;
            innerCounter += 1;
            alert("counter = " + counter + ", innerCounter = " + innerCounter)
        }, 500);

    }, 1000);
};

Counter();

demodownload

根据闭包的定义,如果内部函数访问外部函数的变量,那么只有它被称为闭包。

不是闭包的示例:

var Counter = (function () {
        var i = 0;
        return { counter : i += 1 };
})();

何时使用闭包?

闭包对于隐藏 JavaScript 中的实现细节很有用。换句话说,创建私有变量或函数可能很有用。

以下示例显示了如何创建私有函数和变量:

var counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  };   
})();

alert(counter.value()); // 0
counter.increment();
counter.increment();
alert(counter.value()); // 2
counter.decrement();
alert(counter.value()); // 1

demodownload

在上面的示例中,increment()decrement()value() 成为公共函数,因为它们包含在返回对象中,而 changeBy() 函数成为私有函数,因为它不返回并且仅在内部使用increment()decrement()

总结

本文通过多个示例,介绍了什么是闭包,以及何时使用闭包。通过本文的学习,你应该记住了闭包的一些重要特性,懂得判断一些函数是不是闭包,不具备闭包特性的函数就不能称之为闭包。

相关文章

标签: 闭包  
x
  • 站长推荐
/* 左侧显示文章内容目录 */