如何向某人解释JavaScript关闭,知道它们所构成的概念(例如功能、变量等),但不了解关闭本身?

我已经在维基百科上看到了图表的例子,但不幸的是,它没有帮助。


当前回答

這是一個試圖清除一些(可能的)關於關閉的誤解,在其他答案中出現。

关闭不只是在您返回内部函数时创建。 事实上,关闭函数不需要完全返回,以便其关闭创建。 您可以将内部函数归咎于外部范围中的变量,或者将其作为一个论点转移到另一个函数,在那里它可以立即或随后被召回。

其他回答

我收集了一个互动的JavaScript教程来解释关闭是如何工作的。

下面是其中一个例子:

var create = function (x) {
    var f = function () {
        return x; // We can refer to x here!
    };
    return f;
};
// 'create' takes one argument, creates a function

var g = create(42);
// g is a function that takes no arguments now

var y = g();
// y is 42 here

JavaScript 功能可以访问:

论点本地(即其本地变量和本地功能) 环境,其中包括:全球性,包括DOM在外部功能中的任何东西

请注意,外部功能不需要,尽管它们提供的好处我不在这里讨论。 通过访问其环境中的数据,一个关闭保持数据的生存. 在外部/内部功能的底部,外部功能可以创建本地数据,最终输出,但是,如果任何内部功能(s)在外部功能输出后生存,那么内部功能(s)保持外部功能的位置。

使用全球环境的封闭例子:

当用户点击 VoteUp 按钮时, voteUp_click 函数检查是否是VotedDown == 真实,以确定是否投票或仅仅取消投票。

var isVotedUp = false;
var isVotedDown = false;

function voteUp_click() {
  if (isVotedUp)
    return;
  else if (isVotedDown)
    SetDownVote(false);
  else
    SetUpVote(true);
}

function voteDown_click() {
  if (isVotedDown)
    return;
  else if (isVotedUp)
    SetUpVote(false);
  else
    SetDownVote(true);
}

function SetUpVote(status) {
  isVotedUp = status;
  // Do some CSS stuff to Vote-Up button
}

function SetDownVote(status) {
  isVotedDown = status;
  // Do some CSS stuff to Vote-Down button
}

第一個問題有一個引用:

如果你不能向六岁的人解释,你真的不明白。

这就是我会试图向一个真正的六岁男孩解释的方式:

你知道成年人如何拥有房子,他们称之为房子吗?当一个母亲有孩子时,孩子真的没有任何东西,对吗?但是她的父母拥有房子,所以每当有人问“你的房子在哪里?”孩子可以回答“那房子!”并指向父母的房子。

“关闭”是孩子能够永远(即使在国外)提到自己的家,即使是真正的父母拥有家。

孩子们永远不会忘记他们与父母分享的秘密,即使父母离开后。

JavaScript 功能的秘密是私人变量

var parent = function() {
 var name = "Mary"; // secret
}

正如你可以猜测的那样,因为变量每次函数被召唤,没有人会知道它们,必须有一个秘密的地方,它们被存储在那里,它可以被称为秘密室或管道或地方范围,但这并不重要,我们知道它们在某个地方隐藏在记忆中。

但是,在JavaScript中,这是一个非常特殊的事情,在其他功能内创建的功能,也可以知道父母的本地变量,并保持它们,只要他们活着。

var parent = function() {
  var name = "Mary";
  var child = function(childName) {
    // I can also see that "name" is "Mary"
  }
}

因此,只要我们在父母功能,它可以创建一个或多个儿童功能,从秘密位置分享秘密变量。

但可悲的是,如果孩子也是父母功能的私人变量,当父母结束时也会死亡,而秘密也会与他们一起死亡。

所以要活着,孩子必须离开,直到太晚了。

var parent = function() {
  var name = "Mary";
  var child = function(childName) {
    return "My name is " + childName  +", child of " + name; 
  }
  return child; // child leaves the parent ->
}
var child = parent(); // < - and here it is outside 

所以,如果你叫孩子“爱丽丝”,她会回答。

child("Alice") => "My name is Alice, child of Mary"

这就是所有要说的。

如果你想向一个六岁的孩子解释,那么你必须找到一些更简单的东西,没有代码。

只是告诉孩子他是“开放”的,这意味着他能够与其他人,他的朋友有关系。在某个时候,他有确定的朋友(我们可以知道他的朋友的名字),这是一个关闭。如果你拍照他和他的朋友,那么他是“关闭”相对他的友谊能力。