我正在尽最大努力理解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();
当前回答
在这里，我有一句想说好几遍的问候语。如果我创建一个闭包，我可以简单地调用该函数来记录问候语。如果我不创建闭包，我必须每次都传递我的名字。
没有闭包(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();
其他回答
假设，你想统计用户在网页上点击按钮的次数。
为此，您将在按钮的onclick事件上触发一个函数来更新变量的计数
<button onclick="updateClickCount()">click me</button>
现在有很多方法，比如:
你可以使用一个全局变量和一个函数来增加计数器: Var计数器= 0; 函数updatecickcount () { + +计数器; //用counter做一些事情 ｝ 但是，问题在于页面上的任何脚本都可以更改计数器，而不需要调用updatecickcount()。
现在，你可能在考虑在函数内部声明变量: 函数updatecickcount () { Var计数器= 0; + +计数器; //用counter做一些事情 ｝ 但是,嘿!每次调用updateClickCount()函数时，计数器再次被设置为1。
Thinking about nested functions? Nested functions have access to the scope "above" them. In this example, the inner function updateClickCount() has access to the counter variable in the parent function countWrapper(): function countWrapper() { var counter = 0; function updateClickCount() { ++counter; // Do something with counter } updateClickCount(); return counter; } This could have solved the counter dilemma, if you could reach the updateClickCount() function from the outside and you also need to find a way to execute counter = 0 only once not everytime.
Closure to the rescue! (self-invoking function): var updateClickCount = (function(){ var counter = 0; return function(){ ++counter; // Do something with counter } })(); The self-invoking function only runs once. It sets the counter to zero (0), and returns a function expression. This way updateClickCount becomes a function. The "wonderful" part is that it can access the counter in the parent scope. This is called a JavaScript closure. It makes it possible for a function to have "private" variables. The counter is protected by the scope of the anonymous function, and can only be changed using the updateClickCount() function!
一个关于闭包的更生动的例子
< >脚本 var updatecickcount =(函数(){ Var计数器= 0; 返回函数(){ + +计数器; . getelementbyid(“spnCount”)。innerHTML =计数器; ｝ })（); > < /脚本 < html > <按钮onclick = " updateClickCount ()“>点击我> < /按钮 <div>你点击了 <span id="spnCount"> 0 </span> times! < / div > < / html >
参考:JavaScript闭包
参考:闭包的实际使用
在实践中，闭包可以创建优雅的设计，允许自定义各种计算、延迟调用、回调、创建封装的作用域等。
一个例子是数组的sort方法，它接受sort条件函数作为参数:
[1, 2, 3].sort(function (a, b) {
... // Sort conditions
});
将函数函数映射为数组的map方法，它根据函数参数的条件映射一个新数组:
[1, 2, 3].map(function (element) {
return element * 2;
}); // [2, 4, 6]
通常，通过使用函数参数定义几乎无限的搜索条件来实现搜索函数是很方便的:
someCollection.find(function (element) {
return element.someProperty == 'searchCondition';
});
此外，我们可能会注意到应用函数，例如，forEach方法将函数应用于元素数组:
[1, 2, 3].forEach(function (element) {
if (element % 2 != 0) {
alert(element);
}
}); // 1, 3
函数应用于实参(在apply中应用于实参列表，在call中应用于定位实参):
(function () {
alert([].join.call(arguments, ';')); // 1;2;3
}).apply(this, [1, 2, 3]);
延迟调用:
var a = 10;
setTimeout(function () {
alert(a); // 10, after one second
}, 1000);
回调函数:
var x = 10;
// Only for example
xmlHttpRequestObject.onreadystatechange = function () {
// Callback, which will be called deferral ,
// when data will be ready;
// variable "x" here is available,
// regardless that context in which,
// it was created already finished
alert(x); // 10
};
创建一个用于隐藏辅助对象的封装作用域:
var foo = {};
(function (object) {
var x = 10;
object.getX = function _getX() {
return x;
};
})(foo);
alert(foo.getX()); // Get closured "x" – 10
特别是在JavaScript(或任何ECMAScript)语言中，闭包在隐藏功能实现的同时仍然显示接口方面非常有用。
例如，假设您正在编写一个日期实用工具方法类，您希望允许用户通过索引查找工作日名称，但不希望他们能够修改您在底层使用的名称数组。
var dateUtil = {
weekdayShort: (function() {
var days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
return function(x) {
if ((x != parseInt(x)) || (x < 1) || (x > 7)) {
throw new Error("invalid weekday number");
}
return days[x - 1];
};
}())
};
注意，days数组可以简单地存储为dateUtil对象的属性，但是脚本用户可以看到它，他们甚至可以根据需要更改它，甚至不需要您的源代码。但是，由于它被返回日期查找函数的匿名函数所包围，因此只能由查找函数访问，因此现在它是防篡改的。
闭包有各种各样的用例。在这里，我将解释闭包概念的最重要的用法。
闭包可以用来创建私有方法和变量，就像面向对象的语言，如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中编写的大部分代码都是基于事件的——我们定义了一些行为，然后将其附加到由用户触发的事件(例如单击或按键)。我们的代码通常是作为一个回调附加的:在响应事件时执行的单个函数。 Size12、size14和size16现在是将正文文本分别调整为12、14和16像素的函数。我们可以将它们附加到按钮(在本例中是链接)，如下所示:
function makeSizer(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
}
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);
document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;
小提琴
