我正在尽最大努力理解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();
当前回答
在Mozilla开发者网络上有一个关于实用闭包的章节。
其他回答
我已经使用闭包做了如下的事情:
a = (function () {
var privatefunction = function () {
alert('hello');
}
return {
publicfunction : function () {
privatefunction();
}
}
})();
正如你在那里看到的，a现在是一个对象，它有一个方法publicfunction(a.publicfunction())，它调用privatefunction，它只存在于闭包中。你不能直接调用privatefunction(即a.b ratefunction())，只能调用publicfunction()。
这是一个最小的例子，但也许你可以看到它的用途?我们使用它来强制公共/私有方法。
闭包有各种各样的用例。在这里，我将解释闭包概念的最重要的用法。
闭包可以用来创建私有方法和变量，就像面向对象的语言，如java、c++等。一旦你实现了私有方法和变量，你在函数中定义的变量将不能被窗口对象访问。这有助于数据隐藏和数据安全。
const privateClass = () => {
let name = "sundar";
function setName(changeName) {
name = changeName;
}
function getName() {
return name;
}
return {
setName: setName,
getName: getName,
};
};
let javaLikeObject = privateClass(); \\ similar to new Class() in OOPS.
console.log(javaLikeObject.getName()); \\this will give sundar
javaLikeObject.setName("suresh");
console.log(javaLikeObject.getName()); \\this will give suresh
另一个关于闭包的现实例子:
创建index . html:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Program with Javascript</title>
</head>
<body>
<p id="first"></p>
<p id="second"></p>
<button onclick="applyingConcepts()">Click</button>
<script src="./index.js"></script>
</body>
</html>
2)在index.js:
let count = 0;
return () => {
document.getElementById("first").innerHTML = count++;
};
})();
在本例中，当您单击一个按钮时，计数将在p#id上更新。 注意:您可能想知道这段代码有什么特别之处。检查时，您将注意到不能使用window对象更改count的值。这意味着你已经声明了私有变量count，这样可以防止你的状态被客户端破坏。
解释JavaScript闭包的实际用法
当我们在另一个函数中创建一个函数时，我们是在创建一个闭包。闭包功能强大，因为它们能够读取和操作其外部函数的数据。无论何时调用函数，都会为该调用创建一个新的作用域。在函数内部声明的局部变量属于该作用域，并且只能从该函数访问它们。当函数完成执行时，作用域通常被销毁。
这类函数的一个简单例子是:
function buildName(name) {
const greeting = "Hello, " + name;
return greeting;
}
在上面的例子中，函数buildName()声明了一个局部变量greeting并返回它。每次函数调用都会创建一个新的作用域和一个新的局部变量。在函数执行完成后，我们无法再次引用该作用域，因此它被垃圾收集。
但如果我们有一个指向范围的链接呢?
让我们看看下一个函数:
函数buildName(name) { const greeting = "Hello， " + name + " Welcome "; const sayName = function() { console.log(问候); }; 返回sayName; ｝ const sayMyName = buildName("Mandeep"); sayMyName ();//你好，曼迪普
本例中的sayName()函数是一个闭包。sayName()函数有自己的局部作用域(变量welcome)，也可以访问外部(封闭)函数的作用域。在本例中，是来自buildName()的greeting变量。
在执行buildName之后，在本例中不会销毁作用域。sayMyName()函数仍然可以访问它，因此它不会被垃圾收集。但是，除了闭包之外，没有其他从外部作用域访问数据的方法。闭包充当全局上下文和外部作用域之间的网关。
在这里，我有一句想说好几遍的问候语。如果我创建一个闭包，我可以简单地调用该函数来记录问候语。如果我不创建闭包，我必须每次都传递我的名字。
没有闭包(https://jsfiddle.net/lukeschlangen/pw61qrow/3/):
function greeting(firstName, lastName) {
var message = "Hello " + firstName + " " + lastName + "!";
console.log(message);
}
greeting("Billy", "Bob");
greeting("Billy", "Bob");
greeting("Billy", "Bob");
greeting("Luke", "Schlangen");
greeting("Luke", "Schlangen");
greeting("Luke", "Schlangen");
使用闭包(https://jsfiddle.net/lukeschlangen/Lb5cfve9/3/):
function greeting(firstName, lastName) {
var message = "Hello " + firstName + " " + lastName + "!";
return function() {
console.log(message);
}
}
var greetingBilly = greeting("Billy", "Bob");
var greetingLuke = greeting("Luke", "Schlangen");
greetingBilly();
greetingBilly();
greetingBilly();
greetingLuke();
greetingLuke();
greetingLuke();
JavaScript闭包可用于在应用程序中实现节流和反弹功能。
节流
节流限制了一个函数在一段时间内可以被调用的最大次数。就像“最多每100毫秒执行一次这个函数。”
代码:
const throttle = (func, limit) => {
let isThrottling
return function() {
const args = arguments
const context = this
if (!isThrottling) {
func.apply(context, args)
isThrottling = true
setTimeout(() => isThrottling = false, limit)
}
}
}
消除抖动
deboundation限制了函数在经过一段时间后才会被再次调用。就像“仅在100毫秒后未被调用时才执行该函数。”
代码:
const debounce = (func, delay) => {
let debouncing
return function() {
const context = this
const args = arguments
clearTimeout(debouncing)
debouncing = setTimeout(() => func.apply(context, args), delay)
}
}
正如你所看到的，闭包帮助实现了两个漂亮的特性，每个web应用程序都应该提供流畅的UI体验功能。
