10

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.

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.

How would you represent this simplified version of my code with an UML class diagram?

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.

Is there maybe a UML guide especially for JavaScript projects?

Improve this question
1
  • 2
    I don't think there is and would be surprised to hear anything about it. If I were you I would "pretend" book is a regular class with all these public properties (in contrast to private properties but you don't have any). Also, creation would be represented in the same way in sequence diagrams. I don't think UML should distinct what type of object model a language has. Commented Feb 4, 2014 at 20:24

2 Answers 2

Reset to default
4

I would take a look at Object Playground.

It will create a diagram that exactly shows what is going on in your JS object hierarchy.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you Josh, a very illuminating website!
2
  • 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: enter image description here

And read that, please: https://stackoverflow.com/a/21551335/715269

Improve this answer

4 Comments

Thank you Gangus for this first contribution! I try to clarify: I didn't forget to mention the class, my code is actialy not in a class since Javascript is a class-less language. In Javascript you only have objects, no classes. When new objects are created it is possible to simulate inheritance in 2 ways: 1) the object costructor (a function) can assign attrbutes/methods to the new object. 2) assigning attributes/methods to the constructor's prototype, the new object will have access to those prototype attributes/methods (but only as a reference, not as a local copy of them). More clear?
Then you should draw objects as class blocks, show creation by "instantiate" dependency or, if it is by prototype, show it by Generalization relationship. As for associations, they will be the same.
Object diagram won't help, because there an instance can't have its own attributes.
@PavelMaximov And thank you for reminding me on the specific of JS. I am too deep in Java last 4 years. Spasibo.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.