如何用 UML 类图表示 Javascript 对象的创建？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21560715/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to represent Javascript object creation with an UML class diagram?
提问by Pavel Maximov
I'm having some trouble drawing an accurate UML Class diagram for my JavaScript APP. I've read several UML reference resources, but still didn't find an answer for my situation, since all the examples are based on the classical inheritance and class model of C++/Java.
我在为我的 JavaScript APP 绘制准确的 UML 类图时遇到了一些麻烦。我已经阅读了几个 UML 参考资源，但仍然没有找到适合我情况的答案，因为所有示例都基于 C++/Java 的经典继承和类模型。
I want to represent the creation of a custom JavaScript object with a constructor function and extension of it's prototype object, which is quite different from C++/Java class instantiation.
我想用构造函数和它的原型对象的扩展来表示自定义 JavaScript 对象的创建，这与 C++/Java 类实例化完全不同。
How would you represent this simplified version of my code with an UML class diagram?
你将如何用 UML 类图表示我的代码的这个简化版本？
var Book = function(title, author) {
this.title = title || 'No title specified';
this.author = author || 'No author specified';
}
Book.prototype.isDigital = false;
Book.prototype.titleDisplay = function() {
alert(this.title);
};
var theHobbit = new Book ("The Hobbit", "J.R.R. Tolkien");
NOTE: I'm especially aiming to show in the diagram how exactly all the involved objects (Book, Book.prototype and theHobbit) are related to each other and to show which parameters are defined in the prototype vs those defined in the constructor. I know I could just pretend Book is a "classical" class, and draw it like it was Java, simplifying the particular JavaScript inheritance mechanism, but I'm sure UML is flexible enough to describe precisely my case.
注意：我特别想在图中显示所有涉及的对象（Book、Book.prototype 和 theHobbit）之间的确切关系，并显示原型中定义的参数与构造函数中定义的参数。我知道我可以假装 Book 是一个“经典”类，并像 Java 一样绘制它，简化特定的 JavaScript 继承机制，但我确信 UML 足够灵活，可以准确地描述我的情况。
Is there maybe a UML guide especially for JavaScript projects?
是否有专门针对 JavaScript 项目的 UML 指南？
采纳答案by Gangnus
- Let's show the main program as the class A.
- Please, keep classes starting with large letter and members with small ones. Or it is hardly readable.
- Many things is hard to say, not knowing what you mean. this is a stub of diagram:
- 让我们将主程序显示为 A 类。
- 请保持班级以大字母开头，成员以小字母开头。或者它几乎不可读。
- 很多事情很难说，不知道你的意思。这是图的存根：
And read that, please: https://stackoverflow.com/a/21551335/715269
回答by Josh
I would take a look at Object Playground.
我会看看Object Playground。
It will create a diagram that exactly shows what is going on in your JS object hierarchy.
它将创建一个图表，准确显示您的 JS 对象层次结构中正在发生的事情。
