forked from jsdoc/jsdoc.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhowto-es2015-classes.html
143 lines (136 loc) · 4.52 KB
/
howto-es2015-classes.html
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
139
140
141
142
143
<!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>Use JSDoc: ES 2015 Classes</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>
</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'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'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 © 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>