如何向某人解释JavaScript关闭,知道它们所构成的概念(例如功能、变量等),但不了解关闭本身?
我已经在维基百科上看到了图表的例子,但不幸的是,它没有帮助。
当前回答
在模块模式中,您定义了一个函数,然后立即在所谓的即时启动函数表达(IIFE)中呼叫它。 您在该函数中所写的一切都有私人范围,因为它在关闭中定义,从而允许您在JavaScript中“模拟”隐私。
var Closure = (function () {
// This is a closure
// Any methods, variables and properties you define here are "private"
// and can't be accessed from outside the function.
//This is a private variable
var foo = "";
//This is a private method
var method = function(){
}
})();
另一方面,如果您希望在关闭室外看到一个或多个变量或方法,您可以将其返回对象内部。
var Closure = (function () {
// This is a closure
// Any methods, variables and properties you define here are "private"
// and can't be accessed from outside the function.
//This is a private variable
var foo = "";
//This is a private method
var method = function(){
}
//The method will be accessible from outside the closure
return {
method: method
}
})();
Closure.method();
希望能帮忙......看,
其他回答
也许我们应该切断你的27岁的朋友,因为整个“关闭”的概念是(!)...... voodoo!
我意思的是:(a)你不直觉地期望它......(b)当有人花时间向你解释它时,你肯定不会期望它工作!
当你终于意识到这样的事情是可能的,那么......肯定......任何人的后事实反应会是:“whoa-a-a(!)...... kew-el-l-l...(!!!)”
直觉给了你很多完全可靠的期望,这样的事情会“当然,绝对是无意义的,因此是完全不可能的。
正如我所说的那样,“这就是伏地。
我认为值得回头迈出一步,并考虑一个更普遍的“关闭”概念 - 所谓的“加入运营商”。
在数学中,“加入”操作员是部分命令集中的一个函数,返回最小的对象,大于或等于其论点。在符号中,加入 [a,b] = d 如 d >= a 和 d >= b,但没有一个 e 如 d > e >= a 或 d > e >= b。
因此,加入给你最小的东西“大”比部分。
现在,请注意,JavaScript Scopes 是一个部分安排的结构,所以有一个敏感的概念加入,特别是,一个加入 Scopes 的最小范围比原始 Scopes 大。
因此,对变量A、B、C的关闭是最小的范围(在您的程序的细节中!)将A、B、C带入范围。
没有自由变量的功能被称为纯功能。
包含一个或多个自由变量的功能被称为关闭。
var pure = function pure(x){
return x
// only own environment is used
}
var foo = "bar"
var closure = function closure(){
return foo
// foo is free variable from the outer environment
}
src: https://leanpub.com/javascriptallongesix/read#leanpub-auto-if-functions-without-free-variables-are-pure-are-closures-impure
关闭是当内部函数以某种方式为外部函数以外的任何范围提供时创建的。
例子:
var outer = function(params){ //Outer function defines a variable called params
var inner = function(){ // Inner function has access to the params variable of the outer function
return params;
}
return inner; //Return inner function exposing it to outer scope
},
myFunc = outer("myParams");
myFunc(); //Returns "myParams"
var foo = function() {
alert("Hello World!");
};
var bar = function(arg) {
return arg;
};
bar(foo)();
function add(value1, value2) {
function doAdd(operand1, operand2) {
return operand1 + operand2;
}
return doAdd(value1, value2);
}
var foo = add(1, 2);
// foo equals 3
function add(value1, value2) {
function doAdd() {
return value1 + value2;
}
return doAdd();
}
var foo = add(1, 2);
// foo equals 3
创建关闭 一个关闭是当一个内部函数从创建它的函数的外部可访问时创建的,这通常发生在一个外部函数返回一个内部函数时,当这种情况发生时,内部函数保持了一个参考到它创建的环境。
function add(value1) {
return function doAdd(value2) {
return value1 + value2;
};
}
var increment = add(1);
var foo = increment(2);
// foo equals 3
function increment(value2) {
return 1 + value2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Closures</title>
<meta charset="UTF-8" />
<script>
window.addEventListener("load", function() {
window.setInterval(showMessage, 1000, "some message<br />");
});
function showMessage(message) {
document.getElementById("message").innerHTML += message;
}
</script>
</head>
<body>
<span id="message"></span>
</body>
</html>
window.addEventListener("load", function() {
var showMessage = getClosure("some message<br />");
window.setInterval(showMessage, 1000);
});
function getClosure(message) {
function showMessage() {
document.getElementById("message").innerHTML += message;
}
return showMessage;
}
模拟私人数据
function Person(name) {
this._name = name;
this.getName = function() {
return this._name;
};
}
var person = new Person("Colin");
person._name = "Tom";
// person.getName() now returns "Tom"
function Person(name) {
var _name = name;
this.getName = function() {
return _name;
};
}
var person = new Person("Colin");
person._name = "Tom";
// person._name is "Tom" but person.getName() returns "Colin"
在LOPS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Closures</title>
<meta charset="UTF-8" />
<script>
window.addEventListener("load", function() {
for (var i = 1; i < 4; i++) {
var button = document.getElementById("button" + i);
button.addEventListener("click", function() {
alert("Clicked button " + i);
});
}
});
</script>
</head>
<body>
<input type="button" id="button1" value="One" />
<input type="button" id="button2" value="Two" />
<input type="button" id="button3" value="Three" />
</body>
</html>
要解决这个问题,关闭必须从实际路径变量中分开,这可以通过呼叫一个新的函数来完成,这反过来创造了一个新的参考环境,下面的例子表明如何做到这一点,路径变量转移到 getHandler() 函数, getHandler() 然后返回一个独立于原来的“为”路径的关闭。
function getHandler(i) {
return function handler() {
alert("Clicked button " + i);
};
}
window.addEventListener("load", function() {
for (var i = 1; i < 4; i++) {
var button = document.getElementById("button" + i);
button.addEventListener("click", getHandler(i));
}
});
function Person(name) {
var _name = name;
this.getName = function() {
return _name;
};
this.sayHello = function() {
alert("Hello!");
};
}
function Person(name) {
var _name = name;
this.getName = function() {
return _name;
};
}
Person.prototype.sayHello = function() {
alert("Hello!");
};
要记住的事情
推荐文章
- 如何使用Jest测试对象键和值是否相等?
- 将长模板文字行换行为多行，而无需在字符串中创建新行
- 如何在JavaScript中映射/减少/过滤一个集?
- Bower: ENOGIT Git未安装或不在PATH中
- 如何获取变量的类型?
- 添加javascript选项选择
- 在Node.js中克隆对象
- 为什么在JavaScript的Date构造函数中month参数的范围从0到11 ?
- 使用JavaScript更改URL参数并指定默认值
- 我如何才能找到一个Python函数的参数的数量?
- 在window.setTimeout()发生之前取消/终止
- 在c++中，是通过值传递更好，还是通过引用到const传递更好?
- 确定bash中是否存在一个函数
- 如何删除未定义和空值从一个对象使用lodash?
- 从类定义中的列表推导式访问类变量
