如何用 UML 类图表示 Javascript 对象创建？答案

【问题标题】：How to represent Javascript object creation with an UML class diagram?如何用 UML 类图表示 Javascript 对象创建？
【发布时间】：2014-02-28 21:47:34
【问题描述】：

我在为我的 JavaScript APP 绘制准确的 UML 类图时遇到了一些问题。我已经阅读了几个 UML 参考资源，但仍然没有找到适合我的情况的答案，因为所有示例都是基于 C++/Java 的经典继承和类模型。

我想用构造函数和原型对象的扩展来表示自定义 JavaScript 对象的创建，这与 C++/Java 类实例化完全不同。

你会如何用 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");

注意：我特别想在图中展示所有涉及的对象（Book、Book.prototype 和 theHobbit）是如何相互关联的，并展示在原型中定义的参数与在构造函数中定义的参数。我知道我可以假装 Book 是一个“经典”类，并将它画成 Java，简化特定的 JavaScript 继承机制，但我确信 UML 足够灵活，可以准确地描述我的情况。

是否有专门针对 JavaScript 项目的 UML 指南？

【问题讨论】：

我认为没有，听到任何关于它的消息都会感到惊讶。如果我是你，我会“假装” book 是一个具有所有这些公共属性的普通类（与私有属性相反，但你没有）。此外，创建将在序列图中以相同的方式表示。我不认为 UML 应该区分语言具有哪种类型的对象模型。

标签： javascript object uml class-diagram prototype-programming

【解决方案1】：

我会看看Object Playground。

它将创建一个图表，准确地显示您的 JS 对象层次结构中发生的事情。

【讨论】：

感谢 Josh，一个非常有启发性的网站！

【解决方案2】：

让我们将主程序显示为 A 类。
请保持课程以大字母开头，成员以小字母开头。或者它很难读。
很多事情很难说，不知道你的意思。这是图的存根：

请阅读：https://stackoverflow.com/a/21551335/715269

【讨论】：

感谢 Gangus 的首次贡献！我试着澄清一下：我没有忘记提到类，我的代码实际上不在类中，因为 Javascript 是一种无类语言。在 Javascript 中，你只有对象，没有类。创建新对象时，可以通过两种方式模拟继承：1) 对象构造函数（一个函数）可以将属性/方法分配给新对象。 2）将属性/方法分配给构造函数的原型，新对象将可以访问这些原型属性/方法（但仅作为参考，而不是作为它们的本地副本）。更清楚了吗？
然后你应该将对象绘制为类块，通过“实例化”依赖显示创建，或者如果是原型，则通过泛化关系显示它。至于关联，它们将是相同的。
对象图没有帮助，因为实例不能有自己的属性。
@PavelMaximov 感谢您提醒我有关 JS 的具体情况。过去 4 年我对 Java 的了解太深了。斯帕西博。