数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学JavaScript闭包的实际应用？
在JavaScript中，闭包是一个环境，它帮助我们从内部函数访问外部函数的作用域。在JavaScript中，当创建一个函数时，闭包也会被创建。换句话说，闭包是一种允许存在于外部函数内部的函数访问外部函数作用域的方式。在本文中，我们将重点介绍JavaScript中闭包的一些实际应用。
语法
function outerFunction(){
<initialize property>
function updateProperty(){
<update previously initialized property>
}
return updateProperty()
}
语法很简单。闭包只对嵌套函数有效。外部函数将包含其他变量和属性，这些变量和属性将由内部函数更新。请注意，这些变量不像全局变量，它们专门属于外部函数体。
JavaScript中闭包的使用
考虑一个简单的例子，我们试图实现一个计数器应用程序。因此，当用户执行某些操作时，计数器将一个一个地增加。我们可以通过如下函数实现：
let activity_counter = 0; //a global variable function new_activity() { // function to update the counter value activity_counter++; }
在上面的例子中，全局变量activity_counter初始化为0，并创建一个函数来将activity_counter的值增加一。这可能是一个解决方案，但主要问题是全局计数器变量。这个全局变量可以被其他用户或脚本更改。这在我们的应用程序中是不希望的。
我们可以使用闭包来解决这个问题。在下面的代码片段中，外部函数：activityCounterClosure()最初创建一个名为new_activity()的函数，该函数增加计数器并从外部函数返回。这段代码的妙处在于，现在acc对象存储了增加计数器的函数，并且由于计数器变量不是全局的，因此无法从其他地方访问它。
function activityCounterClosure() { //outer function to implement closure let activity_counter = 0; //property which will be updated through the returned functions function new_activity() { activity_counter++; } return new_activity; } let acc = activityCounterClosure(); acc();
示例
上面的代码可以稍微修改一下，如下所示：
<!DOCTYPE html> <html> <head> <title>HTML Console</title> </head> <body> <h3>Output Console</h3> <p>Output:</p> <div id="output"></div> <div id="opError" style="color : #ff0000"></div> <script> var content = '' var error = '' var opDiv = document.querySelector('#output') var opErrDiv = document.querySelector('#opError') // actual javascript code try { function activityCounterClosure() { //outer function to create the closure let activity_counter = 0; function new_activity() { //function to increase the counter value activity_counter++; } function getCurrentCount() { //function to get current counter value return activity_counter; } return { new_activity: new_activity, getCurrentCount: getCurrentCount, }; } let { new_activity, getCurrentCount } = activityCounterClosure(); new_activity(); content += "Current Count value: " + JSON.stringify(getCurrentCount()) + '<br>'new_activity(); content += "Current Count value (next call): " + JSON.stringify(getCurrentCount()) + '<br>' } catch (err) { error += err } finally { // display on output console opDiv.innerHTML = content opErrDiv.innerHTML = error } </script> </body> </html>
外部函数返回两个函数，一个用于增加计数器，另一个用于获取当前计数器的值。
JavaScript与HTML结合使用闭包
在这里，我们将看到另一个例子，点击按钮将创建一个新的html块。html内容将借助JavaScript中的闭包属性创建。让我们看看下面的例子：
示例
<!DOCTYPE html> <html> <title>Online Javascript Editor</title> <head> </head> <body> <button onclick=addline()>Add a new line</button> </body> <script> function activityCounterClosure() { let activity_counter = 0; function new_activity() { activity_counter++; } function getCurrentCount() { return activity_counter; } return { new_activity : new_activity, getCurrentCount : getCurrentCount, }; } let {new_activity, getCurrentCount} = activityCounterClosure(); function createElement(startTag, endTag) { //return function which adds start and end part of an html document return function (innerHtml) { return `${startTag} ${innerHtml} ${endTag}`; }; } function addline() { // create div block, inside that insert paragraph with current button click value attached with it. new_activity(); var para = document.createElement('div') var blockEl = createElement('<p>', '</p>'); var block = blockEl("Current counter value:" + getCurrentCount()); para.innerHTML = block; document.body.appendChild(para); } </script> </html>
在这个例子中，有两个闭包函数。一个是增加计数，另一个是通过在段落标签(<p>)之间添加文本创建html组件。我们在按钮点击后调用这些函数。因此，当点击按钮时，会在段落(<p>)标签内生成一行。
结论
在Javascript中，闭包是一个非常有趣且重要的概念。闭包允许从内部函数直接访问外部函数的作用域。它有很多应用。在本文中，我们同时介绍了一个基于纯JavaScript的场景和另一个结合了HTML和JavaScript的场景。使用闭包的一个优点是，它不像全局变量声明那样，因此实际值无法从其他块更改。
631 次浏览
