jsdoc.github.io/howto-es2015-classes.html at e5f4d9d8e0f5defee7b3bd9a1f0d8d74f24efc86 · jsdoc/jsdoc.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE. DO NOT EDIT. -->
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="description" content="How to add JSDoc comments to ECMAScript 2015 classes.">
  <title>ES 2015 Classes &ndash; Use JSDoc</title>
  <link rel="stylesheet" href="styles/usejsdoc.css">
  <link rel="stylesheet" href="styles/prettify.css">
  <link rel="stylesheet" href="styles/css3-github-ribbon.css">
  <script src="scripts/prettify.js"></script>
  <!--[if lt IE 9]>
            <script src="scripts/html5shiv.min.js"></script>
            <script src="scripts/html5shiv-printshiv.min.js"></script>
        <![endif]-->
</head>

<body>
  <header>
    <a href="./index.html">@use JSDoc</a>
  </header>
  <article>
    <h1>ES 2015 Classes</h1>
    <h2>Table of Contents</h2>
    <ul>
      <li>
        <a href="#documenting-a-simple-class">Documenting a simple class</a>
      </li>
      <li>
        <a href="#extending-classes">Extending classes</a>
      </li>
      <li>
        <a href="#related-links">Related Links</a>
      </li>
    </ul>
    <p>JSDoc 3 makes it easy to document classes that follow the <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-class-definitions">ECMAScript 2015
specification</a>. You don&#39;t need to use tags such as <code>@class</code> and <code>@constructor</code> with ES 2015 classes—JSDoc automatically identifies classes
      and their constructors simply by parsing your code. ES 2015 classes are supported in JSDoc 3.4.0 and later.</p>
    <h2 id="documenting-a-simple-class">Documenting a simple class</h2>
    <p>The following example shows how to document a simple class with a constructor, two instance methods, and one static method:</p>
    <figure>
      <figcaption>Simple ES 2015 class</figcaption><pre class="prettyprint lang-js"><code>/** Class representing a point. */
class Point {
    /**
     * Create a point.
     * @param {number} x - The x value.
     * @param {number} y - The y value.
     */
    constructor(x, y) {
        // ...
    }

    /**
     * Get the x value.
     * @return {number} The x value.
     */
    getX() {
        // ...
    }

    /**
     * Get the y value.
     * @return {number} The y value.
     */
    getY() {
        // ...
    }

    /**
     * Convert a string containing two comma-separated numbers into a point.
     * @param {string} str - The string containing two comma-separated numbers.
     * @return {Point} A Point object.
     */
    static fromString(str) {
        // ...
    }
}
</code></pre>
    </figure>
    <p>You can also document classes that are defined in a class expression, which assigns the class to a variable or constant:</p>
    <figure>
      <figcaption>ES 2015 class expression</figcaption><pre class="prettyprint lang-js"><code>/** Class representing a point. */
const Point = class {
    // and so on
}
</code></pre>
    </figure>
    <h2 id="extending-classes">Extending classes</h2>
    <p>When you use the <code>extends</code> keyword to extend an existing class, you also need to tell JSDoc which class you&#39;re extending. You do this with the
      <a href="tags-augments.html"><code>@augments</code> (or <code>@extends</code>) tag</a>.</p>
    <p>For example, to extend the <code>Point</code> class shown above:</p>
    <figure>
      <figcaption>Extending an ES 2015 class</figcaption><pre class="prettyprint lang-js"><code>/**
 * Class representing a dot.
 * @extends Point
 */
class Dot extends Point {
    /**
     * Create a dot.
     * @param {number} x - The x value.
     * @param {number} y - The y value.
     * @param {number} width - The width of the dot, in pixels.
     */
    constructor(x, y, width) {
        // ...
    }

    /**
     * Get the dot's width.
     * @return {number} The dot's width, in pixels.
     */
    getWidth() {
        // ...
    }
}
</code></pre>
    </figure>
    <h2 id="related-links">Related Links</h2>
    <p>
      <a href="tags-augments.html">@augments</a>
    </p>
  </article>
  <footer>
    <a class="license-badge" href="http://creativecommons.org/licenses/by-sa/3.0/">
      <img alt="Creative Commons License" class="license-badge" src="images/cc-by-sa.svg" width="80" height="15" />
    </a>
    <br> Copyright &#169; 2011-2017 the
    <a href="https://github.com/jsdoc3/jsdoc3.github.com/contributors">contributors</a> to the JSDoc 3 documentation project.
    <br> This website is <a href="https://github.com/jsdoc3/jsdoc3.github.com">open source</a> and is licensed under the <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">
        Creative Commons Attribution-ShareAlike 3.0 Unported License</a>.
  </footer>
  <script type="text/javascript">
    prettyPrint();
  </script>
</body>

</html>