JavaScript函数的图表

什么工具可以用来在类似于UML序列图的东西中清晰地传达JavaScript变量范围和闭包之类的概念？例如，如何编写如下代码：（）

var arr=[]；
对于（var i=0；i
该代码是一个任意示例。该代码与问题无关，只是演示了经常误导的代码，这些代码可以从描述中获益。

你不能在UML中描述闭包和作用域。它根本不受支持，不管怎样在序列图中也不受支持。JavaScript中的闭包有点像在Java或C#中定义一个类，你不能把它放在你的UML中。嗯，我不能很好地解释这一点

闭包是作为JavaScript程序员必须理解的东西

您的UML应该关注的是实体及其交互，而不是像闭包这样的语言“怪癖”（如果您愿意的话）

我完全赞成描述误导性的代码，但UML图不是它的位置。请将其放在源代码的注释中。如果有人想知道此功能是如何工作的，他会查看源代码。如果他不想知道，请不要打扰他。
有一个商业产品：


它生成流程图（我见过）和UML活动图（我没有-我只使用了更旧的版本）。
我喜欢Dmitry Soshnikov在中用于解释执行上下文和范围链的图。在评论中，他说它们是在Visio中完成的（并不是说工具在这里很重要，而是结构帮助理解的概念）

我可以看到如何使用类似的图表来演示在示例代码中创建的每个函数如何访问同一作用域中的
I
变量，以及在固定版本的代码中，每个函数如何在其作用域链的顶端携带另一项，其中一个变量包含
的当前值>我
在包含范围被关闭时。
JavaScript闭包是。在序列图中表示它们是很棘手的，但我相信可以这样做：


在这种情况下，主作用域在循环中创建闭包，然后调用它们。闭包是匿名的，属于一般类“closure”

在其他情况下，可以创建、命名闭包，并将其传递给另一个对象，然后从该对象调用：

我知道这已经得到了回答，但下面是一个使用对象图在JavaScript中解释函数、闭包和对象的好例子


图形是用文本文件（点表示法）构建的，然后使用GraphViz自动生成

作者Tim Caswell在他的GitHub帐户中包含了指向源文件的链接

该代码的作用与您认为的不同。每个警报都会提醒
i
的最后一个值。这是典型的循环函数问题。您的示例在每次迭代时都会提醒“10”。请参阅@lawnsea@Matt Ball-我使用它正是出于这个原因；因为这是一个经典示例。我不确定我是否理解。您是在问如何使用它UML来描述错误的代码？这不是一个典型的例子，这是一个典型的错误-就像在亚洲发动一场陆地战争。其他人说没有UML系统来表示闭包/变量范围等。假设他们是对的，你可能想重新表述你的问题，要求“某种图形描述”或者别的什么。也就是说，你可能会觉得很有帮助。特别是当问题要求“清楚地解释”时，这是正确的答案。你不能。用自定义的非UML符号扩展你的UML图，你可以表示它们。但不是那样。+1-“不”这是一个公平的答案…但是有没有关于传达这些实体的交互的想法？即使是在非UML格式中？呃…真的？嗯。好吧，我得到了一些东西。我将把它放在一个IMG中，并将其作为另一个答案发布。我想你完全没有领会我的意思。闭包和作用域是语言构造，而不是实体。你不能也不应该对它们建模，我想n除了源代码以外的任何方式。划掉它。我的示例变得太复杂了，即使是文本。我所有的文本都被浪费了，我不会发布它。：-/这看起来很有趣。我希望有更多的序列-y，但这看起来很有希望。+1关闭不必是匿名的。任何返回内部函数的函数（或引用内部函数的对象）将创建闭包
var arr = [];
for(var i=0; i<10; i++) {
    arr.push(function() { alert(i); });
}
for(var j=arr.length;j--;) {
    arr[j]();
}