我正在尽最大努力理解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();
当前回答
闭包有各种各样的用例。在这里，我将解释闭包概念的最重要的用法。
闭包可以用来创建私有方法和变量，就像面向对象的语言，如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，这样可以防止你的状态被客户端破坏。
其他回答
在这里，我有一句想说好几遍的问候语。如果我创建一个闭包，我可以简单地调用该函数来记录问候语。如果我不创建闭包，我必须每次都传递我的名字。
没有闭包(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();
参考:闭包的实际使用
在实践中，闭包可以创建优雅的设计，允许自定义各种计算、延迟调用、回调、创建封装的作用域等。
一个例子是数组的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
在给定的示例中，所包含的变量'counter'的值是受保护的，只能使用给定的函数(自增，自减)来更改。因为它在闭包中，
var MyCounter =函数(){ Var计数器= 0; 返回{ 增量:函数(){返回计数器+= 1;}， 递减:函数(){返回计数器= 1;}， 获取:函数(){返回计数器;} }; }; var x = MyCounter(); / /或 var y = MyCounter(); 警报(x.get ());/ / 0 警报(x.increment ());/ / 1 警报(x.increment ());/ / 2 警报(y.increment ());/ / 1 警报(x.get ());// x仍然是2
闭包的另一个常见用途是将方法中的this绑定到特定对象，允许在其他地方调用它(例如作为事件处理程序)。
function bind(obj, method) {
if (typeof method == 'string') {
method = obj[method];
}
return function () {
method.apply(obj, arguments);
}
}
...
document.body.addEventListener('mousemove', bind(watcher, 'follow'), true);
每当鼠标移动事件触发时，都会调用watch .follow(evt)。
闭包也是高阶函数的重要组成部分，通过参数化不同部分，可以将多个相似函数重写为一个高阶函数，这是非常常见的模式。举个抽象的例子，
foo_a = function (...) {A a B}
foo_b = function (...) {A b B}
foo_c = function (...) {A c B}
就变成了
fooer = function (x) {
return function (...) {A x B}
}
其中A和B不是语法单位，而是源代码字符串(不是字符串字面量)。
具体示例请参见“用函数简化我的javascript”。
如果你熟悉面向对象意义上的实例化类的概念(即创建该类的对象)，那么你就接近理解闭包了。
这样想:当你实例化两个Person对象时，你知道类成员变量“Name”在实例之间是不共享的;每个对象都有自己的“副本”。类似地，当你创建一个闭包时，自由变量(上面例子中的'calledCount')被绑定到函数的'实例'。
我认为你的概念上的突破有点受到这样一个事实的阻碍，即由warnUser函数(另外:这是一个高阶函数)返回的每个函数/闭包都绑定'calledCount'与相同的初始值(0)，而通常在创建闭包时，将不同的初始化式传递到高阶函数中更有用，就像将不同的值传递给类的构造函数一样。
所以，假设当'calledCount'达到某个值时，你想结束用户的会话;您可能需要不同的值，这取决于请求是来自本地网络还是来自大的坏Internet(是的，这是一个人为的例子)。要实现这一点，您可以将不同的calledCount初始值传递给warnUser(即-3或0?)
文献的部分问题是用来描述它们的命名法(“词汇范围”，“自由变量”)。不要让它欺骗你，闭包比看起来要简单得多…初步证据;-)
